const STORAGE_KEY = “theme”; const THEME_ATTR = “data-theme”; const QUERY_KEY = “(prefers-color-scheme: dark)”;
const themes = {
LIGHT: "light", DARK: "dark",
};
initTheme();
function initTheme() {
const savedTheme = localStorage.getItem(STORAGE_KEY); if (savedTheme) { // Storage theme setTheme(savedTheme); } else if (window.matchMedia && window.matchMedia(QUERY_KEY).matches) { // system theme setTheme(themes.DARK); } else { // Default theme setTheme(themes.LIGHT); } // Watch for system theme changes window.matchMedia(QUERY_KEY).addEventListener("change", (e) => { const newTheme = e.matches ? themes.DARK : themes.LIGHT; setTheme(newTheme); });
}
function toggleTheme() {
const theme = getTheme(); const newTheme = theme === themes.DARK ? themes.LIGHT : themes.DARK; setTheme(newTheme); localStorage.setItem(STORAGE_KEY, newTheme);
}
function getTheme() {
return document.documentElement.getAttribute(THEME_ATTR);
}
function setTheme(value) {
document.documentElement.setAttribute(THEME_ATTR, value);
}