diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index e32057d87301d..fe893d63e451d 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -14,7 +14,6 @@ import {
 } from 'react-native-reanimated';
 import CONST from '../../CONST';
 import compose from '../../libs/compose';
-import colors from '../../styles/colors';
 import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import Button from '../Button';
@@ -317,7 +316,7 @@ const AvatarCropModal = (props) => {
                                 rotation={rotation}
                             />
                             <View style={[styles.mt5, styles.justifyContentBetween, styles.alignItemsCenter, styles.flexRow, StyleUtils.getWidthAndHeightStyle(imageContainerSize)]}>
-                                <Icon src={Expensicons.Zoom} fill={colors.gray3} />
+                                <Icon src={Expensicons.Zoom} fill={themeColors.icons} />
                                 <Pressable
                                     style={[styles.mh5, styles.flex1]}
                                     onLayout={initializeSliderContainer}
@@ -328,7 +327,7 @@ const AvatarCropModal = (props) => {
                                 <Button
                                     medium
                                     icon={Expensicons.Rotate}
-                                    iconFill={colors.black}
+                                    iconFill={themeColors.inverse}
                                     iconStyles={[styles.mr0]}
                                     style={[styles.imageCropRotateButton]}
                                     onPress={rotateImage}
diff --git a/src/components/Button.js b/src/components/Button.js
index 863fcee432961..5d7f785ac0b73 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -13,7 +13,6 @@ import HapticFeedback from '../libs/HapticFeedback';
 import withNavigationFallback from './withNavigationFallback';
 import compose from '../libs/compose';
 import * as Expensicons from './Icon/Expensicons';
-import colors from '../styles/colors';
 import withNavigationFocus from './withNavigationFocus';
 
 const propTypes = {
@@ -116,7 +115,7 @@ const defaultProps = {
     shouldShowRightIcon: false,
     icon: null,
     iconRight: Expensicons.ArrowRight,
-    iconFill: colors.white,
+    iconFill: themeColors.textLight,
     iconStyles: [],
     isLoading: false,
     isDisabled: false,
@@ -286,7 +285,7 @@ class Button extends Component {
                             {this.renderContent()}
                             {this.props.isLoading && (
                                 <ActivityIndicator
-                                    color={(this.props.success || this.props.danger) ? themeColors.textReversed : themeColors.text}
+                                    color={(this.props.success || this.props.danger) ? themeColors.textLight : themeColors.text}
                                     style={[styles.pAbsolute, styles.l0, styles.r0]}
                                 />
                             )}
diff --git a/src/components/ButtonWithDropdown.js b/src/components/ButtonWithDropdown.js
index 8955c3bc83b87..b1306b1a16e18 100644
--- a/src/components/ButtonWithDropdown.js
+++ b/src/components/ButtonWithDropdown.js
@@ -50,7 +50,7 @@ const ButtonWithDropdown = props => (
             onPress={props.onDropdownPress}
             shouldRemoveLeftBorderRadius
             ContentComponent={() => (
-                <Icon src={Expensicons.DownArrow} fill={themeColors.textReversed} />
+                <Icon src={Expensicons.DownArrow} fill={themeColors.textLight} />
             )}
         />
     </View>
diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js
index cad001e75cd64..776e841eb0548 100644
--- a/src/components/FloatingActionButton.js
+++ b/src/components/FloatingActionButton.js
@@ -62,12 +62,12 @@ class FloatingActionButton extends PureComponent {
 
         const backgroundColor = this.animatedValue.interpolate({
             inputRange: [0, 1],
-            outputRange: [themeColors.buttonSuccessBG, themeColors.buttonDefaultBG],
+            outputRange: [themeColors.success, themeColors.buttonDefaultBG],
         });
 
         const fill = this.animatedValue.interpolate({
             inputRange: [0, 1],
-            outputRange: [themeColors.componentBG, themeColors.heading],
+            outputRange: [themeColors.textLight, themeColors.textDark],
         });
 
         return (
diff --git a/src/components/InlineSystemMessage.js b/src/components/InlineSystemMessage.js
index 0b6645fe255b6..cad5c6cdeef1d 100644
--- a/src/components/InlineSystemMessage.js
+++ b/src/components/InlineSystemMessage.js
@@ -22,7 +22,7 @@ const InlineSystemMessage = (props) => {
     }
     return (
         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-            <Icon src={Expensicons.Exclamation} fill={theme.badgeDangerBG} />
+            <Icon src={Expensicons.Exclamation} fill={theme.danger} />
             <Text style={[styles.inlineSystemMessage]}>{props.message}</Text>
         </View>
     );
diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js
index b1114f911abd0..92c868548001a 100644
--- a/src/components/Onfido/BaseOnfidoWeb.js
+++ b/src/components/Onfido/BaseOnfidoWeb.js
@@ -7,7 +7,7 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import onfidoPropTypes from './onfidoPropTypes';
 import CONST from '../../CONST';
 import variables from '../../styles/variables';
-import colors from '../../styles/colors';
+import themeColors from '../../styles/themes/default';
 import fontWeightBold from '../../styles/fontWeight/bold';
 import fontFamily from '../../styles/fontFamily';
 import Log from '../../libs/Log';
@@ -30,29 +30,29 @@ class Onfido extends React.Component {
                 fontWeightTitle: fontWeightBold,
                 fontWeightSubtitle: 400,
                 fontSizeSubtitle: `${variables.fontSizeNormal}px`,
-                colorContentTitle: colors.dark,
-                colorContentSubtitle: colors.dark,
-                colorContentBody: colors.dark,
+                colorContentTitle: themeColors.text,
+                colorContentSubtitle: themeColors.text,
+                colorContentBody: themeColors.text,
                 borderRadiusButton: `${variables.componentBorderRadius}px`,
-                colorBackgroundSurfaceModal: colors.white,
-                colorBorderDocTypeButton: colors.gray2,
-                colorBorderDocTypeButtonHover: colors.blue,
-                colorBackgroundButtonPrimary: colors.green,
-                colorBackgroundButtonPrimaryHover: colors.greenHover,
-                colorBackgroundButtonPrimaryActive: colors.greenHover,
-                colorBorderButtonPrimary: colors.green,
-                colorContentButtonSecondaryText: colors.dark,
-                colorBackgroundButtonSecondary: colors.gray2,
-                colorBackgroundButtonSecondaryHover: colors.gray3,
-                colorBackgroundButtonSecondaryActive: colors.gray3,
-                colorBorderButtonSecondary: colors.gray2,
-                colorBackgroundIcon: colors.white,
-                colorContentLinkTextHover: colors.white,
-                colorBorderLinkUnderline: colors.blue,
-                colorBackgroundLinkHover: colors.blue,
-                colorBackgroundLinkActive: colors.blue,
-                authAccentColor: colors.blue,
-                colorBackgroundInfoPill: colors.blue,
+                colorBackgroundSurfaceModal: themeColors.appBG,
+                colorBorderDocTypeButton: themeColors.border,
+                colorBorderDocTypeButtonHover: themeColors.link,
+                colorBackgroundButtonPrimary: themeColors.success,
+                colorBackgroundButtonPrimaryHover: themeColors.successHover,
+                colorBackgroundButtonPrimaryActive: themeColors.successHover,
+                colorBorderButtonPrimary: themeColors.success,
+                colorContentButtonSecondaryText: themeColors.text,
+                colorBackgroundButtonSecondary: themeColors.border,
+                colorBackgroundButtonSecondaryHover: themeColors.icon,
+                colorBackgroundButtonSecondaryActive: themeColors.icon,
+                colorBorderButtonSecondary: themeColors.border,
+                colorBackgroundIcon: themeColors.appBG,
+                colorContentLinkTextHover: themeColors.appBG,
+                colorBorderLinkUnderline: themeColors.link,
+                colorBackgroundLinkHover: themeColors.link,
+                colorBackgroundLinkActive: themeColors.link,
+                authAccentColor: themeColors.link,
+                colorBackgroundInfoPill: themeColors.link,
             },
             steps: [
                 {
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index 29c27cf579607..e65bf5a0e26f2 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -16,7 +16,7 @@ import MultipleAvatars from './MultipleAvatars';
 import Hoverable from './Hoverable';
 import DisplayNames from './DisplayNames';
 import IOUBadge from './IOUBadge';
-import colors from '../styles/colors';
+import themeColors from '../styles/themes/default';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Text from './Text';
 import SelectCircle from './SelectCircle';
@@ -81,7 +81,7 @@ const propTypes = {
 const defaultProps = {
     accessibilityHint: '',
     alternateTextAccessibilityLabel: '',
-    backgroundColor: colors.white,
+    backgroundColor: themeColors.appBG,
     hoverStyle: styles.sidebarLinkHover,
     hideAdditionalOptionStates: false,
     showSelectedState: false,
@@ -238,7 +238,7 @@ const OptionRow = (props) => {
                                 <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
                                     <Icon
                                         src={Expensicons.DotIndicator}
-                                        fill={colors.red}
+                                        fill={themeColors.danger}
                                         height={variables.iconSizeSmall}
                                         width={variables.iconSizeSmall}
                                     />
diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
index 51b0fe54f73b5..e70fd65cae873 100644
--- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
+++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {Rect, Circle} from 'react-native-svg';
 import SkeletonViewContentLoader from 'react-content-loader/native';
 import CONST from '../../CONST';
+import themeColors from '../../styles/themes/default';
 
 const propTypes = {
     /** Number of rows to show in Skeleton UI block */
@@ -12,6 +13,8 @@ const propTypes = {
 const SkeletonViewLines = props => (
     <SkeletonViewContentLoader
         height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]}
+        backgroundColor={themeColors.highlightBG}
+        foregroundColor={themeColors.border}
     >
         <Circle cx="40" cy="26" r="20" />
         <Rect x="67" y="11" width="20%" height="8" />
diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js
index 85f2b955e65d0..fd7818573ffeb 100644
--- a/src/components/ReportHeaderSkeletonView.js
+++ b/src/components/ReportHeaderSkeletonView.js
@@ -7,6 +7,7 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import variables from '../styles/variables';
+import themeColors from '../styles/themes/default';
 
 const propTypes = {
     ...windowDimensionsPropTypes,
@@ -24,6 +25,8 @@ const ReportHeaderSkeletonView = props => (
             <SkeletonViewContentLoader
                 height={variables.contentHeaderHeight}
                 width={styles.w100.width}
+                backgroundColor={themeColors.highlightBG}
+                foregroundColor={themeColors.border}
             >
                 <Circle cx="20" cy="33" r="20" />
                 <Rect x="55" y="20" width="30%" height="8" />
diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js
index 775d89f31b926..df43bb775b996 100644
--- a/src/libs/Navigation/NavigationRoot.js
+++ b/src/libs/Navigation/NavigationRoot.js
@@ -6,7 +6,7 @@ import Navigation, {navigationRef} from './Navigation';
 import linkingConfig from './linkingConfig';
 import AppNavigator from './AppNavigator';
 import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
-import colors from '../../styles/colors';
+import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
 import UnreadIndicatorUpdater from '../UnreadIndicatorUpdater';
 import Log from '../Log';
@@ -16,7 +16,7 @@ const navigationTheme = {
     ...DefaultTheme,
     colors: {
         ...DefaultTheme.colors,
-        background: colors.gray1,
+        background: themeColors.highlightBG,
     },
 };
 
diff --git a/src/pages/settings/Profile/LoginField.js b/src/pages/settings/Profile/LoginField.js
index a23a5f3ac8d04..37cc424535c4f 100755
--- a/src/pages/settings/Profile/LoginField.js
+++ b/src/pages/settings/Profile/LoginField.js
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
-import colors from '../../../styles/colors';
+import themeColors from '../../../styles/themes/default';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import Icon from '../../../components/Icon';
 import ROUTES from '../../../ROUTES';
@@ -112,7 +112,7 @@ class LoginField extends Component {
                                 style={[styles.mb2]}
                                 onPress={this.onResendClicked}
                                 ContentComponent={() => (this.state.showCheckmarkIcon ? (
-                                    <Icon fill={colors.black} src={Expensicons.Checkmark} />
+                                    <Icon fill={themeColors.inverse} src={Expensicons.Checkmark} />
                                 ) : (
                                     <Text style={styles.buttonSmallText}>
                                         {this.props.translate('common.resend')}
diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
index 796becb03cb3e..72fbbc585d570 100644
--- a/src/pages/settings/Profile/PronounsPage.js
+++ b/src/pages/settings/Profile/PronounsPage.js
@@ -36,7 +36,7 @@ const PronounsPage = (props) => {
 
             // Add green checkmark icon & bold the timezone text
             customIcon: fullPronounKey === currentPronouns
-                ? {src: Expensicons.Checkmark, color: themeColors.textSuccess}
+                ? {src: Expensicons.Checkmark, color: themeColors.success}
                 : null,
             isUnread: fullPronounKey === currentPronouns,
         };
diff --git a/src/stories/PopoverMenu.stories.js b/src/stories/PopoverMenu.stories.js
index 299ce3fb2d705..fcf8110e93bea 100644
--- a/src/stories/PopoverMenu.stories.js
+++ b/src/stories/PopoverMenu.stories.js
@@ -3,7 +3,7 @@ import {SafeAreaProvider} from 'react-native-safe-area-context';
 import PopoverMenu from '../components/PopoverMenu';
 import * as Expensicons from '../components/Icon/Expensicons';
 import MenuItem from '../components/MenuItem';
-import colors from '../styles/colors';
+import themeColors from '../styles/themes/default';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -25,7 +25,7 @@ const Template = (args) => {
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...args.menuItem}
                 onPress={toggleVisibility}
-                wrapperStyle={isVisible ? [{backgroundColor: colors.gray2}] : []}
+                wrapperStyle={isVisible ? [{backgroundColor: themeColors.border}] : []}
             />
             <SafeAreaProvider>
                 <PopoverMenu
diff --git a/src/styles/addOutlineWidth/index.js b/src/styles/addOutlineWidth/index.js
index a25bc887dc103..2a2657b249100 100644
--- a/src/styles/addOutlineWidth/index.js
+++ b/src/styles/addOutlineWidth/index.js
@@ -18,7 +18,7 @@ function withOutlineWidth(obj, val, error = false) {
         ...obj,
         outlineWidth: val,
         outlineStyle: val ? 'auto' : 'none',
-        boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${error ? themeDefault.badgeDangerBG : themeDefault.borderFocus}` : 'none',
+        boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${error ? themeDefault.danger : themeDefault.borderFocus}` : 'none',
     };
 }
 
diff --git a/src/styles/colors.js b/src/styles/colors.js
index f195cd62ebb41..b8cd3a2100089 100644
--- a/src/styles/colors.js
+++ b/src/styles/colors.js
@@ -1,21 +1,42 @@
+/**
+ * DO NOT import colors.js into files. Use ../themes/default.js instead.
+ */
 export default {
-    white: '#FFFFFF',
-    gray1: '#FAFAFA',
-    gray2: '#ECECEC',
-    gray3: '#C6C9CA',
-    gray4: '#7D8B8F',
     dark: '#0b1b34',
     black: '#000000',
     blue: '#0185ff',
-    blueHover: '#0063bf',
+    blueHover: '#B0D9FF',
     floralwhite: '#fffaf0',
-    green: '#03d47c',
-    greenHover: '#03c775',
-    orange: '#ff7101',
-    pink: '#f68dfe',
-    red: '#fc3826',
-    redHover: '#e13826',
-    redDisabled: '#fea29a',
-    yellow: '#fed607',
+    orange: '#FF7101',
+    pink: '#F68DFE',
+    green: '#03D47C',
+    greenHover: '#00C271',
+    greenPressed: '#35DD96',
+    greenDisabled: '80E9BD',
+    red: '#F25730',
+    redHover: '#DE4822',
+    redPressed: '#F57959',
+    redDisabled: '#F8AA97',
+    yellow: '#FED607',
     transparent: 'transparent',
+
+    // Dark Mode Theme Colors
+    greenAppBackground: '#061B09',
+    greenHighlightBackground: '#002E22',
+    greenBorders: '#1B5744',
+    greenIcons: '#8B9C8F',
+    greenSupportingText: '#C9D3C5',
+    white: '#FFFFFF',
+    blueLink: '#5AB0FF',
+    blueLinkHover: '#B0D9FF',
+    greenDefaultButton: '#184E3D',
+    greenDefaultButtonHover: '#2C6755',
+    greenDefaultButtonPressed: '#467164',
+    greenDefaultButtonDisabled: '#8BA69E',
+
+    // DEPRECATED COLORS. Do not reference these colors. Will be deleted in color switch PR.
+    gray1: '#FAFAFA',
+    gray2: '#ECECEC',
+    gray3: '#C6C9CA',
+    gray4: '#7D8B8F',
 };
diff --git a/src/styles/getModalStyles/getBaseModalStyles.js b/src/styles/getModalStyles/getBaseModalStyles.js
index 7346a49517dc7..aea136f6818af 100644
--- a/src/styles/getModalStyles/getBaseModalStyles.js
+++ b/src/styles/getModalStyles/getBaseModalStyles.js
@@ -1,5 +1,4 @@
 import CONST from '../../CONST';
-import colors from '../colors';
 import variables from '../variables';
 import themeColors from '../themes/default';
 
@@ -32,7 +31,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
             };
             modalContainerStyle = {
                 // Shadow Styles
-                shadowColor: colors.black,
+                shadowColor: themeColors.shadow,
                 shadowOffset: {
                     width: 0,
                     height: 0,
@@ -64,7 +63,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
             };
             modalContainerStyle = {
                 // Shadow Styles
-                shadowColor: colors.black,
+                shadowColor: themeColors.shadow,
                 shadowOffset: {
                     width: 0,
                     height: 0,
@@ -100,7 +99,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
             };
             modalContainerStyle = {
                 // Shadow Styles
-                shadowColor: colors.black,
+                shadowColor: themeColors.shadow,
                 shadowOffset: {
                     width: 0,
                     height: 0,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 4d92014abfc79..0d4e97012dec6 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3,7 +3,6 @@ import addOutlineWidth from './addOutlineWidth';
 import themeColors from './themes/default';
 import fontWeightBold from './fontWeight/bold';
 import variables from './variables';
-import colors from './colors';
 import spacing from './utilities/spacing';
 import sizing from './utilities/sizing';
 import flex from './utilities/flex';
@@ -22,7 +21,7 @@ import overflowXHidden from './overflowXHidden';
 import CONST from '../CONST';
 
 const picker = {
-    backgroundColor: 'transparent',
+    backgroundColor: themeColors.transparent,
     color: themeColors.text,
     fontFamily: fontFamily.GTA,
     fontSize: variables.fontSizeNormal,
@@ -151,6 +150,7 @@ const styles = {
     ...wordBreak,
     ...whiteSpace,
     ...writingDirection,
+    ...themeColors,
 
     rateCol: {
         margin: 0,
@@ -287,11 +287,11 @@ const styles = {
     },
 
     textWhite: {
-        color: colors.white,
+        color: themeColors.textLight,
     },
 
     textBlue: {
-        color: colors.blue,
+        color: themeColors.link,
     },
 
     textUppercase: {
@@ -323,7 +323,7 @@ const styles = {
     },
 
     bgDark: {
-        backgroundColor: colors.dark,
+        backgroundColor: themeColors.inverse,
     },
 
     opacity0: {
@@ -335,7 +335,7 @@ const styles = {
     },
 
     textDanger: {
-        color: colors.red,
+        color: themeColors.danger,
     },
 
     borderRadiusNormal: {
@@ -351,7 +351,7 @@ const styles = {
     },
 
     buttonText: {
-        color: themeColors.heading,
+        color: themeColors.text,
         fontFamily: fontFamily.GTA_BOLD,
         fontSize: variables.fontSizeNormal,
         fontWeight: fontWeightBold,
@@ -414,7 +414,7 @@ const styles = {
     },
 
     buttonSuccess: {
-        backgroundColor: themeColors.buttonSuccessBG,
+        backgroundColor: themeColors.success,
         borderWidth: 0,
     },
 
@@ -423,32 +423,32 @@ const styles = {
     },
 
     buttonSuccessHovered: {
-        backgroundColor: themeColors.buttonSuccessHoveredBG,
+        backgroundColor: themeColors.successHover,
         borderWidth: 0,
     },
 
     buttonDanger: {
-        backgroundColor: themeColors.buttonDangerBG,
+        backgroundColor: themeColors.danger,
         borderWidth: 0,
     },
 
     buttonDangerDisabled: {
-        backgroundColor: themeColors.buttonDangerDisabledBG,
+        backgroundColor: themeColors.dangerDisabled,
     },
 
     buttonDangerHovered: {
-        backgroundColor: themeColors.buttonDangerPressedBG,
+        backgroundColor: themeColors.dangerHover,
         borderWidth: 0,
     },
 
     buttonDisable: {
-        backgroundColor: themeColors.buttonDisabledBG,
+        backgroundColor: themeColors.buttonDefaultBG,
         borderWidth: 0,
     },
 
     buttonDropdown: {
         borderLeftWidth: 1,
-        borderColor: themeColors.textReversed,
+        borderColor: themeColors.text,
     },
 
     noRightBorderRadius: {
@@ -480,11 +480,11 @@ const styles = {
     },
 
     buttonSuccessText: {
-        color: themeColors.textReversed,
+        color: themeColors.text,
     },
 
     buttonDangerText: {
-        color: themeColors.textReversed,
+        color: themeColors.text,
     },
 
     hoveredComponentBG: {
@@ -579,7 +579,7 @@ const styles = {
     },
 
     badge: {
-        backgroundColor: themeColors.badgeDefaultBG,
+        backgroundColor: themeColors.border,
         borderRadius: 14,
         height: variables.iconSizeNormal,
         flexDirection: 'row',
@@ -588,19 +588,19 @@ const styles = {
     },
 
     badgeSuccess: {
-        backgroundColor: themeColors.badgeSuccessBG,
+        backgroundColor: themeColors.success,
     },
 
     badgeSuccessPressed: {
-        backgroundColor: themeColors.badgeSuccessPressedBG,
+        backgroundColor: themeColors.successHover,
     },
 
     badgeDanger: {
-        backgroundColor: themeColors.badgeDangerBG,
+        backgroundColor: themeColors.danger,
     },
 
     badgeDangerPressed: {
-        backgroundColor: themeColors.badgeDangerPressedBG,
+        backgroundColor: themeColors.dangerPressed,
     },
 
     badgeText: {
@@ -621,7 +621,7 @@ const styles = {
     },
 
     borderColorDanger: {
-        borderColor: themeColors.badgeDangerBG,
+        borderColor: themeColors.danger,
     },
 
     headerText: {
@@ -824,12 +824,12 @@ const styles = {
     }),
 
     disabledText: {
-        color: colors.gray3,
+        color: themeColors.icon,
     },
 
     inputDisabled: {
-        backgroundColor: colors.gray1,
-        color: colors.gray3,
+        backgroundColor: themeColors.highlightBG,
+        color: themeColors.icon,
     },
 
     textInputReversed: addOutlineWidth({
@@ -845,7 +845,7 @@ const styles = {
     noOutline: addOutlineWidth({}, 0),
 
     errorOutline: {
-        borderColor: colors.red,
+        borderColor: themeColors.danger,
     },
 
     textLabelSupporting: {
@@ -882,7 +882,7 @@ const styles = {
     },
 
     formSuccess: {
-        color: themeColors.textSuccess,
+        color: themeColors.success,
         fontSize: variables.fontSizeLabel,
         lineHeight: 18,
         marginBottom: 4,
@@ -914,14 +914,14 @@ const styles = {
         fontFamily: fontFamily.GTA,
         fontWeight: fontWeightBold,
         fontSize: variables.fontSizeHero,
-        color: colors.white,
+        color: themeColors.appBG,
         lineHeight: variables.lineHeightHero,
     },
 
     signInPageHeroDescription: {
         fontFamily: fontFamily.GTA,
         fontSize: variables.fontSizeNormal,
-        color: colors.white,
+        color: themeColors.appBG,
     },
 
     signInPageFormContainer: {
@@ -979,7 +979,7 @@ const styles = {
 
     statusIndicator: {
         borderColor: themeColors.sidebar,
-        backgroundColor: themeColors.buttonDangerBG,
+        backgroundColor: themeColors.danger,
         borderRadius: 6,
         borderWidth: 2,
         position: 'absolute',
@@ -992,7 +992,7 @@ const styles = {
 
     statusIndicatorLarge: {
         borderColor: themeColors.componentBG,
-        backgroundColor: themeColors.buttonDangerBG,
+        backgroundColor: themeColors.danger,
         borderRadius: 8,
         borderWidth: 2,
         position: 'absolute',
@@ -1004,7 +1004,7 @@ const styles = {
     },
 
     statusIndicatorOnline: {
-        backgroundColor: themeColors.online,
+        backgroundColor: themeColors.success,
     },
 
     avatarWithIndicator: {
@@ -1022,7 +1022,7 @@ const styles = {
     },
 
     floatingActionButton: {
-        backgroundColor: themeColors.buttonSuccessBG,
+        backgroundColor: themeColors.success,
         position: 'absolute',
         height: variables.componentSizeLarge,
         width: variables.componentSizeLarge,
@@ -1340,7 +1340,7 @@ const styles = {
     },
 
     chatItemMessageLink: {
-        color: colors.blue,
+        color: themeColors.link,
         fontSize: variables.fontSizeNormal,
         fontFamily: fontFamily.GTA,
         lineHeight: 20,
@@ -1586,7 +1586,7 @@ const styles = {
     horizontalStackedAvatar: {
         height: 28,
         width: 28,
-        backgroundColor: colors.white,
+        backgroundColor: themeColors.appBG,
         borderRadius: 33,
         paddingTop: 2,
     },
@@ -1679,7 +1679,7 @@ const styles = {
     },
 
     avatarInnerText: {
-        color: themeColors.textReversed,
+        color: themeColors.textLight,
         fontSize: variables.fontSizeSmall,
         lineHeight: undefined,
         marginLeft: -3,
@@ -1687,7 +1687,7 @@ const styles = {
     },
 
     avatarInnerTextSmall: {
-        color: themeColors.textReversed,
+        color: themeColors.textLight,
         fontSize: variables.fontSizeExtraSmall,
         lineHeight: undefined,
         marginLeft: -2,
@@ -1752,7 +1752,7 @@ const styles = {
         width: 28,
         borderWidth: 2,
         borderStyle: 'solid',
-        borderColor: colors.white,
+        borderColor: themeColors.appBG,
         backgroundColor: themeColors.opaqueAvatar,
         borderRadius: 24,
         zIndex: 6,
@@ -1894,7 +1894,7 @@ const styles = {
     },
 
     notFoundTextHeader: {
-        color: colors.blue,
+        color: themeColors.link,
         fontFamily: fontFamily.GTA_BOLD,
         fontWeight: fontWeightBold,
         fontSize: 150,
@@ -1908,7 +1908,7 @@ const styles = {
     },
 
     notFoundButtonText: {
-        color: colors.blue,
+        color: themeColors.link,
         fontFamily: fontFamily.GTA_BOLD,
         fontWeight: fontWeightBold,
         fontSize: 15,
@@ -1920,7 +1920,7 @@ const styles = {
 
     defaultModalContainer: {
         backgroundColor: themeColors.componentBG,
-        borderColor: colors.transparent,
+        borderColor: themeColors.transparent,
     },
 
     reportActionContextMenuMiniButton: {
@@ -1997,12 +1997,12 @@ const styles = {
         right: 0,
         bottom: 0,
         left: 0,
-        backgroundColor: colors.dark,
+        backgroundColor: themeColors.inverse,
         opacity: 0.5,
     },
 
     avatarInnerTextChat: {
-        color: themeColors.textReversed,
+        color: themeColors.textLight,
         fontSize: variables.fontSizeNormal,
         left: 1,
         textAlign: 'center',
@@ -2112,11 +2112,11 @@ const styles = {
         justifyContent: 'center',
         borderRadius: 20,
         padding: 15,
-        backgroundColor: colors.green,
+        backgroundColor: themeColors.success,
     },
 
     switchInactive: {
-        backgroundColor: colors.gray2,
+        backgroundColor: themeColors.border,
     },
 
     switchThumb: {
@@ -2125,7 +2125,7 @@ const styles = {
         borderRadius: 11,
         position: 'absolute',
         left: 4,
-        backgroundColor: colors.white,
+        backgroundColor: themeColors.appBG,
     },
 
     radioButtonContainer: {
@@ -2151,7 +2151,7 @@ const styles = {
     },
 
     checkedContainer: {
-        backgroundColor: colors.blue,
+        backgroundColor: themeColors.link,
     },
 
     iouAmountText: {
@@ -2249,7 +2249,7 @@ const styles = {
     },
 
     navigatorFullScreenLoading: {
-        backgroundColor: colors.gray1,
+        backgroundColor: themeColors.highlightBG,
         opacity: 1,
     },
 
@@ -2302,12 +2302,12 @@ const styles = {
     }),
 
     growlNotificationBox: {
-        backgroundColor: colors.dark,
+        backgroundColor: themeColors.inverse,
         borderRadius: variables.componentBorderRadiusNormal,
         alignItems: 'center',
         flexDirection: 'row',
         justifyContent: 'space-between',
-        shadowColor: '#000',
+        shadowColor: themeColors.shadow,
         ...spacing.p5,
     },
 
@@ -2674,7 +2674,7 @@ const styles = {
     },
 
     iPhoneXSafeArea: {
-        backgroundColor: colors.black,
+        backgroundColor: themeColors.inverse,
         flex: 1,
     },
 
@@ -2709,7 +2709,7 @@ const styles = {
     },
 
     sliderKnob: {
-        backgroundColor: themeColors.badgeSuccessBG,
+        backgroundColor: themeColors.success,
         position: 'absolute',
         height: variables.sliderKnobSize,
         width: variables.sliderKnobSize,
@@ -2761,7 +2761,7 @@ const styles = {
 
     textPill: {
         ellipsizeMode: 'end',
-        backgroundColor: colors.gray2,
+        backgroundColor: themeColors.border,
         borderRadius: 10,
         overflow: 'hidden',
         paddingVertical: 2,
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 0b64e64484bf3..ec561b881226c 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -1,6 +1,62 @@
+/* eslint-disable no-unused-vars */
 import colors from '../colors';
 
-export default {
+const darkTheme = {
+    // Figma keys
+    appBG: colors.greenAppBackground,
+    highlightBG: colors.greenHighlightBackground,
+    border: colors.greenBorders,
+    borderFocus: colors.green,
+    icon: colors.greenIcons,
+    iconHovered: colors.white,
+    iconSuccessFill: colors.green,
+    iconReversed: colors.greenAppBackground,
+    textSupporting: colors.greenSupportingText,
+    text: colors.white,
+    link: colors.blueLink,
+    linkHover: colors.blueLinkHover,
+    buttonDefaultBG: colors.greenDefaultButton,
+    buttonDisabledBG: colors.greenDefaultButtonDisabled,
+    buttonHoveredBG: colors.greenDefaultButtonHover,
+    buttonPressedBG: colors.greenDefaultButtonPressed,
+    danger: colors.red,
+    dangerHover: colors.redHover,
+    dangerPressed: colors.redHover,
+    dangerDisabled: colors.redDisabled,
+    warning: colors.yellow,
+    success: colors.green,
+    successHover: colors.greenHover,
+    successPressed: colors.greenPressed,
+    transparent: colors.transparent,
+
+    // Additional keys
+    inverse: colors.white,
+    shadow: colors.black,
+    componentBG: colors.greenAppBackground,
+    hoverComponentBG: colors.greenHighlightBackground,
+    activeComponentBG: colors.greenBorders,
+    sidebar: colors.greenHighlightBackground,
+    sidebarHover: colors.greenAppBackground,
+    heading: colors.white,
+    textLight: colors.white,
+    textDark: colors.greenAppBackground,
+    textReversed: colors.greenAppBackground,
+    textBackground: colors.greenHighlightBackground,
+    textMutedReversed: colors.greenIcons,
+    textError: colors.red,
+    offline: colors.greenIcons,
+    opaqueAvatar: 'rgba(198, 201, 202, 0.64)',
+    modalBackdrop: colors.greenIcons,
+    modalBackground: colors.greenBorders,
+    cardBG: colors.greenHighlightBackground,
+    spinner: colors.greenSupportingText,
+    unreadIndicator: colors.green,
+    placeholderText: colors.greenIcons,
+    heroCard: colors.blue,
+    uploadPreviewActivityIndicator: colors.greenHighlightBackground,
+};
+
+const oldTheme = {
     shadow: colors.black,
     link: colors.blue,
     linkHover: colors.blueHover,
@@ -20,27 +76,15 @@ export default {
     textSupporting: colors.gray4,
     text: colors.dark,
     textError: colors.red,
-    textSuccess: colors.green,
     textBackground: colors.gray1,
     textReversed: colors.white,
     textMutedReversed: colors.gray3,
     buttonDefaultBG: colors.gray2,
-    buttonSuccessBG: colors.green,
-    buttonSuccessHoveredBG: colors.greenHover,
-    buttonDangerBG: colors.red,
-    buttonDangerPressedBG: colors.redHover,
-    buttonDangerDisabledBG: colors.redDisabled,
-    online: colors.green,
     offline: colors.gray3,
     sidebarButtonBG: 'rgba(198, 201, 202, 0.25)',
     opaqueAvatar: 'rgba(011, 027, 052, 0.64)',
     modalBackdrop: colors.gray3,
     modalBackground: colors.gray2,
-    badgeDangerBG: colors.red,
-    badgeDangerPressedBG: colors.redHover,
-    badgeDefaultBG: colors.gray2,
-    badgeSuccessBG: colors.green,
-    badgeSuccessPressedBG: colors.greenHover,
     buttonDisabledBG: colors.gray2,
     buttonHoveredBG: colors.gray1,
     buttonPressedBG: colors.gray2,
@@ -49,4 +93,22 @@ export default {
     placeholderText: colors.gray3,
     heroCard: colors.blue,
     uploadPreviewActivityIndicator: colors.gray1,
+    cardBG: colors.gray1,
+
+    // Merging new Keys for Dark Mode merge. Delete after new branding is implemented.
+    highlightBG: colors.gray1,
+    danger: colors.red,
+    dangerHover: colors.redHover,
+    dangerPressed: colors.redHover,
+    dangerDisabled: colors.redDisabled,
+    warning: colors.yellow,
+    success: colors.green,
+    successHover: colors.greenHover,
+    successPressed: colors.greenPressed,
+    transparent: colors.transparent,
+    inverse: colors.white,
+    textLight: colors.white,
+    textDark: colors.dark,
 };
+
+export default oldTheme;
diff --git a/web/splash/splash.js b/web/splash/splash.js
index 1ecc0c5015023..3929c168d86e4 100644
--- a/web/splash/splash.js
+++ b/web/splash/splash.js
@@ -1,5 +1,6 @@
 import './splash.css';
 import newExpensifyLogo from 'logo?raw';
+import themeColors from '../../src/styles/themes/default';
 
 document.addEventListener('DOMContentLoaded', () => {
     const minMilisecondsToWait = 1.5 * 1000;
@@ -8,6 +9,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const splash = document.getElementById('splash');
     const splashLogo = document.querySelector('.splash-logo');
     const root = document.getElementById('root');
+    splash.style.backgroundColor = themeColors.appBG;
 
     splashLogo.innerHTML = newExpensifyLogo;