Comment's darkTheme doesn't work.

[AliSananS]

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?

[AliSananS]

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"

[Hentai02]

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

[Hentai02]

Deployment to vercel according to the method you provided will also report an eror.

[mahong978]

It turns out that it is because the blog and the pliny use different versions of next-theme
timlrx/pliny#202