Remove theme switcher
This commit is contained in:
parent
5c26b8a4a2
commit
f575f7684b
@ -172,8 +172,6 @@
|
|||||||
|
|
||||||
a,
|
a,
|
||||||
#language-switcher summary,
|
#language-switcher summary,
|
||||||
#theme-switcher summary,
|
|
||||||
#theme-switcher button,
|
|
||||||
summary {
|
summary {
|
||||||
color: var(--fg-muted-4);
|
color: var(--fg-muted-4);
|
||||||
|
|
||||||
@ -281,49 +279,5 @@
|
|||||||
-webkit-mask-image: var(--icon-languages);
|
-webkit-mask-image: var(--icon-languages);
|
||||||
mask-image: var(--icon-languages);
|
mask-image: var(--icon-languages);
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-switcher {
|
|
||||||
ul {
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
border-radius: 999px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
box-shadow: var(--edge-highlight);
|
|
||||||
background-color: var(--accent-color-alpha);
|
|
||||||
color: var(--accent-color);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#theme-system .icon,
|
|
||||||
.icon {
|
|
||||||
-webkit-mask-image: var(--icon-theme-system);
|
|
||||||
mask-image: var(--icon-theme-system);
|
|
||||||
|
|
||||||
:root[dir*="rtl"] & {
|
|
||||||
transform: scaleX(-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#theme-light .icon,
|
|
||||||
.icon.light {
|
|
||||||
-webkit-mask-image: var(--icon-theme-light);
|
|
||||||
mask-image: var(--icon-theme-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
#theme-dark .icon,
|
|
||||||
.icon.dark {
|
|
||||||
-webkit-mask-image: var(--icon-theme-dark);
|
|
||||||
mask-image: var(--icon-theme-dark);
|
|
||||||
|
|
||||||
:root[dir*="rtl"] & {
|
|
||||||
transform: scaleX(-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -18,8 +18,7 @@
|
|||||||
nav ul li {
|
nav ul li {
|
||||||
a,
|
a,
|
||||||
summary,
|
summary,
|
||||||
&#language-switcher details summary,
|
&#language-switcher details summary {
|
||||||
&#theme-switcher details summary {
|
|
||||||
border-radius: var(--rounded-corner);
|
border-radius: var(--rounded-corner);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -40,9 +40,6 @@ function setTheme(theme, saveToLocalStorage = false) {
|
|||||||
|
|
||||||
// Update icon class based on the selected theme.
|
// Update icon class based on the selected theme.
|
||||||
updateIconClass(theme);
|
updateIconClass(theme);
|
||||||
|
|
||||||
// Update the active button based on the selected theme.
|
|
||||||
updateActiveButton(theme);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetTheme() {
|
function resetTheme() {
|
||||||
@ -72,33 +69,9 @@ function updateIconClass(theme) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateActiveButton(theme) {
|
|
||||||
// Remove .active class from all buttons
|
|
||||||
document.querySelectorAll('#theme-switcher button').forEach(button => {
|
|
||||||
button.classList.remove('active');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add .active class to the button corresponding to the current theme
|
|
||||||
const activeButton = document.querySelector(`#theme-${theme}`);
|
|
||||||
if (activeButton) {
|
|
||||||
activeButton.classList.add('active');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("theme-light").addEventListener("click", function () {
|
|
||||||
switchTheme("light");
|
|
||||||
});
|
|
||||||
document.getElementById("theme-dark").addEventListener("click", function () {
|
|
||||||
switchTheme("dark");
|
|
||||||
});
|
|
||||||
document.getElementById("theme-system").addEventListener("click", function () {
|
|
||||||
switchTheme("system");
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update icon class on page load based on current theme
|
// Update icon class on page load based on current theme
|
||||||
const currentTheme = localStorage.getItem("theme") || window.defaultTheme || "system";
|
const currentTheme = localStorage.getItem("theme") || window.defaultTheme || "system";
|
||||||
updateIconClass(currentTheme);
|
updateIconClass(currentTheme);
|
||||||
updateActiveButton(currentTheme);
|
|
||||||
|
|
||||||
// Make the switchTheme function accessible globally
|
// Make the switchTheme function accessible globally
|
||||||
window.switchTheme = switchTheme;
|
window.switchTheme = switchTheme;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user