42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
const themeToggle = document.getElementById("theme");
|
|
let userPreference = getUserPreference();
|
|
|
|
setAppliedMode(getAppliedMode(userPreference));
|
|
|
|
themeToggle.addEventListener("click", togglePreference, false)
|
|
|
|
function getUserPreference() {
|
|
return localStorage.getItem("theme") || "light";
|
|
}
|
|
|
|
function saveUserPreference(userPreference) {
|
|
localStorage.setItem("theme", userPreference);
|
|
}
|
|
|
|
function getAppliedMode(userPreference) {
|
|
if (userPreference === "light") {
|
|
return "light";
|
|
}
|
|
if (userPreference === "dark") {
|
|
return "dark";
|
|
}
|
|
if (matchMedia("(prefers-color-scheme: light)").matches) {
|
|
return "light";
|
|
}
|
|
return "dark";
|
|
}
|
|
|
|
function setAppliedMode(mode) {
|
|
document.documentElement.dataset.appliedMode = mode;
|
|
themeToggle.checked = getAppliedMode(userPreference) === "dark";
|
|
}
|
|
|
|
function togglePreference() {
|
|
if (userPreference === "light") {
|
|
userPreference = "dark";
|
|
} else if (userPreference === "dark") {
|
|
userPreference = "light";
|
|
}
|
|
saveUserPreference(userPreference);
|
|
setAppliedMode(getAppliedMode(userPreference));
|
|
} |