theme: Update naming for night/dark, default/light

As mentioned in issue #4009, this changes how the theme of the app
is described. It changes all instances of 'default' to 'light' and
'night' to 'dark'.

Fixes #5169.

Author: BigHeadCreations

src/common/Popup.js

@@ -46,7 +46,7 @@ type Props = $ReadOnly<{|
 export default function Popup(props: Props): Node {
   const themeContext = useContext(ThemeContext);
   // TODO(color/theme): find a cleaner way to express this
-  const isDarkTheme = useGlobalSelector(state => getGlobalSettings(state).theme !== 'default');
+  const isDarkTheme = useGlobalSelector(state => getGlobalSettings(state).theme !== 'light');
   return (
     <View style={[{ backgroundColor: themeContext.backgroundColor }, styles.popup]}>
       <View style={isDarkTheme && styles.overlay}>{props.children}</View>

src/common/ZulipStatusBar.js

@@ -14,7 +14,7 @@ import { getGlobalSession, getGlobalSettings } from '../selectors';
 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

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

src/reduxTypes.js

@@ -349,7 +349,7 @@ export type RealmState = {|
 // TODO: Stop using the 'default' name. Any 'default' semantics should
 // only apply the device level, not within the app. See
 // https://github.com/zulip/zulip-mobile/issues/4009#issuecomment-619280681.
-export type ThemeName = 'default' | 'night';
+export type ThemeName = 'light' | 'dark';
 
 /** What browser the user has set to use for opening links in messages.
  *

src/settings/SettingsScreen.js

@@ -35,12 +35,12 @@ export default function SettingsScreen(props: Props): Node {
   const { navigation } = props;
 
   const handleThemeChange = useCallback(() => {
-    dispatch(setGlobalSettings({ theme: theme === 'default' ? 'night' : 'default' }));
+    dispatch(setGlobalSettings({ theme: theme === 'light' ? 'dark' : 'light' }));
   }, [theme, dispatch]);
 
   return (
     <Screen title="Settings">
-      <SwitchRow label="Night mode" value={theme === 'night'} onValueChange={handleThemeChange} />
+      <SwitchRow label="Dark mode" value={theme === 'dark'} onValueChange={handleThemeChange} />
       <SwitchRow
         label="Open links with in-app browser"
         value={shouldUseInAppBrowser(browser)}

src/settings/__tests__/settingsReducer-test.js

@@ -76,12 +76,12 @@ describe('settingsReducer', () => {
     test('changes value of a key', () => {
       const action = deepFreeze({
         type: SET_GLOBAL_SETTINGS,
-        update: { theme: 'night' },
+        update: { theme: 'dark' },
       });
 
       const expectedState = {
         ...baseState,
-        theme: 'night',
+        theme: 'dark',
       };
 
       const actualState = settingsReducer(baseState, action);

src/settings/settingsReducer.js

@@ -15,7 +15,7 @@ const initialState: SettingsState = {
   //
 
   language: 'en',
-  theme: 'default',
+  theme: 'light',
   browser: 'default',
   experimentalFeaturesEnabled: false,
   markMessagesReadOnScroll: 'always',

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

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