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 dfa231409..dff75b44d 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 aec536d25..a6c594fff 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 c42a367c9..86735e396 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)
   })
 })