badblocks/pkmntrade.club
1
1
Fork 0
Code Issues 14 Pull requests Projects 1 Releases Packages Wiki Activity

Allow theme button to toggle between 3 themes: system (prefers-dark-theme), dark, light

Browse source
This commit is contained in:
badblocks 2025-03-27 23:16:10 -07:00
parent b9c4d7a61d
commit 2cb35e853d
2 changed files with 25 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

21
static/js/base.js
View file

@ -13,18 +13,27 @@ const $$ = selector => Array.from(document.querySelector(selector));
function initThemeToggle() {
const themeToggleButton = document.getElementById("theme-toggle-btn");
if (!themeToggleButton) return;
themeToggleButton.classList.toggle("btn-ghost", !("theme" in localStorage));
themeToggleButton.addEventListener("click", () => {
const documentRoot = document.documentElement;
const isSystemTheme = themeToggleButton.classList.contains("btn-ghost");
const isDarkTheme = documentRoot.classList.contains("dark");
const newTheme = isDarkTheme ? "light" : "dark";
const newTheme = isSystemTheme ? "dark" : (isDarkTheme ? "light" : "system");
if (newTheme === "light") {
documentRoot.classList.remove("dark");
if (newTheme === "system") {
documentRoot.classList.toggle("dark", window.matchMedia("(prefers-color-scheme: dark)").matches);
documentRoot.setAttribute("data-theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
localStorage.removeItem("theme");
} else {
documentRoot.classList.add("dark");
if (newTheme === "light") {
documentRoot.classList.remove("dark");
} else if (newTheme === "dark") {
documentRoot.classList.add("dark");
}
documentRoot.setAttribute("data-theme", newTheme);
localStorage.setItem("theme", newTheme);
}
documentRoot.setAttribute("data-theme", newTheme);
localStorage.setItem("theme", newTheme);
themeToggleButton.classList.toggle("btn-ghost", newTheme === "system");
});
}