From 1d1f97159cdf037cc4e3a058cb54ebf9f82680c6 Mon Sep 17 00:00:00 2001
From: syy11cn <syy11cn@outlook.com>
Date: Sat, 2 Apr 2022 17:36:26 +0800
Subject: [PATCH] feat: dark mode

---
 index.html         | 2 +-
 src/App.tsx        | 2 ++
 src/utils/dark.tsx | 9 +++++----
 tsconfig.json      | 1 +
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 64e043b..1489c04 100644
--- a/index.html
+++ b/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>
diff --git a/src/App.tsx b/src/App.tsx
index 2e7ba3f..af9d133 100644
--- a/src/App.tsx
+++ b/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>
   </>
 }
 
diff --git a/src/utils/dark.tsx b/src/utils/dark.tsx
index a7c919c..3d88753 100644
--- a/src/utils/dark.tsx
+++ b/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]
 }
diff --git a/tsconfig.json b/tsconfig.json
index 0636798..01adae6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,7 @@
     "jsx": "react-jsx",
     "module": "commonjs",
     "rootDir": "./src",
+    "baseUrl": "./",
     "allowJs": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,