Make the Switch to Dark Mode

android/app/src/main/res/values/colors.xml

@@ -1,5 +1,5 @@
 <resources>
-    <color name="bootsplash_background">#FFFFFF</color>
+    <color name="bootsplash_background">#061B09</color>
     <color name="white">#FFFFFF</color>
     <color name="accent">#0185ff</color>
     <color name="dark">#0b1b34</color>

ios/NewExpensify/BootSplash.storyboard

@@ -24,7 +24,7 @@
                             </imageView>
                         </subviews>
                         <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
-                        <color key="backgroundColor" red="1.00000000000000" green="1.00000000000000" blue="1.00000000000000" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <color key="backgroundColor" red="249.00000000000000" green="228.00000000000000" blue="246.00000000000000" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <accessibility key="accessibilityConfiguration">
                             <accessibilityTraits key="traits" notEnabled="YES"/>
                         </accessibility>

src/components/Checkbox.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {View, Pressable} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
 import stylePropTypes from '../styles/stylePropTypes';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -112,7 +113,7 @@ class Checkbox extends React.Component {
                                 this.state.isFocused && styles.borderColorFocus,
                             ]}
                         >
-                            <Icon src={Expensicons.Checkmark} fill="white" height={14} width={14} />
+                            {this.props.isChecked && <Icon src={Expensicons.Checkmark} fill={themeColors.textLight} height={14} width={14} />}
                         </View>
                     )}
             </Pressable>

src/components/CustomStatusBar/index.android.js

@@ -7,7 +7,7 @@ import {StatusBar} from 'react-native';
 
 export default class CustomStatusBar extends React.Component {
     componentDidMount() {
-        StatusBar.setBarStyle('dark-content');
+        StatusBar.setBarStyle('light-content');
         StatusBar.setBackgroundColor('transparent');
         StatusBar.setTranslucent(true);
     }

src/components/CustomStatusBar/index.js

@@ -3,7 +3,7 @@ import {StatusBar} from 'react-native';
 
 export default class CustomStatusBar extends React.Component {
     componentDidMount() {
-        StatusBar.setBarStyle('dark-content', true);
+        StatusBar.setBarStyle('light-content', true);
     }
 
     render() {

src/pages/home/report/FloatingMessageCounter/index.js

@@ -79,7 +79,7 @@ class FloatingMessageCounter extends PureComponent {
                             onPress={this.props.onClick}
                             ContentComponent={() => (
                                 <View style={[styles.flexRow]}>
-                                    <Icon small src={Expensicons.DownArrow} fill={themeColors.textReversed} />
+                                    <Icon small src={Expensicons.DownArrow} fill={themeColors.textLight} />
                                     <Text
                                         selectable={false}
                                         style={[

src/pages/workspace/WorkspacesListPage.js

@@ -122,7 +122,7 @@ class WorkspacesListPage extends Component {
                 iconType: policy.avatar ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON,
                 action: () => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policy.id)),
                 iconStyles: policy.avatar ? [] : [styles.popoverMenuIconEmphasized],
-                iconFill: themeColors.iconReversed,
+                iconFill: themeColors.textLight,
                 fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
                 brickRoadIndicator: PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, this.props.policyMembers),
                 pendingAction: policy.pendingAction,

src/styles/styles.js

@@ -2149,7 +2149,7 @@ const styles = {
     },
 
     checkedContainer: {
-        backgroundColor: themeColors.link,
+        backgroundColor: themeColors.checkBox,
     },
 
     iouAmountText: {

src/styles/themes/default.js

@@ -55,8 +55,10 @@ const darkTheme = {
     placeholderText: colors.greenIcons,
     heroCard: colors.blue,
     uploadPreviewActivityIndicator: colors.greenHighlightBackground,
+    checkBox: colors.green,
 };
 
+// DEPRECATED THEME, Delete after successful rebranding.
 const oldTheme = {
     shadow: colors.black,
     link: colors.blue,
@@ -96,6 +98,7 @@ const oldTheme = {
     uploadPreviewActivityIndicator: colors.gray1,
     cardBG: colors.gray1,
     cardBorder: colors.gray1,
+    checkBox: colors.blue,
 
     // Merging new Keys for Dark Mode merge. Delete after new branding is implemented.
     highlightBG: colors.gray1,
@@ -113,4 +116,4 @@ const oldTheme = {
     textDark: colors.dark,
 };
 
-export default oldTheme;
+export default darkTheme;