Merge pull request #785 from tangly1024/fix/dark-mode-giscus

fix/dark-mode-giscus

components/Comment.js

@@ -1,7 +1,6 @@
 import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import Tabs from '@/components/Tabs'
-import { useGlobal } from '@/lib/global'
 import React from 'react'
 import { useRouter } from 'next/router'
 
@@ -50,7 +49,6 @@ const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
 })
 
 const Comment = ({ frontMatter }) => {
-  const { isDarkMode } = useGlobal()
   const router = useRouter()
 
   React.useEffect(() => {
@@ -87,7 +85,7 @@ const Comment = ({ frontMatter }) => {
 
         {BLOG.COMMENT_GISCUS_REPO && (
           <div key="Giscus">
-            <GiscusComponent isDarkMode={isDarkMode} className="px-2" />
+            <GiscusComponent className="px-2" />
           </div>
         )}
 

components/Giscus.js

@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
 import { Giscus } from '@giscus/react'
 
 /**
@@ -8,8 +9,10 @@ import { Giscus } from '@giscus/react'
  * @constructor
  */
 
-const GiscusComponent = ({ isDarkMode }) => {
+const GiscusComponent = () => {
+  const { isDarkMode } = useGlobal()
   const theme = isDarkMode ? 'dark' : 'light'
+
   return (
     <Giscus
       repo={BLOG.COMMENT_GISCUS_REPO}

lib/global.js

@@ -17,7 +17,7 @@ export function GlobalContextProvider({ children }) {
   const [lang, updateLang] = useState(BLOG.LANG)
   const [locale, updateLocale] = useState(generateLocaleDict(BLOG.LANG))
   const [theme, setTheme] = useState(BLOG.THEME)
-  const [isDarkMode, updateDarkMode] = useState(false)
+  const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark')
   const [onLoading, changeLoadingState] = useState(false)
 
   useEffect(() => {