Options for selecting dark theme, fix some white flashes when in dark mode (#2722)

* add dark theme selection to settings/schema

* use `useThemePrefs` where needed

* adjust theme providers to support various themes

* update storybook

* handle web themes

* better themeing for web

* dont show dark theme prefs when color mode is light

* drop the inverted text change on oled theme

* get the color mode inside of `useColorModeTheme`

* use `ThemeName` type everywhere

* typo

* use dim/dark instead of dark/oled

* prevent any fickers on web

* fix styles

* use `dim` for dark default

* more cleanup

* 🤔

* set system background color

* ts

1 files changed, 49 insertions, 5 deletions

diff --git a/src/alf/util/useColorModeTheme.ts b/src/alf/util/useColorModeTheme.ts
index 79cebc139..49e2ec8f5 100644
--- a/src/alf/util/useColorModeTheme.ts
+++ b/src/alf/util/useColorModeTheme.ts
@@ -1,10 +1,54 @@
+import React from 'react'
 import {useColorScheme} from 'react-native'
 
-import * as persisted from '#/state/persisted'
+import {useThemePrefs} from 'state/shell'
+import {isWeb} from 'platform/detection'
+import {ThemeName, light, dark, dim} from '#/alf/themes'
+import * as SystemUI from 'expo-system-ui'
 
-export function useColorModeTheme(
-  theme: persisted.Schema['colorMode'],
-): 'light' | 'dark' {
+export function useColorModeTheme(): ThemeName {
   const colorScheme = useColorScheme()
-  return (theme === 'system' ? colorScheme : theme) || 'light'
+  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])
+}
+
+function updateDocument(theme: ThemeName) {
+  // @ts-ignore web only
+  if (isWeb && typeof window !== 'undefined') {
+    // @ts-ignore web only
+    const html = window.document.documentElement
+    // remove any other color mode classes
+    html.className = html.className.replace(/(theme)--\w+/g, '')
+
+    html.classList.add(`theme--${theme}`)
+  }
+}
+
+function updateSystemBackground(theme: ThemeName) {
+  switch (theme) {
+    case 'light':
+      SystemUI.setBackgroundColorAsync(light.atoms.bg.backgroundColor)
+      break
+    case 'dark':
+      SystemUI.setBackgroundColorAsync(dark.atoms.bg.backgroundColor)
+      break
+    case 'dim':
+      SystemUI.setBackgroundColorAsync(dim.atoms.bg.backgroundColor)
+      break
+  }
 }