42 lines
1.4 KiB
JavaScript
42 lines
1.4 KiB
JavaScript
// Stolen code from https://dev.to/mdhassanpatwary/creating-a-css-darklight-mode-switcher-26cd
|
|
function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
|
|
if (localStorageTheme !== null) {
|
|
return localStorageTheme;
|
|
}
|
|
|
|
if (systemSettingDark.matches) {
|
|
return "dark";
|
|
}
|
|
|
|
return "light";
|
|
}
|
|
|
|
function updateThemeButton({ buttonEl, isDark }) {
|
|
const newCta = isDark ? "toggle light" : "toggle dark";
|
|
buttonEl.setAttribute("aria-label", newCta);
|
|
buttonEl.innerText = newCta;
|
|
}
|
|
|
|
function updateThemeOnHtmlEl({ theme }) {
|
|
document.querySelector("html").setAttribute("data-theme", theme);
|
|
}
|
|
|
|
|
|
const themeToggleButton = document.querySelector("[data-theme-toggle]");
|
|
const localStorageTheme = localStorage.getItem("theme");
|
|
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
|
|
|
|
let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
|
|
|
|
updateThemeButton({ buttonEl: themeToggleButton, isDark: currentThemeSetting === "dark" });
|
|
updateThemeOnHtmlEl({ theme: currentThemeSetting });
|
|
|
|
themeToggleButton.addEventListener("click", () => {
|
|
const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
|
|
|
|
localStorage.setItem("theme", newTheme);
|
|
updateThemeButton({ buttonEl: themeToggleButton, isDark: newTheme === "dark" });
|
|
updateThemeOnHtmlEl({ theme: newTheme });
|
|
|
|
currentThemeSetting = newTheme;
|
|
});
|