From 87b5bb80fdf31de4f6f6fea4299b867a73d5951c Mon Sep 17 00:00:00 2001
From: ekzyis <ek@stacker.news>
Date: Fri, 14 Feb 2025 18:37:24 +0100
Subject: [PATCH] Fix missing cleanup of dark mode listeners (#1906)

---
 components/dark-mode.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/dark-mode.js b/components/dark-mode.js
index a0eb4d2e..2653913d 100644
--- a/components/dark-mode.js
+++ b/components/dark-mode.js
@@ -34,20 +34,23 @@ const setTheme = (dark) => {
 
 const listenForThemeChange = (onChange) => {
   const mql = window.matchMedia(PREFER_DARK_QUERY)
-  mql.onchange = mql => {
+  const onMqlChange = () => {
     const { user, dark } = getTheme()
     if (!user) {
       handleThemeChange(dark)
       onChange({ user, dark })
     }
   }
-  window.onstorage = e => {
+  mql.addEventListener('change', onMqlChange)
+
+  const onStorage = (e) => {
     if (e.key === STORAGE_KEY) {
       const dark = JSON.parse(e.newValue)
       setTheme(dark)
       onChange({ user: true, dark })
     }
   }
+  window.addEventListener('storage', onStorage)
 
   const root = window.document.documentElement
   const observer = new window.MutationObserver(() => {
@@ -56,7 +59,11 @@ const listenForThemeChange = (onChange) => {
   })
   observer.observe(root, { attributes: true, attributeFilter: ['data-bs-theme'] })
 
-  return () => observer.disconnect()
+  return () => {
+    observer.disconnect()
+    mql.removeEventListener('change', onMqlChange)
+    window.removeEventListener('storage', onStorage)
+  }
 }
 
 export default function useDarkMode () {
@@ -65,7 +72,7 @@ export default function useDarkMode () {
   useEffect(() => {
     const { user, dark } = getTheme()
     setDark({ user, dark })
-    listenForThemeChange(setDark)
+    return listenForThemeChange(setDark)
   }, [])
 
   return [dark?.dark, () => {