Feat: Use system default color mode, but allow user override

6 files changed, 59 insertions, 35 deletions

diff --git a/src/App.native.tsx b/src/App.native.tsx
index 66722dc15..afab82368 100644
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@@ -51,7 +51,7 @@ const App = observer(() => {
     return null
   }
   return (
-    <ThemeProvider theme={rootStore.shell.darkMode ? 'dark' : 'light'}>
+    <ThemeProvider theme={rootStore.shell.colorMode}>
       <RootSiblingParent>
         <analytics.Provider>
           <RootStoreProvider value={rootStore}>
diff --git a/src/App.web.tsx b/src/App.web.tsx
index 429328276..7570db44e 100644
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@@ -30,7 +30,7 @@ const App = observer(() => {
   }
 
   return (
-    <ThemeProvider theme={rootStore.shell.darkMode ? 'dark' : 'light'}>
+    <ThemeProvider theme={rootStore.shell.colorMode}>
       <RootSiblingParent>
         <analytics.Provider>
           <RootStoreProvider value={rootStore}>
diff --git a/src/lib/ThemeContext.tsx b/src/lib/ThemeContext.tsx
index ef17c1e7a..251e04e50 100644
--- a/src/lib/ThemeContext.tsx
+++ b/src/lib/ThemeContext.tsx
@@ -89,10 +89,13 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   theme,
   children,
 }) => {
-  const colorScheme = useColorScheme()
+  const colorSchemeFromRN = useColorScheme()
+
+  // if theme is 'system', use the device's configured color scheme
+  let colorScheme = theme === 'system' ? colorSchemeFromRN : theme
 
   const value = useMemo(
-    () => ((theme || colorScheme) === 'dark' ? darkTheme : defaultTheme),
+    () => (colorScheme === 'dark' ? darkTheme : defaultTheme),
     [colorScheme, theme],
   )
 
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index 9b9a176be..187342ec3 100644
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@@ -189,7 +189,7 @@ export interface ComposerOpts {
 }
 
 export class ShellUiModel {
-  darkMode = false
+  colorMode = 'system'
   minimalShellMode = false
   isDrawerOpen = false
   isDrawerSwipeDisabled = false
@@ -210,20 +210,20 @@ export class ShellUiModel {
 
   serialize(): unknown {
     return {
-      darkMode: this.darkMode,
+      colorMode: this.colorMode,
     }
   }
 
   hydrate(v: unknown) {
     if (isObj(v)) {
-      if (hasProp(v, 'darkMode') && typeof v.darkMode === 'boolean') {
-        this.darkMode = v.darkMode
+      if (hasProp(v, 'colorMode') && typeof v.colorMode === 'string') {
+        this.colorMode = v.colorMode
       }
     }
   }
 
-  setDarkMode(v: boolean) {
-    this.darkMode = v
+  setColorMode(mode: string) {
+    this.colorMode = mode
   }
 
   setMinimalShellMode(v: boolean) {
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index d595bc524..ea2153789 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -53,6 +53,19 @@ export const DrawerContent = observer(() => {
 
   const {notifications} = store.me
 
+  const colorModes = ['light', 'dark', 'system']
+  const modeAccessibilityText = {
+    light: 'Sets display to light mode',
+    dark: 'Sets display to dark mode',
+    system: 'Sets display to system default',
+  }
+
+  const nextColorMode = () => {
+    return colorModes[
+      (colorModes.indexOf(store.shell.colorMode) + 1) % colorModes.length
+    ]
+  }
+
   // events
   // =
 
@@ -112,9 +125,9 @@ export const DrawerContent = observer(() => {
     Linking.openURL(FEEDBACK_FORM_URL)
   }, [track])
 
-  const onDarkmodePress = React.useCallback(() => {
-    track('Menu:ItemClicked', {url: '#darkmode'})
-    store.shell.setDarkMode(!store.shell.darkMode)
+  const onColorModePress = React.useCallback(() => {
+    track('Menu:ItemClicked', {url: '#cycleColorMode'})
+    store.shell.setColorMode(nextColorMode())
   }, [track, store])
 
   // rendering
@@ -280,13 +293,9 @@ export const DrawerContent = observer(() => {
           {!isWeb && (
             <TouchableOpacity
               accessibilityRole="button"
-              accessibilityLabel="Toggle dark mode"
-              accessibilityHint={
-                theme.colorScheme === 'dark'
-                  ? 'Sets display to light mode'
-                  : 'Sets display to dark mode'
-              }
-              onPress={onDarkmodePress}
+              accessibilityLabel="Cycle color mode"
+              accessibilityHint={modeAccessibilityText[store.shell.colorMode]}
+              onPress={onColorModePress}
               style={[
                 styles.footerBtn,
                 theme.colorScheme === 'light'
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index d6663ce3d..084e95607 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/src/view/shell/desktop/RightNav.tsx
@@ -17,10 +17,26 @@ import {formatCount} from 'view/com/util/numeric/format'
 export const DesktopRightNav = observer(function DesktopRightNav() {
   const store = useStores()
   const pal = usePalette('default')
-  const mode = useColorSchemeStyle('Light', 'Dark')
+  const colorModes = ['light', 'dark', 'system']
+  const modeAccessibilityText = {
+    light: 'Sets display to light mode',
+    dark: 'Sets display to dark mode',
+    system: 'Sets display to system default',
+  }
+  const modeHelpText = {
+    light: 'Light Theme',
+    dark: 'Dark Theme',
+    system: 'System Default Theme',
+  }
 
-  const onDarkmodePress = React.useCallback(() => {
-    store.shell.setDarkMode(!store.shell.darkMode)
+  const nextColorMode = () => {
+    return colorModes[
+      (colorModes.indexOf(store.shell.colorMode) + 1) % colorModes.length
+    ]
+  }
+
+  const onModePress = React.useCallback(() => {
+    store.shell.setColorMode(nextColorMode())
   }, [store])
 
   return (
@@ -61,20 +77,16 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
       <InviteCodes />
       <View>
         <TouchableOpacity
-          style={[styles.darkModeToggle]}
-          onPress={onDarkmodePress}
+          style={[styles.cycleColorModeToggle]}
+          onPress={onModePress}
           accessibilityRole="button"
-          accessibilityLabel="Toggle dark mode"
-          accessibilityHint={
-            mode === 'Dark'
-              ? 'Sets display to light mode'
-              : 'Sets display to dark mode'
-          }>
-          <View style={[pal.viewLight, styles.darkModeToggleIcon]}>
+          accessibilityLabel="Cycle color mode"
+          accessibilityHint={modeAccessibilityText[nextColorMode()]}>
+          <View style={[pal.viewLight, styles.cycleColorModeToggleIcon]}>
             <MoonIcon size={18} style={pal.textLight} />
           </View>
           <Text type="sm" style={pal.textLight}>
-            {mode} mode
+            {modeHelpText[store.shell.colorMode]}
           </Text>
         </TouchableOpacity>
       </View>
@@ -148,13 +160,13 @@ const styles = StyleSheet.create({
     marginRight: 6,
   },
 
-  darkModeToggle: {
+  cycleColorModeToggle: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 8,
     marginHorizontal: 12,
   },
-  darkModeToggleIcon: {
+  cycleColorModeToggleIcon: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',