quartz-community/darkmode
1
0
Fork 0
mirror of https://github.com/quartz-community/darkmode.git synced 2026-07-22 02:50:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: sync body.theme-dark/body.theme-light class with saved-theme attribute

Browse source
This commit is contained in:
saberzero1 2026-04-25 22:56:57 +02:00
parent 2bab9c157f
commit ef4d8fa3e1
No known key found for this signature in database
5 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/components/index.js vendored
View file

@ -343,7 +343,7 @@ function i18n(locale) {
}
// src/components/scripts/darkmode.inline.ts
var darkmode_inline_default = 'var c=window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark",s=localStorage.getItem("theme")??c;document.documentElement.setAttribute("saved-theme",s);var o=t=>{let n=new CustomEvent("themechange",{detail:{theme:t}});document.dispatchEvent(n)},a=()=>{let t=()=>{let e=document.documentElement.getAttribute("saved-theme")==="dark"?"light":"dark";document.documentElement.setAttribute("saved-theme",e),localStorage.setItem("theme",e),o(e)},n=e=>{let m=e.matches?"dark":"light";document.documentElement.setAttribute("saved-theme",m),localStorage.setItem("theme",m),o(m)};for(let e of document.getElementsByClassName("darkmode"))e.addEventListener("click",t),window.addCleanup(()=>e.removeEventListener("click",t));let d=window.matchMedia("(prefers-color-scheme: dark)");d.addEventListener("change",n),window.addCleanup(()=>d.removeEventListener("change",n))};document.addEventListener("nav",a);document.addEventListener("render",a);\n';
var darkmode_inline_default = 'var r=window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark",h=localStorage.getItem("theme")??r;document.documentElement.setAttribute("saved-theme",h);var m=t=>{document.body?.classList.remove("theme-dark","theme-light"),document.body?.classList.add(`theme-${t}`)},c=t=>{let n=new CustomEvent("themechange",{detail:{theme:t}});document.dispatchEvent(n)},s=()=>{let t=document.documentElement.getAttribute("saved-theme")??"light";m(t);let n=()=>{let e=document.documentElement.getAttribute("saved-theme")==="dark"?"light":"dark";document.documentElement.setAttribute("saved-theme",e),localStorage.setItem("theme",e),m(e),c(e)},o=e=>{let d=e.matches?"dark":"light";document.documentElement.setAttribute("saved-theme",d),localStorage.setItem("theme",d),m(d),c(d)};for(let e of document.getElementsByClassName("darkmode"))e.addEventListener("click",n),window.addCleanup(()=>e.removeEventListener("click",n));let a=window.matchMedia("(prefers-color-scheme: dark)");a.addEventListener("change",o),window.addCleanup(()=>a.removeEventListener("change",o))};document.addEventListener("nav",s);document.addEventListener("render",s);\n';
// src/components/styles/darkmode.scss
var darkmode_default = ".darkmode {\n cursor: pointer;\n padding: 0;\n position: relative;\n background: none;\n border: none;\n width: 20px;\n height: 32px;\n margin: 0;\n text-align: inherit;\n flex-shrink: 0;\n}\n.darkmode svg {\n position: absolute;\n width: 20px;\n height: 20px;\n top: calc(50% - 10px);\n fill: var(--darkgray);\n transition: opacity 0.1s ease;\n}\n\n:root[saved-theme=dark] {\n color-scheme: dark;\n}\n\n:root[saved-theme=light] {\n color-scheme: light;\n}\n\n:root[saved-theme=dark] .darkmode > .dayIcon {\n display: none;\n}\n:root[saved-theme=dark] .darkmode > .nightIcon {\n display: inline;\n}\n\n:root .darkmode > .dayIcon {\n display: inline;\n}\n:root .darkmode > .nightIcon {\n display: none;\n}";

2
dist/components/index.js.map vendored
View file

File diff suppressed because one or more lines are too long

2
dist/index.js vendored
View file

@ -343,7 +343,7 @@ function i18n(locale) {
}
// src/components/scripts/darkmode.inline.ts
var darkmode_inline_default = 'var c=window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark",s=localStorage.getItem("theme")??c;document.documentElement.setAttribute("saved-theme",s);var o=t=>{let n=new CustomEvent("themechange",{detail:{theme:t}});document.dispatchEvent(n)},a=()=>{let t=()=>{let e=document.documentElement.getAttribute("saved-theme")==="dark"?"light":"dark";document.documentElement.setAttribute("saved-theme",e),localStorage.setItem("theme",e),o(e)},n=e=>{let m=e.matches?"dark":"light";document.documentElement.setAttribute("saved-theme",m),localStorage.setItem("theme",m),o(m)};for(let e of document.getElementsByClassName("darkmode"))e.addEventListener("click",t),window.addCleanup(()=>e.removeEventListener("click",t));let d=window.matchMedia("(prefers-color-scheme: dark)");d.addEventListener("change",n),window.addCleanup(()=>d.removeEventListener("change",n))};document.addEventListener("nav",a);document.addEventListener("render",a);\n';
var darkmode_inline_default = 'var r=window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark",h=localStorage.getItem("theme")??r;document.documentElement.setAttribute("saved-theme",h);var m=t=>{document.body?.classList.remove("theme-dark","theme-light"),document.body?.classList.add(`theme-${t}`)},c=t=>{let n=new CustomEvent("themechange",{detail:{theme:t}});document.dispatchEvent(n)},s=()=>{let t=document.documentElement.getAttribute("saved-theme")??"light";m(t);let n=()=>{let e=document.documentElement.getAttribute("saved-theme")==="dark"?"light":"dark";document.documentElement.setAttribute("saved-theme",e),localStorage.setItem("theme",e),m(e),c(e)},o=e=>{let d=e.matches?"dark":"light";document.documentElement.setAttribute("saved-theme",d),localStorage.setItem("theme",d),m(d),c(d)};for(let e of document.getElementsByClassName("darkmode"))e.addEventListener("click",n),window.addCleanup(()=>e.removeEventListener("click",n));let a=window.matchMedia("(prefers-color-scheme: dark)");a.addEventListener("change",o),window.addCleanup(()=>a.removeEventListener("change",o))};document.addEventListener("nav",s);document.addEventListener("render",s);\n';
// src/components/styles/darkmode.scss
var darkmode_default = ".darkmode {\n cursor: pointer;\n padding: 0;\n position: relative;\n background: none;\n border: none;\n width: 20px;\n height: 32px;\n margin: 0;\n text-align: inherit;\n flex-shrink: 0;\n}\n.darkmode svg {\n position: absolute;\n width: 20px;\n height: 20px;\n top: calc(50% - 10px);\n fill: var(--darkgray);\n transition: opacity 0.1s ease;\n}\n\n:root[saved-theme=dark] {\n color-scheme: dark;\n}\n\n:root[saved-theme=light] {\n color-scheme: light;\n}\n\n:root[saved-theme=dark] .darkmode > .dayIcon {\n display: none;\n}\n:root[saved-theme=dark] .darkmode > .nightIcon {\n display: inline;\n}\n\n:root .darkmode > .dayIcon {\n display: inline;\n}\n:root .darkmode > .nightIcon {\n display: none;\n}";

2
dist/index.js.map vendored
View file

File diff suppressed because one or more lines are too long

12
src/components/scripts/darkmode.inline.ts
View file

@ -2,6 +2,11 @@ const userPref = window.matchMedia("(prefers-color-scheme: light)").matches ? "l
const currentTheme = localStorage.getItem("theme") ?? userPref;
document.documentElement.setAttribute("saved-theme", currentTheme);
const syncBodyThemeClass = (theme: "light" | "dark") => {
document.body?.classList.remove("theme-dark", "theme-light");
document.body?.classList.add(`theme-${theme}`);
};
const emitThemeChangeEvent = (theme: "light" | "dark") => {
const event: CustomEventMap["themechange"] = new CustomEvent("themechange", {
detail: { theme },
@ -10,11 +15,17 @@ const emitThemeChangeEvent = (theme: "light" | "dark") => {
};
const setupDarkmode = () => {
// Sync body class with current theme on setup (runs after DOM is ready)
const currentSavedTheme =
(document.documentElement.getAttribute("saved-theme") as "light" | "dark") ?? "light";
syncBodyThemeClass(currentSavedTheme);
const switchTheme = () => {
const newTheme =
document.documentElement.getAttribute("saved-theme") === "dark" ? "light" : "dark";
document.documentElement.setAttribute("saved-theme", newTheme);
localStorage.setItem("theme", newTheme);
syncBodyThemeClass(newTheme);
emitThemeChangeEvent(newTheme);
};
@ -22,6 +33,7 @@ const setupDarkmode = () => {
const newTheme = e.matches ? "dark" : "light";
document.documentElement.setAttribute("saved-theme", newTheme);
localStorage.setItem("theme", newTheme);
syncBodyThemeClass(newTheme);
emitThemeChangeEvent(newTheme);
};