fix: giscus comment

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

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>

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>

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>