28 lines
676 B
JavaScript
28 lines
676 B
JavaScript
|
const THEMES = {
|
||
|
|
DARK: "DARK",
|
||
|
|
LIGHT: "LIGHT",
|
||
|
|
};
|
||
|
|
|
||
|
|
const flipFlopTheme = (theme) =>
|
||
|
|
THEMES[theme] === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK;
|
||
|
|
|
||
|
|
const themePickerText = {
|
||
|
|
DARK: "light mode.",
|
||
|
|
LIGHT: "dark mode.",
|
||
|
|
};
|
||
|
|
|
||
|
|
const themeSwitcher = document.getElementById("theme-switcher");
|
||
|
|
|
||
|
|
const setTheme = (theme) => {
|
||
|
|
themeSwitcher.textContent = `${themePickerText[theme]}`;
|
||
|
|
|
||
|
|
document.documentElement.setAttribute("data-theme", theme);
|
||
|
|
localStorage.setItem("theme", theme);
|
||
|
|
};
|
||
|
|
|
||
|
|
themeSwitcher.addEventListener("click", () =>
|
||
|
|
setTheme(flipFlopTheme(document.documentElement.getAttribute("data-theme"))),
|
||
|
|
);
|
||
|
|
|
||
|
|
setTheme(localStorage.getItem("theme") ?? THEMES.LIGHT);
|