50 lines
1.5 KiB
JavaScript
50 lines
1.5 KiB
JavaScript
const theme_switcher = document.getElementById("theme-switcher");
|
|
const imgs = document.getElementsByTagName("img");
|
|
|
|
let theme = window.localStorage.getItem("theme");
|
|
|
|
if (theme !== null) {
|
|
if (theme === "light") {
|
|
changeToLightTheme();
|
|
} else {
|
|
changeToDarkTheme();
|
|
}
|
|
} else {
|
|
if (
|
|
window.matchMedia &&
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
) {
|
|
changeToDarkTheme();
|
|
}
|
|
}
|
|
|
|
theme_switcher.addEventListener("click", () => {
|
|
if (theme_switcher.textContent.indexOf("off") !== -1) {
|
|
changeToDarkTheme();
|
|
} else {
|
|
changeToLightTheme();
|
|
}
|
|
});
|
|
|
|
function changeToDarkTheme() {
|
|
theme_switcher.textContent = "turn the light on";
|
|
document.documentElement.style.setProperty("--border", "var(--dark-border)");
|
|
document.documentElement.style.setProperty("--text", "var(--dark-text)");
|
|
document.documentElement.style.setProperty("--bg", "var(--dark-bg)");
|
|
window.localStorage.setItem("theme", "dark");
|
|
for (let i = 0; i < imgs.length; i += 1) {
|
|
imgs[i].src = imgs[i].src.replace("-light", "-dark");
|
|
}
|
|
}
|
|
|
|
function changeToLightTheme() {
|
|
theme_switcher.textContent = "turn the light off";
|
|
document.documentElement.style.setProperty("--border", "var(--light-border)");
|
|
document.documentElement.style.setProperty("--text", "var(--light-text)");
|
|
document.documentElement.style.setProperty("--bg", "var(--light-bg)");
|
|
window.localStorage.setItem("theme", "light");
|
|
for (let i = 0; i < imgs.length; i += 1) {
|
|
imgs[i].src = imgs[i].src.replace("-dark", "-light");
|
|
}
|
|
}
|