Theme: Fix - Replace null with unspecified to standardize system default handling

index.js

@@ -205,7 +205,7 @@ const AppWrapper = () => {
 
     const subscription = Appearance.addChangeListener(
       ({colorScheme: newScheme}) => {
-        if (colorScheme === null) {
+        if (!colorScheme || colorScheme === 'unspecified') {
           setIsDark(newScheme === 'dark');
         }
       },

src/Root.tsx

@@ -297,7 +297,10 @@ const StartupGate = () => {
   const appColorScheme = useAppSelector(({APP}) => APP.colorScheme);
   const hasRoutedRef = useRef(false);
 
-  const scheme = appColorScheme || Appearance.getColorScheme();
+  const scheme =
+    !appColorScheme || appColorScheme === 'unspecified'
+      ? Appearance.getColorScheme()
+      : appColorScheme;
   const theme = scheme === 'dark' ? BitPayDarkTheme : BitPayLightTheme;
 
   useEffect(() => {
@@ -692,7 +695,10 @@ export default () => {
     patchLogger(Logger);
   }, []);
 
-  const scheme = appColorScheme || Appearance.getColorScheme();
+  const scheme =
+    !appColorScheme || appColorScheme === 'unspecified'
+      ? Appearance.getColorScheme()
+      : appColorScheme;
   const theme = scheme === 'dark' ? BitPayDarkTheme : BitPayLightTheme;
 
   return (

src/navigation/tabs/settings/general/screens/Theme.tsx

@@ -91,10 +91,13 @@ const ThemeSettings: React.FC<Props> = ({navigation}) => {
 
   const onSetThemePress = (setScheme: ColorSchemeName) => {
     dispatch(AppActions.setColorScheme(setScheme));
-    logManager.info('Theme updated to ' + (setScheme || 'system default'));
+    logManager.info(
+      'Theme updated to ' +
+        (setScheme === 'unspecified' ? 'system default' : setScheme),
+    );
     dispatch(
       Analytics.track('Saved Theme', {
-        theme: setScheme || 'system default',
+        theme: setScheme === 'unspecified' ? 'system default' : setScheme,
       }),
     );
   };
@@ -120,12 +123,12 @@ const ThemeSettings: React.FC<Props> = ({navigation}) => {
           />
         </Setting>
         <Hr />
-        <Setting onPress={() => onSetThemePress(null)}>
+        <Setting onPress={() => onSetThemePress('unspecified')}>
           <SettingTitle>{t('System Default')}</SettingTitle>
           <Checkbox
             radio
-            onPress={() => onSetThemePress(null)}
-            checked={currentTheme === null}
+            onPress={() => onSetThemePress('unspecified')}
+            checked={!currentTheme || currentTheme === 'unspecified'}
           />
         </Setting>
       </View>

src/store/app/app.reducer.ts

@@ -227,7 +227,7 @@ const initialState: AppState = {
   currentSalt: undefined,
   pinBannedUntil: undefined,
   showBlur: false,
-  colorScheme: null as unknown as ColorSchemeName,
+  colorScheme: 'unspecified',
   defaultLanguage: i18n.language || 'en',
   showPortfolioValue: true,
   hideAllBalances: false,

src/store/wallet/effects/import/import.ts

@@ -388,7 +388,11 @@ export const startMigration =
         if (theme) {
           dispatch(
             setColorScheme(
-              theme.system ? null : theme.name === 'light' ? 'light' : 'dark',
+              theme.system
+                ? 'unspecified'
+                : theme.name === 'light'
+                ? 'light'
+                : 'dark',
             ),
           );
         }