Add theme selection with Light/Dark/System options

Replace the simple light mode toggle with a theme selector that includes
a System option. System mode detects and follows the OS color scheme
preference and updates automatically when the system preference changes.

Author: Jon Tzeng

src/__tests__/scenes/__snapshots__/SettingsScene.test.tsx.snap

@@ -5265,206 +5265,6 @@ exports[`SettingsScene should render SettingsScene 1`] = `
                 </View>
               </View>
             </View>
-            <BVLinearGradient
-              colors={
-                [
-                  452984831,
-                  452984831,
-                ]
-              }
-              endPoint={
-                {
-                  "x": 1,
-                  "y": 0.5,
-                }
-              }
-              locations={null}
-              startPoint={
-                {
-                  "x": 0,
-                  "y": 0.5,
-                }
-              }
-              style={
-                [
-                  {
-                    "borderBottomColor": "rgba(255, 255, 255, .1)",
-                    "borderBottomWidth": 1,
-                    "height": 1,
-                  },
-                  {
-                    "margin": 11,
-                  },
-                ]
-              }
-            />
-            <View
-              accessibilityState={
-                {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": false,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
-                {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={false}
-              collapsable={false}
-              focusable={true}
-              hitSlop={11}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                {
-                  "alignItems": "center",
-                  "backgroundColor": "rgba(255, 255, 255, 0)",
-                  "flexDirection": "row",
-                  "marginBottom": 1,
-                  "minHeight": 67,
-                  "opacity": 1,
-                  "padding": 11,
-                }
-              }
-            >
-              <Text
-                allowFontScaling={false}
-                style={
-                  {
-                    "color": "#FFFFFF",
-                    "flexGrow": 1,
-                    "flexShrink": 1,
-                    "fontFamily": "Quicksand-Regular",
-                    "fontSize": 22,
-                    "paddingHorizontal": 11,
-                    "textAlign": "left",
-                  }
-                }
-              >
-                Light Mode
-              </Text>
-              <View>
-                <View
-                  collapsable={false}
-                  jestAnimatedProps={
-                    {
-                      "value": {},
-                    }
-                  }
-                  jestAnimatedStyle={
-                    {
-                      "value": {
-                        "opacity": 0,
-                      },
-                    }
-                  }
-                  jestInlineStyle={
-                    [
-                      {
-                        "aspectRatio": 1,
-                        "position": "absolute",
-                        "width": "100%",
-                        "zIndex": 1,
-                      },
-                    ]
-                  }
-                  nativeID="49"
-                  pending={false}
-                  style={
-                    [
-                      {
-                        "aspectRatio": 1,
-                        "position": "absolute",
-                        "width": "100%",
-                        "zIndex": 1,
-                      },
-                      {
-                        "opacity": 0,
-                      },
-                    ]
-                  }
-                >
-                  <ActivityIndicator
-                    color="#00f1a2"
-                    style={
-                      {
-                        "height": 34,
-                        "marginHorizontal": 11,
-                      }
-                    }
-                  />
-                </View>
-                <View
-                  collapsable={false}
-                  jestAnimatedProps={
-                    {
-                      "value": {},
-                    }
-                  }
-                  jestAnimatedStyle={
-                    {
-                      "value": {
-                        "opacity": 1,
-                      },
-                    }
-                  }
-                  jestInlineStyle={{}}
-                  nativeID="50"
-                  pending={false}
-                  style={
-                    [
-                      {
-                        "opacity": 1,
-                      },
-                    ]
-                  }
-                >
-                  <View
-                    pointerEvents="none"
-                    style={
-                      {
-                        "marginHorizontal": 11,
-                        "padding": 0,
-                      }
-                    }
-                  >
-                    <RCTSwitch
-                      accessibilityRole="switch"
-                      onChange={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      onTintColor="#00f1a2"
-                      style={
-                        [
-                          {
-                            "height": 31,
-                            "width": 51,
-                          },
-                          {
-                            "backgroundColor": "#888888",
-                            "borderRadius": 16,
-                          },
-                        ]
-                      }
-                      tintColor="#888888"
-                      value={false}
-                    />
-                  </View>
-                </View>
-              </View>
-            </View>
           </View>
         </View>
         <BVLinearGradient
@@ -5634,7 +5434,7 @@ exports[`SettingsScene should render SettingsScene 1`] = `
                       },
                     ]
                   }
-                  nativeID="51"
+                  nativeID="49"
                   pending={false}
                   style={
                     [
@@ -5675,7 +5475,7 @@ exports[`SettingsScene should render SettingsScene 1`] = `
                     }
                   }
                   jestInlineStyle={{}}
-                  nativeID="52"
+                  nativeID="50"
                   pending={false}
                   style={
                     [

src/actions/DeviceSettingsActions.ts

@@ -3,7 +3,8 @@ import { makeReactNativeDisklet } from 'disklet'
 import {
   asDeviceSettings,
   type DefaultScreen,
-  type DeviceSettings
+  type DeviceSettings,
+  type ThemeMode
 } from '../types/types'
 
 const disklet = makeReactNativeDisklet()
@@ -71,8 +72,8 @@ export const writeForceLightAccountCreate = async (
   return await writeDeviceSettings(updatedSettings)
 }
 
-export const writeIsLightTheme = async (isLightTheme: boolean) => {
-  return await writeDeviceSettings({ ...deviceSettings, isLightTheme })
+export const writeThemeMode = async (themeMode: ThemeMode) => {
+  return await writeDeviceSettings({ ...deviceSettings, themeMode })
 }
 
 /**

src/app.ts

@@ -9,7 +9,7 @@ import NetInfo from '@react-native-community/netinfo'
 import * as Sentry from '@sentry/react-native'
 import { Buffer } from 'buffer'
 import { asObject, asString } from 'cleaners'
-import { InteractionManager, LogBox } from 'react-native'
+import { Appearance, InteractionManager, LogBox } from 'react-native'
 import { getVersion } from 'react-native-device-info'
 import RNFS from 'react-native-fs'
 
@@ -285,16 +285,37 @@ if (ENV.DEBUG_THEME) {
   })
 }
 
+// Theme initialization and system theme listener
 initDeviceSettings()
   .then(() => {
-    const { isLightTheme } = getDeviceSettings()
-    // Only change theme if light mode is enabled (dark is already the default)
-    if (isLightTheme) {
+    const { themeMode } = getDeviceSettings()
+
+    // Apply theme based on mode setting at startup
+    let shouldUseLightTheme = false
+    if (themeMode === 'light') {
+      shouldUseLightTheme = true
+    } else if (themeMode === 'system') {
+      shouldUseLightTheme = Appearance.getColorScheme() !== 'dark'
+    }
+    // Only change theme if light mode is needed (dark is already the default)
+    if (shouldUseLightTheme) {
       // Defer until after React render cycle completes
       InteractionManager.runAfterInteractions(() => {
         changeTheme(config.lightTheme)
       })
     }
+
+    // Global listener for OS theme changes (active when themeMode is 'system')
+    Appearance.addChangeListener(({ colorScheme }) => {
+      const { themeMode: currentMode } = getDeviceSettings()
+      if (currentMode === 'system') {
+        InteractionManager.runAfterInteractions(() => {
+          const newTheme =
+            colorScheme === 'dark' ? config.darkTheme : config.lightTheme
+          changeTheme(newTheme)
+        })
+      }
+    })
   })
   .catch(err => {
     console.log(err)