feat: set color scheme based on system preference (#205)

daeuniverse · Aug 4, 2023 · cc88300 · cc88300
1 parent e588f1f
commit cc88300
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -32,6 +32,15 @@ export const App = () => {
     [colorScheme],
   )
 
+  useEffect(() => {
+    const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)')
+    const onDarkModeChange = (e: MediaQueryListEvent) => toggleColorScheme(e.matches ? 'dark' : 'light')
+
+    darkModePreference.addEventListener('change', onDarkModeChange)
+
+    return () => darkModePreference.removeEventListener('change', onDarkModeChange)
+  }, [toggleColorScheme])
+
   useEffect(() => {
     setColorScheme(appState.preferredColorScheme || preferredColorScheme)
   }, [setColorScheme, preferredColorScheme, appState.preferredColorScheme])