mirror of
https://github.com/alrayyes/wiki.git
synced 2024-11-24 12:36:23 +00:00
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:
parent
1ce12fc1fc
commit
0a76707062
3 changed files with 22 additions and 7 deletions
|
@ -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
1
index.d.ts
vendored
|
@ -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>
|
||||||
|
|
|
@ -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)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in a new issue