@sanity/ui 0.37.6-next.18 → 0.37.6-next.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "0.37.6-next.18+307d9af8",
+  "version": "0.37.6-next.19+d4043018",
   "sideEffects": false,
   "source": "./src/index.ts",
   "exports": {
@@ -31,8 +31,8 @@
     "@juggle/resize-observer": "^3.3.1",
     "@popperjs/core": "^2.11.2",
     "@reach/auto-id": "^0.16.0",
-    "@sanity/color": "2.1.9-next.20+307d9af8",
-    "@sanity/icons": "1.2.6-next.20+307d9af8",
+    "@sanity/color": "2.1.9-next.21+d4043018",
+    "@sanity/icons": "1.2.6-next.21+d4043018",
     "framer-motion": "6.2.8",
     "popper-max-size-modifier": "^0.2.0",
     "react-is": "^17.0.2",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "307d9af862f6cb3fb58a662951e0260804ff7564"
+  "gitHead": "d4043018a4091f90775c93e8c5e3335329079917"
 }

package/src/hooks/usePrefersDark.ts

@@ -1,17 +1,19 @@
-import {useEffect, useState} from 'react'
+import {useEffect, useMemo, useState} from 'react'
 
 /**
  * @public
  */
 export function usePrefersDark(): boolean {
-  const [dark, setDark] = useState(() => {
-    if (typeof window === 'undefined') return false
+  const mq = useMemo(() => {
+    if (typeof window === 'undefined') return undefined
 
-    return window.matchMedia('(prefers-color-scheme: dark)').matches
-  })
+    return window.matchMedia('(prefers-color-scheme: dark)')
+  }, [])
+
+  const [dark, setDark] = useState(mq?.matches || false)
 
   useEffect(() => {
-    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    if (!mq) return undefined
 
     setDark(mq.matches)
 
@@ -20,7 +22,7 @@ export function usePrefersDark(): boolean {
     mq.addEventListener('change', handleChange)
 
     return () => mq.removeEventListener('change', handleChange)
-  }, [])
+  }, [mq])
 
   return dark
 }