Comment's darkTheme doesn't work.
In siteMetadata.js comments.giscusConfig.darkTheme specifying 'dark' doesn't seem to work.
The comments theme stays as the original theme value.
My config:
// ...
comments: {
// ...
giscusConfig: {
theme: 'light',
themeDark: 'dark',
// ...
},
// ...
}
// ...
Is there something I'm missing?
Current Workaround:
If your Giscus comments aren’t adapting to dark mode, you can manually pass the correct theme by syncing it with useTheme() from next-themes. I temporarily fixed it by modifying the Comments.tsx component to dynamically set the Giscus theme based on the current site theme. Hope this helps others until it's patched properly!
Here's what I did:
--- a/components/Comments.tsx
+++ b/components/Comments.tsx
+import { useTheme } from "next-themes"
export default function Comments({ slug }: { slug: string }) {
+ const [loadComments, setLoadComments] = useState(false);
+ const { resolvedTheme } = useTheme();
if (!siteMetadata.comments?.provider) {
return null
}
+ let commentsConfigWithDarkTheme = siteMetadata.comments;
+
+ if (siteMetadata.comments.provider === "giscus" && siteMetadata.comments.giscusConfig) {
+ commentsConfigWithDarkTheme = {
+ ...siteMetadata.comments,
+ giscusConfig: {
+ ...siteMetadata.comments.giscusConfig,
+ theme: resolvedTheme === 'dark'
+ ? siteMetadata.comments.giscusConfig.darkTheme
+ : siteMetadata.comments.giscusConfig.theme
+ },
+ };
+ }
+
return (
<>
{loadComments ? (
- <CommentsComponent commentsConfig={siteMetadata.comments} slug={slug} />
+ <CommentsComponent commentsConfig={commentsConfigWithDarkTheme} slug={slug} />
) : (
<button
className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:cursor-pointer hover:bg-blue-400"
Hello, I use the following, but it reports an error when deployed to vercel. I tried all night but couldn't solve it. I really don't understand ts
Deployment to vercel according to the method you provided will also report an eror.