From 91bf84287b204a7ee58d0d67ddae3896cea14fc3 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Wed, 15 Feb 2023 12:40:06 +0800
Subject: [PATCH] fix/dark-mode-giscus

---
 components/Comment.js | 4 +---
 components/Giscus.js  | 5 ++++-
 lib/global.js         | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/Comment.js b/components/Comment.js
index 613fad8873e..570d122dae5 100644
--- a/components/Comment.js
+++ b/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>
         )}
 
diff --git a/components/Giscus.js b/components/Giscus.js
index 7a3a5e97f02..605430daa3b 100644
--- a/components/Giscus.js
+++ b/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}
diff --git a/lib/global.js b/lib/global.js
index 158f8ac61a8..1e9af81247f 100644
--- a/lib/global.js
+++ b/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(() => {