Merge pull request #59 from SabAlej/browser-mode-pref

set the initial preference for dark/light mode
cmgriffing · Nov 2, 2024 · 39152f4 · 39152f4
2 parents fda474e + e276b2b
commit 39152f4
Showing 1 changed file with 2 additions and 7 deletions.
diff --git a/playgrounds/app/src/components/theme-switcher.tsx b/playgrounds/app/src/components/theme-switcher.tsx
@@ -2,22 +2,17 @@ import { createSignal, createEffect } from 'solid-js'
 import { makePersisted } from '@solid-primitives/storage'
 
 export function createThemeSwitcher() {
-  const [isDarkMode, setIsDarkMode] = makePersisted(createSignal(false), {
+  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
+  const [isDarkMode, setIsDarkMode] = makePersisted(createSignal(prefersDarkScheme.matches), {
     name: 'isDarkMode',
   })
 
   createEffect(() => {
-    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
-
     if (isDarkMode()) {
       document.body.classList.add('dark')
     } else {
       document.body.classList.remove('dark')
     }
-
-    if (isDarkMode() === null) {
-      setIsDarkMode(prefersDarkScheme.matches)
-    }
   })
 
   const toggleDarkMode = () => {