mirror of
https://github.com/LukeHagar/unicorn-utterances.git
synced 2025-12-06 04:21:55 +00:00
30 lines
1.0 KiB
JavaScript
30 lines
1.0 KiB
JavaScript
/* AFTER CHANGING THIS FILE, PLEASE MANUALLY MINIFY IT AND PUT INTO tabs.min.js */
|
|
const COLOR_MODE_STORAGE_KEY = "currentTheme";
|
|
|
|
const themeToggleBtn = document.querySelector("#theme-toggle-button");
|
|
const darkIconEl = document.querySelector("#dark-icon");
|
|
const lightIconEl = document.querySelector("#light-icon");
|
|
function toggleButton(theme) {
|
|
themeToggleBtn.ariaPressed = `${theme === "dark"}`;
|
|
if (theme === "light") {
|
|
lightIconEl.style.display = null;
|
|
darkIconEl.style.display = "none";
|
|
} else {
|
|
lightIconEl.style.display = "none";
|
|
darkIconEl.style.display = null;
|
|
}
|
|
}
|
|
|
|
// TODO: Migrate to `classList`
|
|
const initialTheme = document.documentElement.className;
|
|
toggleButton(initialTheme);
|
|
themeToggleBtn.addEventListener("click", () => {
|
|
const currentTheme = document.documentElement.className;
|
|
document.documentElement.className =
|
|
currentTheme === "light" ? "dark" : "light";
|
|
// TODO: Persist new setting
|
|
const newTheme = document.documentElement.className;
|
|
toggleButton(newTheme);
|
|
localStorage.setItem(COLOR_MODE_STORAGE_KEY, newTheme);
|
|
});
|