diff --git a/src/components/GiscusComment.tsx b/src/components/GiscusComment.tsx
index 321646c..26afe96 100644
--- a/src/components/GiscusComment.tsx
+++ b/src/components/GiscusComment.tsx
@@ -6,6 +6,15 @@ import Giscus from '@giscus/react'
 const id = 'inject-comments'
 
 const GiscusComment = () => {
+	const [theme, setTheme] = React.useState('preferred_color_scheme')
+
+	React.useEffect(() => {
+		const savedTheme = localStorage.getItem('theme')
+		if (savedTheme) {
+			setTheme(savedTheme)
+		}
+	}, [])
+
 	return (
 		<div id={id} className='mt-8 w-full'>
 			<Giscus
@@ -19,7 +28,7 @@ const GiscusComment = () => {
 				reactionsEnabled='1'
 				emitMetadata='0'
 				inputPosition='bottom'
-				theme={localStorage.getItem('theme') ?? 'preferred_color_scheme'}
+				theme={theme}
 				lang='zh-CN'
 				loading='lazy'
 			/>
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index b66e589..4b0ddd9 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -23,5 +23,5 @@ const { Content } = await entry.render()
 
 <PostLayout post={entry}>
 	<Content />
-	<GiscusComment client:only='react' client:load />
+	<GiscusComment client:load />
 </PostLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 823b128..51b2c6e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -211,5 +211,5 @@ const projects = [...directProjects, ...mdProjects].slice(0, MAX_PROJECTS)
 			</div>
 		</Section>
 	</div>
-	<GiscusComment client:only='react' client:load />
+	<GiscusComment client:load />
 </PageLayout>
diff --git a/src/pages/tools/index.astro b/src/pages/tools/index.astro
index 96bac86..3fa7cfb 100644
--- a/src/pages/tools/index.astro
+++ b/src/pages/tools/index.astro
@@ -408,5 +408,5 @@ const DEVICES = {
 			<CategorySection title='Hardware Devices' categories={Object.values(DEVICES)} />
 		</div>
 	</div>
-	<GiscusComment client:only='react' client:load />
+	<GiscusComment client:load />
 </PageLayout>