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

src/App.native.tsx

@@ -17,7 +17,6 @@ import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {init as initPersistedState} from '#/state/persisted'
 import {listenSessionDropped} from './state/events'
-import {useColorMode} from 'state/shell'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {s} from 'lib/styles'
 import {Shell} from 'view/shell'
@@ -49,10 +48,9 @@ import {useLingui} from '@lingui/react'
 SplashScreen.preventAutoHideAsync()
 
 function InnerApp() {
-  const colorMode = useColorMode()
   const {isInitialLoad, currentAccount} = useSession()
   const {resumeSession} = useSessionApi()
-  const theme = useColorModeTheme(colorMode)
+  const theme = useColorModeTheme()
   const {_} = useLingui()
 
   // init
@@ -75,7 +73,7 @@ function InnerApp() {
             key={currentAccount?.did}>
             <LoggedOutViewProvider>
               <UnreadNotifsProvider>
-                <ThemeProvider theme={colorMode}>
+                <ThemeProvider theme={theme}>
                   {/* All components should be within this provider */}
                   <RootSiblingParent>
                     <GestureHandlerRootView style={s.h100pct}>