jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: support dark theme for utterances and giscus

Browse Source
This commit is contained in:
Timothy Lin
2021-07-18 15:49:42 +08:00
parent 5ff632776c
commit 5e1f47b074
3 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/comments/Giscus.js
View File

@ -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

8
components/comments/Utterances.js
View File

@ -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