🐛Fix: correct utterances theme when appearance is set to "auto"

components/comments/cusdis.jsx

@@ -1,18 +1,21 @@
 import { ReactCusdis } from 'react-cusdis'
 import { useRouter } from 'next/router'
 import { useConfig } from '@/contexts/config'
+import { useTheme } from "@/contexts/theme";
 
 export default function Cusdis ({ config, post }) {
   const router = useRouter()
-  const { link, lang, appearance } = useConfig()
+  const { link, lang } = useConfig()
+  const { scheme } = useTheme()
 
   return (
     <ReactCusdis
+      key={`cusdis-${scheme}`}
       attrs={{
         pageId: post.id,
         pageTitle: post.title,
         pageUrl: link + router.asPath,
-        theme: appearance,
+        theme: scheme,
         ...config,
       }}
       lang={resolveLang(lang)}

components/comments/utterances.jsx

@@ -1,13 +1,10 @@
 import { useEffect, useRef } from 'react'
-import { useConfig } from '@/contexts/config'
+import { useTheme } from '@/contexts/theme'
 
 export default function Utterances ({ config, post }) {
-  const { appearance } = useConfig()
-  const theme = {
-    auto: 'preferred-color-scheme',
-    light: 'github-light',
-    dark: 'github-dark',
-  }[appearance]
+  const { scheme } = useTheme()
+
+  const theme = scheme === 'dark' ? 'github-dark' : 'github-light'
 
   const container = useRef()
 

contexts/theme.tsx

@@ -17,7 +17,7 @@ const ThemeContext = createContext<Context>(undefined as any)
 export function ThemeProvider ({ children }: BasicProps) {
   const config = useConfig()
 
-  const [theme, setTheme] = useState<Theme>(config.appearance === 'auto' ? 'system' : config.appearnce)
+  const [theme, setTheme] = useState<Theme>(config.appearance === 'auto' ? 'system' : config.appearance)
 
   const [prefersDark, setPrefersDark] = useState<boolean>()