44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
// from radu-matei.com
|
|
|
|
updateTheme();
|
|
|
|
// set the appropriate theme when the user toggles the button
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
var toggle = document.getElementById("dark-mode-toggle");
|
|
toggle.addEventListener("click", () => {
|
|
if (document.documentElement.getAttribute("data-theme") == "dark")
|
|
localStorage["dark-mode-storage"] = "light";
|
|
else
|
|
localStorage["dark-mode-storage"] = "dark";
|
|
updateTheme();
|
|
});
|
|
}, {once: true});
|
|
|
|
// Add an event listener when the browser theme changes.
|
|
// The user defined theme does take precedence, so if the
|
|
// changed the browser theme, forget previous preference.
|
|
window
|
|
.matchMedia("(prefers-color-scheme: dark)")
|
|
.addEventListener("change", () => {
|
|
delete localStorage["dark-mode-storage"];
|
|
updateTheme();
|
|
});
|
|
|
|
// React to theme changes in other tabs
|
|
window.addEventListener("storage", event => {
|
|
if (event.key == "dark-mode-storage")
|
|
updateTheme();
|
|
});
|
|
|
|
function updateTheme() {
|
|
let userPreference = localStorage["dark-mode-storage"];
|
|
if (userPreference == "dark" || userPreference == "light")
|
|
setTheme(userPreference);
|
|
else
|
|
setTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
|
|
}
|
|
|
|
function setTheme(mode) {
|
|
document.documentElement.setAttribute("data-theme", mode);
|
|
}
|