63 lines
2.2 KiB
JavaScript
63 lines
2.2 KiB
JavaScript
window.addEventListener("DOMContentLoaded", () => {
|
|
|
|
const getById = (id) => document.getElementById(id);
|
|
const getByClass = (className) => document.getElementsByClassName(className)[0];
|
|
|
|
const themeBtn = getById("theme-switcher");
|
|
const hamburger = getByClass("hamburger");
|
|
const hamburgerIcon = hamburger.children[0]
|
|
const menu = document.getElementsByTagName("nav")[0];
|
|
const imgs = document.getElementsByTagName("img");
|
|
const main = document.getElementsByTagName("main")[0];
|
|
const isMenuOpen = () => hamburger.classList.contains("open");
|
|
const theme = window.localStorage.getItem("theme");
|
|
|
|
/* Functions */
|
|
|
|
const changeToDarkTheme = () => {
|
|
document.documentElement.classList.add("dark");
|
|
themeBtn?.setAttribute("title", "turn the light on");
|
|
Array.from(imgs).forEach((img) => {
|
|
if (img.src.includes("-light")) img.src = img.src.replace("-light", "-dark");
|
|
});
|
|
}
|
|
|
|
const changeToLightTheme = () => {
|
|
document.documentElement.classList.remove("dark");
|
|
themeBtn?.setAttribute("title", "turn the light off");
|
|
Array.from(imgs).forEach((img) => {
|
|
if (img.src.includes("-dark")) img.src = img.src.replace("-dark", "-light");
|
|
});
|
|
}
|
|
|
|
const closeMenu = () => {
|
|
hamburger.classList = "hamburger closed"
|
|
hamburgerIcon.src = hamburgerIcon.src.replace("opened", "closed");
|
|
menu.classList = "menu closed";
|
|
}
|
|
|
|
const openMenu = () => {
|
|
hamburger.classList = "hamburger open"
|
|
hamburgerIcon.src = hamburgerIcon.src.replace("closed", "opened");
|
|
menu.classList = "menu open";
|
|
}
|
|
|
|
/* Listeners */
|
|
|
|
window.addEventListener("resize", () => isMenuOpen() && closeMenu());
|
|
main.addEventListener("click", () => isMenuOpen() && closeMenu());
|
|
hamburger?.addEventListener("click", () => isMenuOpen() ? closeMenu() : openMenu());
|
|
|
|
themeBtn.addEventListener("click", () => {
|
|
const title = themeBtn.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();
|
|
})
|