feat: dark mode

index.html

@@ -12,7 +12,7 @@
       (function() {
         const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
         const setting = localStorage.getItem('color-schema') || 'auto'
-        if (setting === 'dark' || (prefersDark && setting !== 'light'))
+        if (setting === 'dark' || (prefersDark && setting !== 'auto'))
           document.documentElement.classList.toggle('dark', true)
       })()
     </script>

src/App.tsx

@@ -1,10 +1,12 @@
 import { useRoutes } from 'react-router-dom'
+import Footer from './components/footer'
 import { routes } from './routes'
 
 const App = () => {
   return <>
     <p>hello world</p>
     {useRoutes(routes)}
+    <Footer></Footer>
   </>
 }
 

src/utils/dark.tsx

@@ -1,13 +1,14 @@
 export function useDark() {
-  const [value, setValue] = useState<string>(window.localStorage.getItem('colorSchema') || 'auto')
+  const [value, setValue] = useState<string>(window.localStorage.getItem('color-schema') || 'auto')
   const toggleDark = () => {
-    setValue(value === 'auto' ? 'dark' : 'auto')
-    window.localStorage.setItem('colorSchema', value)
+    const newValue = value === 'auto' ? 'dark' : 'auto'
+    setValue(newValue)
+    window.localStorage.setItem('color-schema', newValue)
   }
   const isDark = value === 'dark'
 
   if (document)
     useEffect(() => { document.documentElement.classList.toggle('dark', isDark) })
 
-  return [isDark, toggleDark]
+  return [isDark, toggleDark] as [boolean, () => void]
 }

tsconfig.json

@@ -5,6 +5,7 @@
     "jsx": "react-jsx",
     "module": "commonjs",
     "rootDir": "./src",
+    "baseUrl": "./",
     "allowJs": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,