Theme switching: Add Theme to User Preferences (No QA)

src/CONST.js

@@ -670,6 +670,10 @@ const CONST = {
         GSD: 'gsd',
         DEFAULT: 'default',
     },
+    COLOR_THEME: {
+        LIGHT: 'light',
+        DARK: 'dark',
+    },
     JSON_CODE: {
         SUCCESS: 200,
         BAD_REQUEST: 400,

src/ONYXKEYS.js

@@ -222,6 +222,9 @@ export default {
     // Whether the auth token is valid
     IS_TOKEN_VALID: 'isTokenValid',
 
+    // The color theme setting defined by the user in preferences
+    COLOR_THEME: 'colorTheme',
+
     // Whether we're checking if the room is public or not
     IS_CHECKING_PUBLIC_ROOM: 'isCheckingPublicRoom',
 

src/ROUTES.js

@@ -31,6 +31,7 @@ export default {
     SETTINGS_PREFERENCES: 'settings/preferences',
     SETTINGS_PRIORITY_MODE: 'settings/preferences/priority-mode',
     SETTINGS_LANGUAGE: 'settings/preferences/language',
+    SETTINGS_COLOR_THEME: 'settings/color-theme',
     SETTINGS_WORKSPACES: 'settings/workspaces',
     SETTINGS_SECURITY: 'settings/security',
     SETTINGS_CLOSE: 'settings/security/closeAccount',

src/languages/en.js

@@ -680,6 +680,17 @@ export default {
             },
         },
     },
+    colorThemePage: {
+        colorTheme: 'Color theme',
+        colorThemes: {
+            dark: {
+                label: 'Dark',
+            },
+            light: {
+                label: 'Light',
+            },
+        },
+    },
     signInPage: {
         expensifyDotCash: 'New Expensify',
         theCode: 'the code',

src/languages/es.js

@@ -682,6 +682,17 @@ export default {
             },
         },
     },
+    colorThemePage: {
+        colorTheme: 'Tema de color',
+        colorThemes: {
+            dark: {
+                label: 'Oscura',
+            },
+            light: {
+                label: 'Ligera',
+            },
+        },
+    },
     signInPage: {
         expensifyDotCash: 'Nuevo Expensify',
         theCode: 'el código',

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -429,6 +429,13 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_Preferences_Language',
     },
+    {
+        getComponent: () => {
+            const SettingsPreferencesColorThemePage = require('../../../pages/settings/Preferences/ColorThemePage').default;
+            return SettingsPreferencesColorThemePage;
+        },
+        name: 'Settings_Preferences_ColorTheme',
+    },
     {
         getComponent: () => {
             const SettingsPasswordPage = require('../../../pages/settings/PasswordPage').default;

src/libs/Navigation/linkingConfig.js

@@ -54,6 +54,10 @@ export default {
                                 path: ROUTES.SETTINGS_LANGUAGE,
                                 exact: true,
                             },
+                            Settings_Preferences_ColorTheme: {
+                                path: ROUTES.SETTINGS_COLOR_THEME,
+                                exact: true,
+                            },
                             Settings_Close: {
                                 path: ROUTES.SETTINGS_CLOSE,
                                 exact: true,

src/libs/actions/App.js

@@ -105,6 +105,42 @@ function setLocaleAndNavigate(locale) {
     Navigation.navigate(ROUTES.SETTINGS_PREFERENCES);
 }
 
+/**
+ * @param {String} colorTheme
+ */
+// eslint-disable-next-line rulesdir/prefer-early-return
+function setColorTheme(colorTheme) {
+    // If user is not signed in, change just locally.
+    if (!currentUserAccountID) {
+        Onyx.set(ONYXKEYS.COLOR_THEME, colorTheme);
+        return;
+    }
+
+    Onyx.set(ONYXKEYS.COLOR_THEME, colorTheme);
+
+    // TODO: Implement this in the backend
+    // // Optimistically change preferred locale
+    // const optimisticData = [
+    //     {
+    //         onyxMethod: CONST.ONYX.METHOD.SET,
+    //         key: ONYXKEYS.COLOR_THEME,
+    //         value: colorTheme,
+    //     },
+    // ];
+
+    // API.write('UpdateColorTheme', {
+    //     value: colorTheme,
+    // }, {optimisticData});
+}
+
+/**
+ * @param {String} colorTheme
+ */
+function setColorThemeAndNavigate(colorTheme) {
+    setColorTheme(colorTheme);
+    Navigation.navigate(ROUTES.SETTINGS_PREFERENCES);
+}
+
 function setSidebarLoaded() {
     if (isSidebarLoaded) {
         return;
@@ -298,4 +334,4 @@ function openProfile(personalDetails) {
     );
 }
 
-export {setLocale, setLocaleAndNavigate, setSidebarLoaded, setUpPoliciesAndNavigate, openProfile, openApp, reconnectApp, confirmReadyToOpenApp};
+export {setLocale, setLocaleAndNavigate, setSidebarLoaded, setColorThemeAndNavigate, setUpPoliciesAndNavigate, openProfile, openApp, reconnectApp, confirmReadyToOpenApp};

src/pages/settings/Preferences/ColorThemePage.js

@@ -0,0 +1,81 @@
+import _ from 'underscore';
+import React from 'react';
+import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
+import ScreenWrapper from '../../../components/ScreenWrapper';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
+import OptionsList from '../../../components/OptionsList';
+import styles from '../../../styles/styles';
+import themeColors from '../../../styles/themes/default';
+import * as Expensicons from '../../../components/Icon/Expensicons';
+import * as App from '../../../libs/actions/App';
+import ONYXKEYS from '../../../ONYXKEYS';
+import CONST from '../../../CONST';
+import compose from '../../../libs/compose';
+
+const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
+
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    /** The color theme of the App */
+    colorTheme: PropTypes.string,
+};
+
+const defaultProps = {
+    colorTheme: CONST.COLOR_THEME.LIGHT,
+};
+
+function ColorThemePage(props) {
+    const localesToColorThemes = _.map(props.translate('colorThemePage.colorThemes'), (colorTheme, key) => ({
+        value: key,
+        text: colorTheme.label,
+        keyForList: key,
+
+        // Include the green checkmark icon to indicate the currently selected value
+        customIcon: props.colorTheme === key ? greenCheckmark : undefined,
+
+        // This property will make the currently selected value have bold text
+        boldStyle: props.colorTheme === key,
+    }));
+
+    return (
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <HeaderWithBackButton
+                title={props.translate('colorThemePage.colorTheme')}
+                shouldShowBackButton
+                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PREFERENCES)}
+                onCloseButtonPress={() => Navigation.dismissModal(true)}
+            />
+            <OptionsList
+                sections={[{data: localesToColorThemes}]}
+                onSelectRow={(colorTheme) => App.setColorThemeAndNavigate(colorTheme.value)}
+                hideSectionHeaders
+                optionHoveredStyle={{
+                    ...styles.hoveredComponentBG,
+                    ...styles.mhn5,
+                    ...styles.ph5,
+                }}
+                shouldHaveOptionSeparator
+                shouldDisableRowInnerPadding
+                contentContainerStyles={[styles.ph5]}
+            />
+        </ScreenWrapper>
+    );
+}
+
+ColorThemePage.displayName = 'ColorThemePage';
+ColorThemePage.propTypes = propTypes;
+ColorThemePage.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withOnyx({
+        colorTheme: {
+            key: ONYXKEYS.COLOR_THEME,
+        },
+    }),
+)(ColorThemePage);