80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
|
|
function setTheme(mode) {
|
|
if (mode !== "light" && mode !== "dark" && mode !== "auto") {
|
|
mode = "auto";
|
|
}
|
|
|
|
var themeToggleAutoIcon = document.getElementById('theme-icon-when-auto');
|
|
var themeToggleDarkIcon = document.getElementById('theme-icon-when-dark');
|
|
var themeToggleLightIcon = document.getElementById('theme-icon-when-light');
|
|
|
|
themeToggleAutoIcon.classList.add('hidden');
|
|
themeToggleDarkIcon.classList.add('hidden');
|
|
themeToggleLightIcon.classList.add('hidden');
|
|
|
|
if (mode === "dark") {
|
|
themeToggleDarkIcon.classList.remove('hidden');
|
|
document.documentElement.classList.add('dark');
|
|
} else if (mode === "auto") {
|
|
themeToggleAutoIcon.classList.remove('hidden');
|
|
|
|
if(prefersDark) {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
themeToggleLightIcon.classList.remove('hidden');
|
|
}
|
|
|
|
localStorage.setItem('color-theme', mode);
|
|
}
|
|
|
|
function cycleTheme() {
|
|
const currentTheme = localStorage.getItem('color-theme') || "auto";
|
|
|
|
if (prefersDark) {
|
|
// Auto (dark) -> Light -> Dark
|
|
if (currentTheme === "auto") {
|
|
setTheme("light");
|
|
} else if (currentTheme === "light") {
|
|
setTheme("dark");
|
|
} else {
|
|
setTheme("auto");
|
|
}
|
|
} else {
|
|
// Auto (light) -> Dark -> Light
|
|
if (currentTheme === "auto") {
|
|
setTheme("dark");
|
|
} else if (currentTheme === "dark") {
|
|
setTheme("light");
|
|
} else {
|
|
setTheme("auto");
|
|
}
|
|
}
|
|
}
|
|
|
|
function initTheme() {
|
|
// set theme defined in localStorage if there is one, or fallback to auto mode
|
|
const currentTheme = localStorage.getItem('color-theme');
|
|
currentTheme ? setTheme(currentTheme) : setTheme("auto");
|
|
}
|
|
|
|
function setupTheme() {
|
|
// Attach event handlers for toggling themes
|
|
let buttons = document.getElementsByClassName("theme-toggle");
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
buttons[i].addEventListener("click", cycleTheme);
|
|
};
|
|
}
|
|
|
|
|
|
initTheme();
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
setupTheme();
|
|
})
|