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

2 files changed, 51 insertions, 9 deletions

diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index 17e4b45c5..104506576 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -40,8 +40,8 @@ import {RQKEY as RQKEY_PROFILE} from '#/state/queries/profile'
 import {useModalControls} from '#/state/modals'
 import {
   useSetMinimalShellMode,
-  useColorMode,
-  useSetColorMode,
+  useThemePrefs,
+  useSetThemePrefs,
   useOnboardingDispatch,
 } from '#/state/shell'
 import {
@@ -144,8 +144,8 @@ function SettingsAccountCard({account}: {account: SessionAccount}) {
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'>
 export function SettingsScreen({}: Props) {
   const queryClient = useQueryClient()
-  const colorMode = useColorMode()
-  const setColorMode = useSetColorMode()
+  const {colorMode, darkTheme} = useThemePrefs()
+  const {setColorMode, setDarkTheme} = useSetThemePrefs()
   const pal = usePalette('default')
   const {_} = useLingui()
   const setMinimalShellMode = useSetMinimalShellMode()
@@ -483,8 +483,36 @@ export function SettingsScreen({}: Props) {
             />
           </View>
         </View>
+
         <View style={styles.spacer20} />
 
+        {colorMode !== 'light' && (
+          <>
+            <Text type="xl-bold" style={[pal.text, styles.heading]}>
+              <Trans>Dark Theme</Trans>
+            </Text>
+            <View>
+              <View style={[styles.linkCard, pal.view, styles.selectableBtns]}>
+                <SelectableBtn
+                  selected={!darkTheme || darkTheme === 'dim'}
+                  label={_(msg`Dim`)}
+                  left
+                  onSelect={() => setDarkTheme('dim')}
+                  accessibilityHint={_(msg`Set dark theme to the dim theme`)}
+                />
+                <SelectableBtn
+                  selected={darkTheme === 'dark'}
+                  label={_(msg`Dark`)}
+                  right
+                  onSelect={() => setDarkTheme('dark')}
+                  accessibilityHint={_(msg`Set dark theme to the dark theme`)}
+                />
+              </View>
+            </View>
+            <View style={styles.spacer20} />
+          </>
+        )}
+
         <Text type="xl-bold" style={[pal.text, styles.heading]}>
           <Trans>Basics</Trans>
         </Text>
diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx
index d8898f20e..40929555e 100644
--- a/src/view/screens/Storybook/index.tsx
+++ b/src/view/screens/Storybook/index.tsx
@@ -3,7 +3,7 @@ import {View} from 'react-native'
 import {CenteredView, ScrollView} from '#/view/com/util/Views'
 
 import {atoms as a, useTheme, ThemeProvider} from '#/alf'
-import {useSetColorMode} from '#/state/shell'
+import {useSetThemePrefs} from '#/state/shell'
 import {Button} from '#/components/Button'
 
 import {Theming} from './Theming'
@@ -19,7 +19,7 @@ import {Icons} from './Icons'
 
 export function Storybook() {
   const t = useTheme()
-  const setColorMode = useSetColorMode()
+  const {setColorMode, setDarkTheme} = useSetThemePrefs()
 
   return (
     <ScrollView>
@@ -38,7 +38,7 @@ export function Storybook() {
               variant="solid"
               color="secondary"
               size="small"
-              label='Set theme to "system"'
+              label='Set theme to "light"'
               onPress={() => setColorMode('light')}>
               Light
             </Button>
@@ -46,8 +46,22 @@ export function Storybook() {
               variant="solid"
               color="secondary"
               size="small"
-              label='Set theme to "system"'
-              onPress={() => setColorMode('dark')}>
+              label='Set theme to "dim"'
+              onPress={() => {
+                setColorMode('dark')
+                setDarkTheme('dim')
+              }}>
+              Dim
+            </Button>
+            <Button
+              variant="solid"
+              color="secondary"
+              size="small"
+              label='Set theme to "dark"'
+              onPress={() => {
+                setColorMode('dark')
+                setDarkTheme('dark')
+              }}>
               Dark
             </Button>
           </View>