hugo-relie/themes/hello-friend-ng/assets/js/main.js

58 lines
1.7 KiB
JavaScript
Raw Permalink Normal View History

2023-06-19 11:40:17 +00:00
/**
* Theming.
*
* Supports the preferred color scheme of the operation system as well as
* the theme choice of the user.
*
*/
const themeToggle = document.querySelector(".theme-toggle");
const chosenTheme = window.localStorage && window.localStorage.getItem("theme");
const chosenThemeIsDark = chosenTheme == "dark";
const chosenThemeIsLight = chosenTheme == "light";
// Detect the color scheme the operating system prefers.
function detectOSColorTheme() {
if (chosenThemeIsDark) {
document.documentElement.setAttribute("data-theme", "dark");
} else if (chosenThemeIsLight) {
document.documentElement.setAttribute("data-theme", "light");
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.setAttribute("data-theme", "dark");
} else {
document.documentElement.setAttribute("data-theme", "light");
}
}
// Switch the theme.
function switchTheme(e) {
if (chosenThemeIsDark) {
localStorage.setItem("theme", "light");
} else if (chosenThemeIsLight) {
localStorage.setItem("theme", "dark");
} else {
if (document.documentElement.getAttribute("data-theme") == "dark") {
localStorage.setItem("theme", "light");
} else {
localStorage.setItem("theme", "dark");
}
}
detectOSColorTheme();
window.location.reload();
}
// Event listener
if (themeToggle) {
themeToggle.addEventListener("click", switchTheme, false);
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (e) => e.matches && detectOSColorTheme());
window
.matchMedia("(prefers-color-scheme: light)")
.addEventListener("change", (e) => e.matches && detectOSColorTheme());
detectOSColorTheme();
} else {
localStorage.removeItem("theme");
}