diff --git a/components/comments/cusdis.jsx b/components/comments/cusdis.jsx
index f82be22..de4987d 100644
--- a/components/comments/cusdis.jsx
+++ b/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)}
diff --git a/contexts/theme.tsx b/contexts/theme.tsx
index 6e43513..2878828 100644
--- a/contexts/theme.tsx
+++ b/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>()