From 2c7f00d4b199927e8ef1cd2b15cb4554c6255d7d Mon Sep 17 00:00:00 2001
From: yazawazi <47273265+Yazawazi@users.noreply.github.com>
Date: Fri, 24 May 2024 04:36:49 +0800
Subject: [PATCH] fix: color mode change

---
 docusaurus.config.ts             |  3 +++
 src/components/GiscusComment.tsx | 23 ++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index a5b3108..7a120a1 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -86,6 +86,9 @@ const config: Config = {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
     },
+    colorMode: {
+      respectPrefersColorScheme: true,
+    }
   } satisfies Preset.ThemeConfig,
 };
 
diff --git a/src/components/GiscusComment.tsx b/src/components/GiscusComment.tsx
index 8d8a5e3..d8c1f12 100644
--- a/src/components/GiscusComment.tsx
+++ b/src/components/GiscusComment.tsx
@@ -1,6 +1,27 @@
 import Giscus from "@giscus/react"
+import { useEffect, useRef, useState } from "react"
 
 const GiscusComment = () => {
+    const [theme, setTheme] = useState('preferred_color_scheme')
+    const observerLock = useRef(false)
+  
+    const updateTheme = () => {
+      setTheme(document.documentElement.getAttribute('data-theme'))
+    }
+    
+    useEffect(() => {
+      if (!observerLock.current) {
+        observerLock.current = true
+        const observer = new MutationObserver(() => {
+          updateTheme()
+        })
+        observer.observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ['data-theme'],
+        })
+      }
+    }, [])
+  
     return (
       <div style={{
         paddingTop: '2rem',
@@ -15,7 +36,7 @@ const GiscusComment = () => {
           reactionsEnabled='1'
           emitMetadata='0'
           inputPosition='bottom'
-          theme='preferred_color_scheme'
+          theme={theme}
           lang='zh-CN'
           loading='lazy'
         />