settings: Rename 'night mode' to 'dark theme'

Fixes: zulip#5169
Changed night mode to dark theme. Added tests, migrations, and updated comments.

Author: aritroCoder

src/emoji/codePointMap.js

@@ -20,15 +20,15 @@ export const override: {| [code: string]: string |} = {
 
   // Fix the "letter" emoji.  The codes in Zulip's emoji database would give
   // these a text-style rather than emoji-style presentation; that's subtler
-  // than we want, plus when not in night mode it's actually invisible.
+  // than we want, plus when not in dark theme it's actually invisible.
   '1f170': '1f170-fe0f', // :a:
   '1f171': '1f171-fe0f', // :b:
   '1f17e': '1f17e-fe0f', // :o:
   '1f17f': '1f17f-fe0f', // :p:
   // (Zulip only actually offers a handful of these letter emoji.)
 
   // :check_mark: -> :check: because the former is invisible on a light
-  // background, i.e. when not in night mode.
+  // background, i.e. when not in Dark theme.
   '2714': '2705',
 };
 

src/reduxTypes.js

@@ -372,7 +372,7 @@ export type ThemeName = 'light' | 'dark';
  * To determine the actual theme to show the user, use a ThemeName;
  * see there for details.
  */
-export type ThemeSetting = 'default' | 'night';
+export type ThemeSetting = 'default' | '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 === 'default' ? 'dark' : 'default' }));
   }, [theme, dispatch]);
 
   return (
     <Screen title="Settings">
-      <SwitchRow label="Night mode" value={theme === 'night'} onValueChange={handleThemeChange} />
+      <SwitchRow label="Dark theme" value={theme === 'dark'} onValueChange={handleThemeChange} />
       <SwitchRow
         label="Open links with in-app browser"
         value={shouldUseInAppBrowser(browser)}

src/settings/__tests__/settingsReducer-test.js

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

src/storage/__tests__/migrations-test.js

@@ -104,7 +104,7 @@ describe('migrations', () => {
   // What `base` becomes after all migrations.
   const endBase = {
     ...base52,
-    migrations: { version: 56 },
+    migrations: { version: 57 },
   };
 
   for (const [desc, before, after] of [
@@ -278,6 +278,20 @@ describe('migrations', () => {
       },
       { ...endBase, settings: { ...endBase.settings, markMessagesReadOnScroll: 'never' } },
     ],
+    [
+      "check 57 with 'night'",
+      { ...base52, migrations: { version: 56 }, settings: { ...base52.settings, theme: 'night' } },
+      { ...endBase, settings: { ...endBase.settings, theme: 'dark' } },
+    ],
+    [
+      "check 57 with 'default'",
+      {
+        ...base52,
+        migrations: { version: 56 },
+        settings: { ...base52.settings, theme: 'default' },
+      },
+      { ...endBase, settings: { ...endBase.settings, theme: 'default' } },
+    ],
   ]) {
     /* eslint-disable no-loop-func */
     test(desc, async () => {

src/storage/migrations.js

@@ -472,6 +472,12 @@ const migrationsInner: {| [string]: (LessPartialState) => LessPartialState |} =
   // Add presenceEnabled to state.realm.
   '56': dropCache,
 
+  // Rename 'night' to 'dark' in state.settings.theme
+  '57': state => ({
+    ...state,
+    settings: { ...state.settings, theme: state.settings.theme === 'night' ? 'dark' : 'default' },
+  }),
+
   // TIP: When adding a migration, consider just using `dropCache`.
   //   (See its jsdoc for guidance on when that's the right answer.)
 };

static/translations/messages_en.json

@@ -162,7 +162,7 @@
   "Learn more": "Learn more",
   "Full profile": "Full profile",
   "Settings": "Settings",
-  "Night mode": "Night mode",
+  "Dark theme": "Dark theme",
   "Open links with in-app browser": "Open links with in-app browser",
   "Language": "Language",
   "Arabic": "Arabic",