feat: support dark theme for utterances and giscus

components/comments/Giscus.js

@@ -1,9 +1,17 @@
 import React, { useState } from 'react'
+import { useTheme } from 'next-themes'
 
 import siteMetadata from '@/data/siteMetadata'
 
 const Giscus = ({ mapping }) => {
   const [enableLoadComments, setEnabledLoadComments] = useState(true)
+  const { theme, resolvedTheme } = useTheme()
+  const commentsTheme =
+    siteMetadata.comment.giscusConfig.themeURL === ''
+      ? theme === 'dark' || resolvedTheme === 'dark'
+        ? siteMetadata.comment.giscusConfig.darkTheme
+        : siteMetadata.comment.giscusConfig.theme
+      : siteMetadata.comment.giscusConfig.themeURL
 
   const COMMENTS_ID = 'comments-container'
 
@@ -18,14 +26,7 @@ const Giscus = ({ mapping }) => {
     script.setAttribute('data-mapping', mapping)
     script.setAttribute('data-reactions-enabled', siteMetadata.comment.giscusConfig.reactions)
     script.setAttribute('data-emit-metadata', siteMetadata.comment.giscusConfig.metadata)
-    script.setAttribute(
-      'data-theme',
-      `${
-        siteMetadata.comment.giscusConfig.themeURL === ''
-          ? siteMetadata.comment.giscusConfig.theme
-          : siteMetadata.comment.giscusConfig.themeURL
-      }`
-    )
+    script.setAttribute('data-theme', commentsTheme)
     script.setAttribute('crossorigin', 'anonymous')
     script.async = true
 

components/comments/Utterances.js

@@ -1,9 +1,15 @@
 import React, { useState } from 'react'
+import { useTheme } from 'next-themes'
 
 import siteMetadata from '@/data/siteMetadata'
 
 const Utterances = ({ issueTerm }) => {
   const [enableLoadComments, setEnabledLoadComments] = useState(true)
+  const { theme, resolvedTheme } = useTheme()
+  const commentsTheme =
+    theme === 'dark' || resolvedTheme === 'dark'
+      ? siteMetadata.comment.utterancesConfig.darkTheme
+      : siteMetadata.comment.utterancesConfig.theme
 
   const COMMENTS_ID = 'comments-container'
 
@@ -14,7 +20,7 @@ const Utterances = ({ issueTerm }) => {
     script.setAttribute('repo', siteMetadata.comment.utterancesConfig.repo)
     script.setAttribute('issue-term', issueTerm)
     script.setAttribute('label', siteMetadata.comment.utterancesConfig.label)
-    script.setAttribute('theme', siteMetadata.comment.utterancesConfig.theme)
+    script.setAttribute('theme', commentsTheme)
     script.setAttribute('crossorigin', 'anonymous')
     script.async = true
 

data/siteMetadata.js

@@ -32,6 +32,8 @@ const siteMetadata = {
       // theme example: light, dark, dark_dimmed, dark_high_contrast
       // transparent_dark, preferred_color_scheme, custom
       theme: '',
+      // theme when dark mode
+      darkTheme: '',
       // If the theme option above is set to 'custom`
       // please provide a link below to your custom theme css file.
       // example: https://giscus.app/themes/custom_example.css
@@ -44,6 +46,8 @@ const siteMetadata = {
       // theme example: github-light, github-dark, preferred-color-scheme
       // github-dark-orange, icy-dark, dark-blue, photon-dark, boxy-light
       theme: '',
+      // theme when dark mode
+      darkTheme: '',
     },
     disqus: {
       // https://help.disqus.com/en/articles/1717111-what-s-a-shortname