fix: color mode change

docusaurus.config.ts

@@ -86,6 +86,9 @@ const config: Config = {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
     },
+    colorMode: {
+      respectPrefersColorScheme: true,
+    }
   } satisfies Preset.ThemeConfig,
 };
 

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'
         />