96 lines
2.7 KiB
JavaScript
96 lines
2.7 KiB
JavaScript
const theme_switcher = document.getElementById("theme-switcher");
|
|
const imgs = document.getElementsByTagName("img");
|
|
const sections_button = document.getElementById("sections-button");
|
|
const sections_menu = document.getElementById("sections-menu");
|
|
const main = document.getElementById("main");
|
|
|
|
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");
|
|
}
|
|
}
|
|
|
|
function closeMenu() {
|
|
sections_button.setAttribute("opened", "false");
|
|
sections_button.children[0].src = sections_button.children[0].src.replace(
|
|
"opened",
|
|
"closed",
|
|
);
|
|
sections_menu.style.display = "none";
|
|
}
|
|
|
|
function openMenu() {
|
|
sections_button.setAttribute("opened", "true");
|
|
sections_button.children[0].src = sections_button.children[0].src.replace(
|
|
"closed",
|
|
"opened",
|
|
);
|
|
sections_menu.style.display = "flex";
|
|
sections_menu.style.flexDirection = "column";
|
|
}
|
|
|
|
sections_button.addEventListener("click", () => {
|
|
if (sections_button.getAttribute("opened") === "false") {
|
|
openMenu();
|
|
} else {
|
|
closeMenu();
|
|
}
|
|
});
|
|
|
|
window.addEventListener("resize", () => {
|
|
if (sections_button.getAttribute("opened") === "true") {
|
|
closeMenu();
|
|
}
|
|
});
|
|
|
|
main.addEventListener("click", (event) => {
|
|
if (sections_button.getAttribute("opened") === "true") {
|
|
closeMenu();
|
|
}
|
|
});
|
|
|
|
DEBUG;
|
|
console.log(window.innerWidth);
|
|
console.log(window.innerHeight);
|