From 0a76707062b366af4c6b5e85afb5fcdef6a8196a Mon Sep 17 00:00:00 2001
From: kabirgh <15871468+kabirgh@users.noreply.github.com>
Date: Tue, 23 Jan 2024 22:52:41 +0000
Subject: [PATCH] feat: Emit custom event when theme changes (#723)
* Emit custom event when theme changes
* Type themechange custom event
* Update darkmode docs
---
docs/features/darkmode.md | 9 +++++++++
index.d.ts | 1 +
quartz/components/scripts/darkmode.inline.ts | 19 ++++++++++++-------
3 files changed, 22 insertions(+), 7 deletions(-)
diff --git a/docs/features/darkmode.md b/docs/features/darkmode.md
index dfa2314..dff75b4 100644
--- a/docs/features/darkmode.md
+++ b/docs/features/darkmode.md
@@ -12,3 +12,12 @@ Quartz supports darkmode out of the box that respects the user's theme preferenc
- Component: `quartz/components/Darkmode.tsx`
- Style: `quartz/components/styles/darkmode.scss`
- 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
+})
+```
diff --git a/index.d.ts b/index.d.ts
index aec536d..a6c594f 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -6,6 +6,7 @@ declare module "*.scss" {
// dom custom event
interface CustomEventMap {
nav: CustomEvent<{ url: FullSlug }>
+ themechange: CustomEvent<{ theme: "light" | "dark" }>
}
declare const fetchData: Promise<ContentIndex>
diff --git a/quartz/components/scripts/darkmode.inline.ts b/quartz/components/scripts/darkmode.inline.ts
index c42a367..86735e3 100644
--- a/quartz/components/scripts/darkmode.inline.ts
+++ b/quartz/components/scripts/darkmode.inline.ts
@@ -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)
})
})