From 573cf31d865044b0cc442a7390ecbda15c9ba1d0 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 6 Feb 2024 21:16:50 -0800
Subject: fix theme cross-tab write loop (#2774)

* don't write on onUpdate, memoize

* refac useColorModeTheme
---
 src/alf/util/useColorModeTheme.ts | 42 ++++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 16 deletions(-)

(limited to 'src/alf/util/useColorModeTheme.ts')

diff --git a/src/alf/util/useColorModeTheme.ts b/src/alf/util/useColorModeTheme.ts
index 49e2ec8f5..48cf904fe 100644
--- a/src/alf/util/useColorModeTheme.ts
+++ b/src/alf/util/useColorModeTheme.ts
@@ -1,5 +1,5 @@
 import React from 'react'
-import {useColorScheme} from 'react-native'
+import {ColorSchemeName, useColorScheme} from 'react-native'
 
 import {useThemePrefs} from 'state/shell'
 import {isWeb} from 'platform/detection'
@@ -10,21 +10,31 @@ export function useColorModeTheme(): ThemeName {
   const colorScheme = useColorScheme()
   const {colorMode, darkTheme} = useThemePrefs()
 
-  return React.useMemo(() => {
-    if (
-      (colorMode === 'system' && colorScheme === 'light') ||
-      colorMode === 'light'
-    ) {
-      updateDocument('light')
-      updateSystemBackground('light')
-      return 'light'
-    } else {
-      const themeName = darkTheme ?? 'dim'
-      updateDocument(themeName)
-      updateSystemBackground(themeName)
-      return themeName
-    }
-  }, [colorMode, darkTheme, colorScheme])
+  React.useLayoutEffect(() => {
+    const theme = getThemeName(colorScheme, colorMode, darkTheme)
+    updateDocument(theme)
+    updateSystemBackground(theme)
+  }, [colorMode, colorScheme, darkTheme])
+
+  return React.useMemo(
+    () => getThemeName(colorScheme, colorMode, darkTheme),
+    [colorScheme, colorMode, darkTheme],
+  )
+}
+
+function getThemeName(
+  colorScheme: ColorSchemeName,
+  colorMode: 'system' | 'light' | 'dark',
+  darkTheme?: ThemeName,
+) {
+  if (
+    (colorMode === 'system' && colorScheme === 'light') ||
+    colorMode === 'light'
+  ) {
+    return 'light'
+  } else {
+    return darkTheme ?? 'dim'
+  }
 }
 
 function updateDocument(theme: ThemeName) {
-- 
cgit 1.4.1