feat: fix dark mode toggle

src/components/buttons/ModeToggleButton.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { useTheme } from 'next-themes';
 import * as React from 'react';
+import { useEffect, useState } from 'react';
 import { FiMoon, FiSun } from 'react-icons/fi';
 
 type ThemeButtonProps = React.ComponentPropsWithoutRef<'button'>;
@@ -10,12 +11,12 @@ export default function ModeToggleButton({
   ...rest
 }: ThemeButtonProps) {
   const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = React.useState(false);
+  const [mounted, setMounted] = useState(false);
 
-  React.useEffect(() => setMounted(true), []);
+  useEffect(() => setMounted(true), []);
 
   function toggleMode() {
-    return theme === 'dark' ? setTheme('light') : setTheme('dark');
+    return setTheme(theme === 'dark' ? 'light' : 'dark');
   }
 
   return (

src/pages/index.tsx

@@ -21,13 +21,13 @@ export default function HomePage() {
       <Seo templateTitle='Home' />
 
       <main>
-        <section className='light:bg-white dark:bg-dark'>
+        <section className='dark:bg-dark bg-white'>
           <div className='layout relative flex min-h-screen flex-col items-center justify-center py-12 text-center'>
             <Vercel className='text-5xl' />
             <h1 className='mt-4'>
               Next.js + Tailwind CSS + TypeScript Starter
             </h1>
-            <p className='light:text-gray-600 mt-2 text-sm dark:text-gray-100'>
+            <p className='mt-2 text-sm text-gray-600 dark:text-gray-100'>
               A starter for Next.js, Tailwind CSS, and TypeScript with Absolute
               Import, Seo, Link component, pre-configured with Husky{' '}
             </p>

src/styles/globals.css

@@ -145,7 +145,7 @@
   }
 
   .burger-icon span {
-    /*@apply light:bg-black dark:bg-white;*/
+    @apply bg-black dark:bg-white;
     display: block;
     position: absolute;
     height: 3px;

tailwind.config.ts

@@ -3,6 +3,7 @@ import defaultTheme from 'tailwindcss/defaultTheme';
 
 export default {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  darkMode: 'class',
   theme: {
     extend: {
       fontFamily: {