Remove theme switcher
This commit is contained in:
parent
5c26b8a4a2
commit
f575f7684b
@ -172,8 +172,6 @@
|
||||
|
||||
a,
|
||||
#language-switcher summary,
|
||||
#theme-switcher summary,
|
||||
#theme-switcher button,
|
||||
summary {
|
||||
color: var(--fg-muted-4);
|
||||
|
||||
@ -281,49 +279,5 @@
|
||||
-webkit-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 {
|
||||
a,
|
||||
summary,
|
||||
&#language-switcher details summary,
|
||||
&#theme-switcher details summary {
|
||||
&#language-switcher details summary {
|
||||
border-radius: var(--rounded-corner);
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,9 +40,6 @@ function setTheme(theme, saveToLocalStorage = false) {
|
||||
|
||||
// Update icon class based on the selected theme.
|
||||
updateIconClass(theme);
|
||||
|
||||
// Update the active button based on the selected theme.
|
||||
updateActiveButton(theme);
|
||||
}
|
||||
|
||||
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
|
||||
const currentTheme = localStorage.getItem("theme") || window.defaultTheme || "system";
|
||||
updateIconClass(currentTheme);
|
||||
updateActiveButton(currentTheme);
|
||||
|
||||
// Make the switchTheme function accessible globally
|
||||
window.switchTheme = switchTheme;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user