Schwarztee/brass
1
0
Fork 0
Code Issues 19 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: complete dark mode

Browse Source
This commit is contained in:
Max Hohlfeld 2024-12-02 16:18:54 +01:00
parent 073cc8275b
commit 7bf892207a
1 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
static/utils.js
View File

@ -11,7 +11,11 @@ document.addEventListener("htmx:afterSwap", () => {
}); });
const getCurrentTheme = () => { 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 (current === null) {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { 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.documentElement.setAttribute("data-theme", isCurrentlyLight ? "dark" : "light");
document.querySelector("#theme-switcher use").setAttribute("href", `/static/feather-sprite.svg#${isCurrentlyLight ? "sun" : "moon"}`) document.querySelector("#theme-switcher use").setAttribute("href", `/static/feather-sprite.svg#${isCurrentlyLight ? "sun" : "moon"}`)
localStorage.setItem("theme", isCurrentlyLight ? "dark" : "light");
} }
document.getElementById("theme-switcher")?.addEventListener("click", switchTheme); 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"}`)
}
}
}
});
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);