65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
var storageKey = "hamkar-theme";
|
|
var root = document.documentElement;
|
|
|
|
function storedTheme() {
|
|
try {
|
|
return localStorage.getItem(storageKey);
|
|
} catch (_) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function preferredTheme() {
|
|
var saved = storedTheme();
|
|
if (saved === "light" || saved === "dark") {
|
|
return saved;
|
|
}
|
|
return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light";
|
|
}
|
|
|
|
function updateButtons(theme) {
|
|
document.querySelectorAll("[data-theme-toggle]").forEach(function (button) {
|
|
var dark = theme === "dark";
|
|
button.setAttribute("aria-pressed", String(dark));
|
|
button.setAttribute("aria-label", dark ? "Switch to light mode" : "Switch to dark mode");
|
|
});
|
|
}
|
|
|
|
function applyTheme(theme, persist) {
|
|
root.dataset.theme = theme;
|
|
root.style.colorScheme = theme;
|
|
updateButtons(theme);
|
|
if (persist) {
|
|
try {
|
|
localStorage.setItem(storageKey, theme);
|
|
} catch (_) {
|
|
// The theme still applies when storage is unavailable.
|
|
}
|
|
}
|
|
}
|
|
|
|
applyTheme(preferredTheme(), false);
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
updateButtons(root.dataset.theme);
|
|
document.querySelectorAll("[data-theme-toggle]").forEach(function (button) {
|
|
button.addEventListener("click", function () {
|
|
applyTheme(root.dataset.theme === "dark" ? "light" : "dark", true);
|
|
});
|
|
});
|
|
});
|
|
|
|
if (window.matchMedia) {
|
|
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function (event) {
|
|
if (!storedTheme()) {
|
|
applyTheme(event.matches ? "dark" : "light", false);
|
|
}
|
|
});
|
|
}
|
|
})();
|