congo/assets/js/appearance.js

52 lines
1.7 KiB
JavaScript

const sitePreference = document.documentElement.getAttribute("data-default-appearance");
const userPreference = localStorage.getItem("appearance");
function setThemeColor() {
const metaThemeColor = document.querySelector("meta[name=theme-color]");
document.documentElement.classList.contains("dark")
? metaThemeColor.setAttribute("content", "#27272a")
: metaThemeColor.setAttribute("content", "#ffffff");
}
if ((sitePreference === "dark" && userPreference === null) || userPreference === "dark") {
document.documentElement.classList.add("dark");
setThemeColor();
}
if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
if (
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches &&
userPreference !== "light"
) {
document.documentElement.classList.add("dark");
setThemeColor();
}
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
if (event.matches) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
setThemeColor();
});
}
window.addEventListener("DOMContentLoaded", (event) => {
const switcher = document.getElementById("appearance-switcher");
if (switcher) {
switcher.addEventListener("click", () => {
document.documentElement.classList.toggle("dark");
setThemeColor();
localStorage.setItem(
"appearance",
document.documentElement.classList.contains("dark") ? "dark" : "light"
);
});
switcher.addEventListener("contextmenu", (event) => {
event.preventDefault();
localStorage.removeItem("appearance");
});
}
});