feat: Emit custom event when theme changes (#723)

* Emit custom event when theme changes

* Type themechange custom event

* Update darkmode docs
This commit is contained in:
kabirgh 2024-01-23 22:52:41 +00:00 committed by GitHub
parent 1ce12fc1fc
commit 0a76707062
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 22 additions and 7 deletions

View file

@ -12,3 +12,12 @@ Quartz supports darkmode out of the box that respects the user's theme preferenc
- Component: `quartz/components/Darkmode.tsx` - Component: `quartz/components/Darkmode.tsx`
- Style: `quartz/components/styles/darkmode.scss` - Style: `quartz/components/styles/darkmode.scss`
- Script: `quartz/components/scripts/darkmode.inline.ts` - Script: `quartz/components/scripts/darkmode.inline.ts`
You can also listen to the `themechange` event to perform any custom logic when the theme changes.
```js
document.addEventListener("themechange", (e) => {
console.log("Theme changed to " + e.detail.theme) // either "light" or "dark"
// your logic here
})
```

1
index.d.ts vendored
View file

@ -6,6 +6,7 @@ declare module "*.scss" {
// dom custom event // dom custom event
interface CustomEventMap { interface CustomEventMap {
nav: CustomEvent<{ url: FullSlug }> nav: CustomEvent<{ url: FullSlug }>
themechange: CustomEvent<{ theme: "light" | "dark" }>
} }
declare const fetchData: Promise<ContentIndex> declare const fetchData: Promise<ContentIndex>

View file

@ -2,15 +2,19 @@ const userPref = window.matchMedia("(prefers-color-scheme: light)").matches ? "l
const currentTheme = localStorage.getItem("theme") ?? userPref const currentTheme = localStorage.getItem("theme") ?? userPref
document.documentElement.setAttribute("saved-theme", currentTheme) document.documentElement.setAttribute("saved-theme", currentTheme)
const emitThemeChangeEvent = (theme: "light" | "dark") => {
const event: CustomEventMap["themechange"] = new CustomEvent("themechange", {
detail: { theme },
})
document.dispatchEvent(event)
}
document.addEventListener("nav", () => { document.addEventListener("nav", () => {
const switchTheme = (e: any) => { const switchTheme = (e: any) => {
if (e.target.checked) { const newTheme = e.target.checked ? "dark" : "light"
document.documentElement.setAttribute("saved-theme", "dark") document.documentElement.setAttribute("saved-theme", newTheme)
localStorage.setItem("theme", "dark") localStorage.setItem("theme", newTheme)
} else { emitThemeChangeEvent(newTheme)
document.documentElement.setAttribute("saved-theme", "light")
localStorage.setItem("theme", "light")
}
} }
// Darkmode toggle // Darkmode toggle
@ -28,5 +32,6 @@ document.addEventListener("nav", () => {
document.documentElement.setAttribute("saved-theme", newTheme) document.documentElement.setAttribute("saved-theme", newTheme)
localStorage.setItem("theme", newTheme) localStorage.setItem("theme", newTheme)
toggleSwitch.checked = e.matches toggleSwitch.checked = e.matches
emitThemeChangeEvent(newTheme)
}) })
}) })