fix tailwind dark mode

components/pages/dark-mode-btn.tsx

@@ -8,12 +8,12 @@ const DarkModeBtn = () => {
   const { mounted } = useMounted();
   const { systemTheme, theme, setTheme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme;
-  const handleTheme = (type: 'light' | 'dark') => () => {
-    const map = {
-      light: 'latte',
-      dark: 'mocha',
-    };
-    document.body.className = map[type];
+  const handleTheme = (type: 'latte' | 'mocha') => () => {
+    // const map = {
+    //   light: 'latte',
+    //   dark: 'mocha',
+    // };
+    // document.body.className = map[type];
     setTheme(type);
   };
 
@@ -32,13 +32,13 @@ const DarkModeBtn = () => {
 
   return (
     <>
-      {currentTheme === 'dark' ? (
+      {currentTheme === 'mocha' ? (
         <button>
-          <FiSun className="w-5 h-5" onClick={handleTheme('light')} />
+          <FiSun className="w-5 h-5" onClick={handleTheme('latte')} />
         </button>
       ) : (
         <button>
-          <FiMoon className="w-5 h-5" onClick={handleTheme('dark')} />
+          <FiMoon className="w-5 h-5" onClick={handleTheme('mocha')} />
         </button>
       )}
     </>

components/pages/gists/gists-code.tsx

@@ -1,13 +1,14 @@
-import rehypePrism from '@mapbox/rehype-prism';
 import clsx from 'clsx';
 import { createElement, Fragment, memo } from 'react';
 import rehypeReact from 'rehype-react';
 import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
+import rehypeHighlight from 'rehype-highlight';
 import { GistsFile } from 'types';
 import { unified } from 'unified';
 import styles from './gists-code.module.css';
+import '@catppuccin/highlightjs/sass/catppuccin.variables.scss';
 
 interface Props {
   file: GistsFile;
@@ -22,7 +23,7 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
     .use(remarkParse)
     .use(remarkRehype)
     .use(remarkGfm)
-    .use(rehypePrism, { ignoreMissing: true })
+    .use(rehypeHighlight, { ignoreMissing: true })
     .use(rehypeReact, {
       createElement,
       Fragment,

components/pages/theme-provider.tsx

@@ -12,7 +12,7 @@ export default function RUAThemeProvider({
     <ThemeProvider
       attribute="class"
       storageKey="rua-theme"
-      themes={['light', 'dark']}
+      themes={['latte', 'mocha']}
       enableSystem
       defaultTheme="system"
     >