feat: complete dark mode
This commit is contained in:
parent
073cc8275b
commit
7bf892207a
@ -11,7 +11,11 @@ document.addEventListener("htmx:afterSwap", () => {
|
||||
});
|
||||
|
||||
const getCurrentTheme = () => {
|
||||
let current = document.documentElement.getAttribute("data-theme");
|
||||
let current = localStorage.getItem("theme");
|
||||
|
||||
if (current == null) {
|
||||
current = document.documentElement.getAttribute("data-theme");
|
||||
}
|
||||
|
||||
if (current === null) {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
@ -29,8 +33,25 @@ const switchTheme = () => {
|
||||
|
||||
document.documentElement.setAttribute("data-theme", isCurrentlyLight ? "dark" : "light");
|
||||
document.querySelector("#theme-switcher use").setAttribute("href", `/static/feather-sprite.svg#${isCurrentlyLight ? "sun" : "moon"}`)
|
||||
localStorage.setItem("theme", isCurrentlyLight ? "dark" : "light");
|
||||
}
|
||||
|
||||
const observer = new MutationObserver((mutationList, observer) => {
|
||||
for (const mut of mutationList) {
|
||||
for (const node of mut.addedNodes) {
|
||||
if (node.className?.includes("navbar")) {
|
||||
console.log("found");
|
||||
document.getElementById("theme-switcher")?.addEventListener("click", switchTheme);
|
||||
|
||||
document.querySelector("#theme-switcher use")?.setAttribute("href", `/static/feather-sprite.svg#${getCurrentTheme() === "light" ? "moon" : "sun"}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(document, { childList: true, subtree: true });
|
||||
|
||||
|
||||
const isCurrentlyLight = getCurrentTheme() === "light";
|
||||
document.documentElement.setAttribute("data-theme", isCurrentlyLight ? "light" : "dark");
|
||||
document.querySelector("#theme-switcher use")?.setAttribute("href", `/static/feather-sprite.svg#${isCurrentlyLight ? "moon" : "sun"}`)
|
||||
document.getElementById("theme-switcher")?.addEventListener("click", switchTheme);
|
||||
|
Loading…
x
Reference in New Issue
Block a user