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.web.tsx

@@ -10,7 +10,6 @@ import 'view/icons'
 import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {init as initPersistedState} from '#/state/persisted'
-import {useColorMode} from 'state/shell'
 import {Shell} from 'view/shell/index'
 import {ToastContainer} from 'view/com/util/Toast.web'
 import {ThemeProvider} from 'lib/ThemeContext'
@@ -36,8 +35,7 @@ import {Provider as PortalProvider} from '#/components/Portal'
 function InnerApp() {
   const {isInitialLoad, currentAccount} = useSession()
   const {resumeSession} = useSessionApi()
-  const colorMode = useColorMode()
-  const theme = useColorModeTheme(colorMode)
+  const theme = useColorModeTheme()
 
   // init
   useEffect(() => {
@@ -55,7 +53,7 @@ function InnerApp() {
         key={currentAccount?.did}>
         <LoggedOutViewProvider>
           <UnreadNotifsProvider>
-            <ThemeProvider theme={colorMode}>
+            <ThemeProvider theme={theme}>
               {/* All components should be within this provider */}
               <RootSiblingParent>
                 <SafeAreaProvider>