theme [nfc]: Rename internally from default/night to light/dark

This resolves part of #5169: we rename the values in the internal
ThemeName type, and various local identifiers.

Still open from #5169 is to rename what we actually show to the user
in the settings UI, and the ThemeSetting values that reflect that.

Author: BigHeadCreations

src/boot/OfflineNoticeProvider.js

@@ -140,7 +140,7 @@ const backgroundColorForTheme = (theme: ThemeName): string =>
   // TODO(redesign): Choose these more intentionally; these are just the
   //   semitransparent HALF_COLOR flattened with themeData.backgroundColor.
   //   See https://github.com/zulip/zulip-mobile/pull/5491#issuecomment-1282859332
-  theme === 'default' ? '#bfbfbf' : '#50565e';
+  theme === 'light' ? '#bfbfbf' : '#50565e';
 
 /**
  * Shows a notice if the app is working in offline mode.

src/common/Popup.js

@@ -51,7 +51,7 @@ export default function Popup(props: Props): Node {
   const themeToUse = getThemeToUse(theme, osScheme);
 
   // TODO(color/theme): find a cleaner way to express this
-  const isDarkTheme = themeToUse !== 'default';
+  const isDarkTheme = themeToUse !== 'light';
   return (
     <View style={[{ backgroundColor: themeContext.backgroundColor }, styles.popup]}>
       <View style={isDarkTheme && styles.overlay}>{props.children}</View>

src/common/ZulipStatusBar.js

@@ -15,7 +15,7 @@ import { getThemeToUse } from '../settings/settingsSelectors';
 type BarStyle = React$ElementConfig<typeof StatusBar>['barStyle'];
 
 export const getStatusBarColor = (backgroundColor: string | void, theme: ThemeName): string =>
-  backgroundColor ?? (theme === 'night' ? 'hsl(212, 28%, 18%)' : 'white');
+  backgroundColor ?? (theme === 'dark' ? 'hsl(212, 28%, 18%)' : 'white');
 
 export const getStatusBarStyle = (statusBarColor: string): BarStyle =>
   foregroundColorFromBackground(statusBarColor) === 'white' /* force newline */

src/common/__tests__/getStatusBarColor-test.js

@@ -1,17 +1,17 @@
 /* @flow strict-local */
 import { getStatusBarColor } from '../ZulipStatusBar';
 
-const themeNight = 'night';
-const themeDefault = 'default';
+const themeDark = 'dark';
+const themeLight = 'light';
 
 describe('getStatusBarColor', () => {
   test('returns specific color when given, regardless of theme', () => {
-    expect(getStatusBarColor('#fff', themeDefault)).toEqual('#fff');
-    expect(getStatusBarColor('#fff', themeNight)).toEqual('#fff');
+    expect(getStatusBarColor('#fff', themeLight)).toEqual('#fff');
+    expect(getStatusBarColor('#fff', themeDark)).toEqual('#fff');
   });
 
   test('returns color according to theme for default case', () => {
-    expect(getStatusBarColor(undefined, themeDefault)).toEqual('white');
-    expect(getStatusBarColor(undefined, themeNight)).toEqual('hsl(212, 28%, 18%)');
+    expect(getStatusBarColor(undefined, themeLight)).toEqual('white');
+    expect(getStatusBarColor(undefined, themeDark)).toEqual('hsl(212, 28%, 18%)');
   });
 });

src/nav/ZulipNavigationContainer.js

@@ -40,11 +40,11 @@ export default function ZulipAppContainer(props: Props): Node {
 
   const themeContext = useContext(ThemeContext);
 
-  const BaseTheme = themeToUse === 'night' ? DarkTheme : DefaultTheme;
+  const BaseTheme = themeToUse === 'dark' ? DarkTheme : DefaultTheme;
 
   const theme = {
     ...BaseTheme,
-    dark: themeToUse === 'night',
+    dark: themeToUse === 'dark',
     colors: {
       ...BaseTheme.colors,
       primary: themeContext.color,

src/reduxTypes.js

@@ -355,7 +355,7 @@ export type RealmState = {|
  * OS theme by calling the React Native hook useColorScheme and pass
  * that to the helper function getThemeToUse.
  */
-export type ThemeName = 'default' | 'night';
+export type ThemeName = 'light' | 'dark';
 
 /**
  * The theme setting.

src/settings/settingsSelectors.js

@@ -3,5 +3,4 @@ import type { ColorSchemeName } from 'react-native/Libraries/Utilities/NativeApp
 import type { ThemeSetting, ThemeName } from '../reduxTypes';
 
 export const getThemeToUse = (theme: ThemeSetting, osScheme: ?ColorSchemeName): ThemeName =>
-  // This is a no-op stub.  We'll give it more interesting behavior soon.
-  theme;
+  theme === 'default' ? 'light' : 'dark';

src/start/IosCompliantAppleAuthButton/Custom.js

@@ -23,21 +23,21 @@ const styles = createStyleSheet({
     borderRadius: 22,
     overflow: 'hidden',
   },
-  nightFrame: {
+  darkFrame: {
     backgroundColor: 'black',
   },
-  dayFrame: {
+  lightFrame: {
     backgroundColor: 'white',
     borderWidth: 1.5,
     borderColor: 'black',
   },
   text: {
     fontSize: 16,
   },
-  nightText: {
+  darkText: {
     color: 'white',
   },
-  dayText: {
+  lightText: {
     color: 'black',
   },
 });
@@ -57,13 +57,13 @@ type Props = $ReadOnly<{|
  */
 export default function Custom(props: Props): Node {
   const { style, onPress, theme } = props;
-  const logoSource = theme === 'default' ? appleLogoBlackImg : appleLogoWhiteImg;
+  const logoSource = theme === 'light' ? appleLogoBlackImg : appleLogoWhiteImg;
   const frameStyle = [
     styles.frame,
-    theme === 'default' ? styles.dayFrame : styles.nightFrame,
+    theme === 'light' ? styles.lightFrame : styles.darkFrame,
     style,
   ];
-  const textStyle = [styles.text, theme === 'default' ? styles.dayText : styles.nightText];
+  const textStyle = [styles.text, theme === 'light' ? styles.lightText : styles.darkText];
 
   return (
     <View style={frameStyle}>

src/start/IosCompliantAppleAuthButton/index.js

@@ -60,7 +60,7 @@ export default function IosCompliantAppleAuthButton(props: Props): Node {
       <AppleAuthentication.AppleAuthenticationButton
         buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
         buttonStyle={
-          themeToUse === 'default'
+          themeToUse === 'light'
             ? AppleAuthentication.AppleAuthenticationButtonStyle.WHITE_OUTLINE
             : AppleAuthentication.AppleAuthenticationButtonStyle.BLACK
         }

src/styles/theme.js

@@ -12,9 +12,9 @@ export type ThemeData = {|
   dividerColor: string,
 |};
 
-export const themeData: {| [name: ThemeName | 'light']: ThemeData |} = {
-  night: {
-    themeName: 'night',
+export const themeData: {| [name: ThemeName]: ThemeData |} = {
+  dark: {
+    themeName: 'dark',
     color: 'hsl(210, 11%, 85%)',
     backgroundColor: 'hsl(212, 28%, 18%)',
     cardColor: 'hsl(212, 31%, 21%)',
@@ -23,7 +23,7 @@ export const themeData: {| [name: ThemeName | 'light']: ThemeData |} = {
     dividerColor: 'hsla(0, 0%, 100%, 0.12)',
   },
   light: {
-    themeName: 'default',
+    themeName: 'light',
     color: 'hsl(0, 0%, 20%)',
     backgroundColor: 'white',
     cardColor: 'hsl(0, 0%, 97%)',
@@ -32,6 +32,5 @@ export const themeData: {| [name: ThemeName | 'light']: ThemeData |} = {
     dividerColor: 'hsla(0, 0%, 0%, 0.12)',
   },
 };
-themeData.default = themeData.light;
 
-export const ThemeContext: Context<ThemeData> = React.createContext(themeData.default);
+export const ThemeContext: Context<ThemeData> = React.createContext(themeData.light);