chore: add dark mode support

2022-04-02 17:06:31 +08:00 · 2022-04-02 17:06:31 +08:00 · cb15f0d00c
parent 708afd2560
commit cb15f0d00c
5 changed files with 26 additions and 3 deletions
--- a/index.html
+++ b/index.html
@ -6,8 +6,16 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React TypeScript Vite Template</title>
  </head>
-  <body>
+  <body class="dark:text-white dark:bg-hex-121212">
    <div id="root"></div>
+    <script>
+      (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'))
+          document.documentElement.classList.toggle('dark', true)
+      })()
+    </script>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -2,10 +2,10 @@ import { useRoutes } from 'react-router-dom'
 import { routes } from './routes'

 const App = () => {
-  return <div>
+  return <>
    <p>hello world</p>
    {useRoutes(routes)}
-  </div>
+  </>
 }

 export default App
--- a/src/main.tsx
+++ b/src/main.tsx
@ -6,6 +6,7 @@ import App from './App'

 import '@unocss/reset/tailwind.css'
 import 'uno.css'
+import '~/styles/main.css'

 const root = createRoot(document.getElementById('root') as HTMLElement)

--- a/src/utils/dark.tsx
+++ b/src/utils/dark.tsx
@ -0,0 +1,13 @@
+export function useDark() {
+  const [value, setValue] = useState<string>(window.localStorage.getItem('colorSchema') || 'auto')
+  const toggleDark = () => {
+    setValue(value === 'auto' ? 'dark' : 'auto')
+    window.localStorage.setItem('colorSchema', value)
+  }
+  const isDark = value === 'dark'
+
+  if (document)
+    useEffect(() => { document.documentElement.classList.toggle('dark', isDark) })
+
+  return [isDark, toggleDark]
+}
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@ -0,0 +1 @@
+export { useDark } from './dark'