alrayyes/wiki
1
0
Fork 0
mirror of https://github.com/alrayyes/wiki.git synced 2025-05-01 06:28:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Emit custom event when theme changes ()

Browse source 
* 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
quartz/components/scripts
darkmode.inline.ts

19
quartz/components/scripts/darkmode.inline.ts
View file

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