fix: matches value initial

alexzhang-dev · Nov 1, 2022 · f841685 · f841685
1 parent a58d20f
commit f841685
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/core/src/useDark/index.ts b/packages/core/src/useDark/index.ts
@@ -2,11 +2,11 @@ import { createEffect, createMemo, createSignal } from 'solid-js'
 import { usePreferredDark } from '../usePreferredDark'
 
 export function useDark() {
-  const [isDark, setIsDark] = createSignal(false)
   const preferredDark = usePreferredDark()
+  const [isDark, setIsDark] = createSignal(preferredDark())
 
   createMemo(() => {
-    setIsDark(preferredDark())
+    setIsDark(d => d === preferredDark() ? d : !d)
   })
   createEffect(() => {
     document.documentElement.classList.toggle('dark', isDark())

diff --git a/packages/core/src/useMediaQuery/index.ts b/packages/core/src/useMediaQuery/index.ts
@@ -1,17 +1,21 @@
 import { createSignal, onCleanup, onMount } from 'solid-js'
 
+function getMediaQuery(query: string, window: Window) {
+  return window.matchMedia(query)
+}
+
 export function useMediaQuery(query: string, window: Window) {
   const isSupport = 'matchMedia' in window && typeof window.matchMedia === 'function'
 
-  const [matches, setMatches] = createSignal(false)
+  const [matches, setMatches] = createSignal(isSupport ? getMediaQuery(query, window).matches : false)
 
   let mediaQuery: MediaQueryList | undefined
 
   const update = () => {
     if (!isSupport)
       return
 
-    mediaQuery = window.matchMedia(query)
+    mediaQuery = getMediaQuery(query, window)
     setMatches(mediaQuery.matches)
 
     if ('addEventListener' in mediaQuery)