68 lines
2.4 KiB
JavaScript
68 lines
2.4 KiB
JavaScript
const getById = (id) => document.getElementById(id);
|
|
const docStyle = document.documentElement.style;
|
|
|
|
const theme_switcher = getById("theme-switcher");
|
|
const sections_button = getById("sections-button");
|
|
const imgs = document.getElementsByTagName("img");
|
|
const sections_menu = document.getElementsByTagName("nav")[0];
|
|
const main = document.getElementsByTagName("main")[0];
|
|
const isMenuOpen = sections_button.getAttribute("opened") === "true"
|
|
const theme = window.localStorage.getItem("theme");
|
|
const menuSrc = sections_button.children[0].src
|
|
|
|
/* Functions */
|
|
|
|
function changeToDarkTheme() {
|
|
theme_switcher?.setAttribute("title", "turn the light on");
|
|
docStyle.setProperty("--border", "var(--dark-border)");
|
|
docStyle.setProperty("--text", "var(--dark-text)");
|
|
docStyle.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?.setAttribute("title", "turn the light off");
|
|
docStyle.setProperty("--border", "var(--light-border)");
|
|
docStyle.setProperty("--text", "var(--light-text)");
|
|
docStyle.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");
|
|
const menuSrc = sections_button.children[0].src
|
|
menuSrc.src = menuSrc.replace("opened", "closed");
|
|
sections_menu.style.display = "none";
|
|
}
|
|
|
|
function openMenu() {
|
|
sections_button.setAttribute("opened", "true");
|
|
menuSrc = menuSrc.replace("closed", "opened");
|
|
sections_menu.style.display = "flex";
|
|
sections_menu.style.flexDirection = "column";
|
|
}
|
|
|
|
/* Listeners */
|
|
|
|
sections_button.addEventListener("click", () => isMenuOpen ? closeMenu() : openMenu());
|
|
window.addEventListener("resize", () => isMenuOpen && closeMenu());
|
|
main.addEventListener("click", () => isMenuOpen && closeMenu());
|
|
|
|
theme_switcher.addEventListener("click", () => {
|
|
const title = theme_switcher.getAttribute("title") ?? "off"
|
|
if (title.indexOf("off") !== -1) changeToDarkTheme();
|
|
else changeToLightTheme();
|
|
});
|
|
|
|
/* Rest */
|
|
|
|
const userPerfersDark = window?.matchMedia?.("(prefers-color-scheme: dark)").matches
|
|
if (!theme && userPerfersDark) changeToDarkTheme();
|
|
else theme === "light" ? changeToLightTheme() : changeToDarkTheme();
|