From 792d0e0d8ade70bb5def4fdb68b113caa80ca76c Mon Sep 17 00:00:00 2001
From: natew <natewienert@gmail.com>
Date: Thu, 4 Sep 2025 10:27:02 -1000
Subject: [PATCH] fix: move media query listening earlier for faster reaction
 on load

---
 .../universal-color-scheme/src/colorScheme.ts     | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/universal-color-scheme/src/colorScheme.ts b/packages/universal-color-scheme/src/colorScheme.ts
index 79cc5298f..43c34c2a1 100644
--- a/packages/universal-color-scheme/src/colorScheme.ts
+++ b/packages/universal-color-scheme/src/colorScheme.ts
@@ -56,8 +56,6 @@ export function useColorScheme() {
       setState(val)
     })
 
-    startWebMediaListener()
-
     return () => {
       dispose()
     }
@@ -81,15 +79,17 @@ if (process.env.TAMAGUI_TARGET === 'native') {
   }
 }
 
+if (process.env.TAMAGUI_TARGET === 'web') {
+  startWebMediaListener()
+}
+
 export function useColorSchemeSetting() {
   const [state, setState] = useState(getColorSchemeSetting())
 
   useIsomorphicLayoutEffect(() => {
-    const dispose = onColorSchemeChange(() => {
+    return onColorSchemeChange(() => {
       setState(getColorSchemeSetting())
     })
-    startWebMediaListener()
-    return dispose
   }, [])
 
   return [state, setColorScheme] as const
@@ -101,8 +101,9 @@ const getColorSchemeSetting = (): ColorSchemeSetting => {
   return currentSetting
 }
 
-const getWebIsDarkMatcher = () =>
-  typeof window !== 'undefined' ? window.matchMedia?.('(prefers-color-scheme: dark)') : null
+function getWebIsDarkMatcher() {
+  return typeof window !== 'undefined' ? window.matchMedia?.('(prefers-color-scheme: dark)') : null
+}
 
 function getSystemColorScheme() {
   if (process.env.TAMAGUI_TARGET === 'native') {