From 55285f4c5fc9a97fa00d73229fc3188568600093 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Mon, 11 Sep 2023 12:11:58 -0700
Subject: [PATCH] Dark Theme Manager and Modals (#1503)

---
 .eslintrc.js                                  | 21 -------------
 .../src/components/BankSyncStatus.tsx         |  8 ++---
 .../desktop-client/src/components/alerts.tsx  | 14 ++++-----
 .../src/components/manager/BudgetList.js      | 14 +++++----
 .../src/components/manager/ConfigServer.tsx   | 16 ++++++----
 .../src/components/manager/DeleteFile.js      | 10 +++---
 .../src/components/manager/Import.js          | 12 +++----
 .../src/components/manager/ImportActual.tsx   |  4 +--
 .../src/components/manager/ImportYNAB4.tsx    |  4 +--
 .../src/components/manager/ImportYNAB5.tsx    |  4 +--
 .../src/components/manager/WelcomeScreen.js   |  4 +--
 .../modals/ConfirmCategoryDelete.js           | 13 ++++++--
 .../components/modals/CreateEncryptionKey.js  |  4 +--
 .../src/components/modals/EditField.js        | 15 +++++----
 .../src/components/modals/FixEncryptionKey.js |  6 ++--
 .../modals/GoCardlessExternalMsg.js           | 14 ++++-----
 .../components/modals/ImportTransactions.js   | 31 ++++++++++++-------
 .../src/components/modals/LoadBackup.js       |  4 +--
 .../src/components/modals/PlaidExternalMsg.js | 16 +++++-----
 .../src/components/util/DisplayId.js          |  8 +++--
 .../src/components/util/LoadComponent.tsx     |  4 +--
 .../desktop-client/src/style/themes/dark.ts   |  3 ++
 .../desktop-client/src/style/themes/light.ts  |  3 ++
 upcoming-release-notes/1503.md                |  5 +++
 24 files changed, 129 insertions(+), 108 deletions(-)
 create mode 100644 upcoming-release-notes/1503.md

diff --git a/.eslintrc.js b/.eslintrc.js
index 4a54ca8d79b..b10db2ff9c5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -218,8 +218,6 @@ module.exports = {
     {
       //This is temporary. We will remove these as dark theme gets ported
       files: [
-        './packages/desktop-client/public/index.html',
-        './packages/desktop-client/src/components/BankSyncStatus.*',
         './packages/desktop-client/src/components/LoggedInUser.*',
         './packages/desktop-client/src/components/MobileWebMessage.*',
         './packages/desktop-client/src/components/NotesButton.*',
@@ -252,24 +250,7 @@ module.exports = {
         './packages/desktop-client/src/components/common/Label.*',
         './packages/desktop-client/src/components/common/View.*',
         './packages/desktop-client/src/components/common/ExternalLink.*',
-        './packages/desktop-client/src/components/manager/BudgetList.*',
-        './packages/desktop-client/src/components/manager/ConfigServer.*',
-        './packages/desktop-client/src/components/manager/DeleteFile.*',
-        './packages/desktop-client/src/components/manager/Import.*',
-        './packages/desktop-client/src/components/manager/ImportActual.*',
-        './packages/desktop-client/src/components/manager/ImportYNAB4.*',
-        './packages/desktop-client/src/components/manager/ImportYNAB5.*',
-        './packages/desktop-client/src/components/manager/WelcomeScreen.*',
         './packages/desktop-client/src/components/modals/BudgetSummary.*',
-        './packages/desktop-client/src/components/modals/ConfirmCategoryDelete.*',
-        './packages/desktop-client/src/components/modals/CreateEncryptionKey.*',
-        './packages/desktop-client/src/components/modals/EditField.*',
-        './packages/desktop-client/src/components/modals/FixEncryptionKey.*',
-        './packages/desktop-client/src/components/modals/GoCardlessExternalMsg.*',
-        './packages/desktop-client/src/components/modals/ImportTransactions.*',
-        './packages/desktop-client/src/components/modals/LoadBackup.*',
-        './packages/desktop-client/src/components/modals/PlaidExternalMsg.*',
-        './packages/desktop-client/src/components/modals/SelectLinkedAccounts.*',
         './packages/desktop-client/src/components/payees/index.*',
         './packages/desktop-client/src/components/reports/CashFlow.*',
         './packages/desktop-client/src/components/reports/Change.*',
@@ -291,8 +272,6 @@ module.exports = {
         './packages/desktop-client/src/components/transactions/MobileTransaction.*',
         './packages/desktop-client/src/components/transactions/TransactionsTable.*',
         './packages/desktop-client/src/components/util/AmountInput.*',
-        './packages/desktop-client/src/components/util/DisplayId.*',
-        './packages/desktop-client/src/components/util/LoadComponent.*',
         './packages/desktop-client/src/style/*',
       ],
       rules: {
diff --git a/packages/desktop-client/src/components/BankSyncStatus.tsx b/packages/desktop-client/src/components/BankSyncStatus.tsx
index 01db3850fdc..8095d406706 100644
--- a/packages/desktop-client/src/components/BankSyncStatus.tsx
+++ b/packages/desktop-client/src/components/BankSyncStatus.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
 
-import { colors, styles } from '../style';
+import { theme, styles } from '../style';
 
 import AnimatedRefresh from './AnimatedRefresh';
 import Text from './common/Text';
@@ -43,8 +43,8 @@ export default function BankSyncStatus() {
               <View
                 style={{
                   borderRadius: 4,
-                  backgroundColor: colors.b9,
-                  color: colors.b1,
+                  backgroundColor: theme.pillBackgroundSelected,
+                  color: theme.pillTextSelected,
                   padding: '5px 13px',
                   flexDirection: 'row',
                   alignItems: 'center',
@@ -53,7 +53,7 @@ export default function BankSyncStatus() {
               >
                 <AnimatedRefresh
                   animating={true}
-                  iconStyle={{ color: colors.b1 }}
+                  iconStyle={{ color: theme.pillTextSelected }}
                 />
                 <Text>Syncing {item}</Text>
               </View>
diff --git a/packages/desktop-client/src/components/alerts.tsx b/packages/desktop-client/src/components/alerts.tsx
index 3836c154719..f7a67e4f5c1 100644
--- a/packages/desktop-client/src/components/alerts.tsx
+++ b/packages/desktop-client/src/components/alerts.tsx
@@ -2,7 +2,7 @@ import React, { type ComponentType, type ReactNode } from 'react';
 
 import ExclamationOutline from '../icons/v1/ExclamationOutline';
 import InformationOutline from '../icons/v1/InformationOutline';
-import { styles, colors, type CSSProperties } from '../style';
+import { styles, theme, type CSSProperties } from '../style';
 
 import Text from './common/Text';
 import View from './common/View';
@@ -33,7 +33,7 @@ const Alert = ({
         padding: 10,
         flexDirection: 'row',
         '& a, & a:active, & a:visited': {
-          color: colors.b3,
+          color: theme.altFormLabelText,
         },
         ...style,
       }}
@@ -63,7 +63,7 @@ export const Information = ({ style, children }: ScopedAlertProps) => {
   return (
     <Alert
       icon={InformationOutline}
-      color={colors.n4}
+      color={theme.pageTextLight}
       backgroundColor="transparent"
       style={{
         ...style,
@@ -80,8 +80,8 @@ export const Warning = ({ style, children }: ScopedAlertProps) => {
   return (
     <Alert
       icon={ExclamationOutline}
-      color={colors.y2}
-      backgroundColor={colors.y10}
+      color={theme.warningText}
+      backgroundColor={theme.warningBackground}
       style={style}
     >
       {children}
@@ -93,8 +93,8 @@ export const Error = ({ style, children }: ScopedAlertProps) => {
   return (
     <Alert
       icon={ExclamationOutline}
-      color={colors.r2}
-      backgroundColor={colors.r10}
+      color={theme.altErrorText}
+      backgroundColor={theme.altErrorBackground}
       style={style}
     >
       {children}
diff --git a/packages/desktop-client/src/components/manager/BudgetList.js b/packages/desktop-client/src/components/manager/BudgetList.js
index d127914b671..6725c039f91 100644
--- a/packages/desktop-client/src/components/manager/BudgetList.js
+++ b/packages/desktop-client/src/components/manager/BudgetList.js
@@ -13,7 +13,7 @@ import FileDouble from '../../icons/v1/FileDouble';
 import CloudUnknown from '../../icons/v2/CloudUnknown';
 import Key from '../../icons/v2/Key';
 import RefreshArrow from '../../icons/v2/RefreshArrow';
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
 import tokens from '../../tokens';
 import Button from '../common/Button';
 import Menu from '../common/Menu';
@@ -96,7 +96,7 @@ function FileState({ file }) {
     case 'unknown':
       Icon = CloudUnknown;
       status = 'Network unavailable';
-      color = colors.n7;
+      color = theme.buttonNormalDisabledText;
       break;
     case 'remote':
       Icon = CloudDownload;
@@ -159,12 +159,12 @@ function File({ file, onSelect, onDelete }) {
         ...styles.shadow,
         margin: 10,
         padding: '12px 15px',
-        backgroundColor: 'white',
+        backgroundColor: theme.buttonNormalBackground,
         borderRadius: 6,
         flexShrink: 0,
         cursor: 'pointer',
         ':hover': {
-          backgroundColor: colors.hover,
+          backgroundColor: theme.hover,
         },
       }}
     >
@@ -183,7 +183,9 @@ function File({ file, onSelect, onDelete }) {
               width: 13,
               height: 13,
               marginRight: 8,
-              color: file.hasKey ? colors.b5 : colors.n8,
+              color: file.hasKey
+                ? theme.formLabelText
+                : theme.buttonNormalDisabledText,
             }}
           />
         )}
@@ -320,7 +322,7 @@ export default function BudgetList() {
           type="bare"
           style={{
             marginLeft: 10,
-            color: colors.n4,
+            color: theme.pageTextLight,
           }}
           onClick={e => {
             e.preventDefault();
diff --git a/packages/desktop-client/src/components/manager/ConfigServer.tsx b/packages/desktop-client/src/components/manager/ConfigServer.tsx
index e61887a8e21..1331fa5676c 100644
--- a/packages/desktop-client/src/components/manager/ConfigServer.tsx
+++ b/packages/desktop-client/src/components/manager/ConfigServer.tsx
@@ -8,7 +8,7 @@ import {
 
 import { useActions } from '../../hooks/useActions';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
-import { colors, theme } from '../../style';
+import { theme } from '../../style';
 import Button, { ButtonWithLoading } from '../common/Button';
 import { BigInput } from '../common/Input';
 import Text from '../common/Text';
@@ -95,7 +95,7 @@ export default function ConfigServer() {
       <Text
         style={{
           fontSize: 16,
-          color: colors.n2,
+          color: theme.tableRowHeaderText,
           lineHeight: 1.5,
         }}
       >
@@ -117,7 +117,7 @@ export default function ConfigServer() {
         <Text
           style={{
             marginTop: 20,
-            color: colors.r4,
+            color: theme.errorText,
             borderRadius: 4,
             fontSize: 15,
           }}
@@ -167,7 +167,11 @@ export default function ConfigServer() {
         }}
       >
         {currentUrl ? (
-          <Button type="bare" style={{ color: colors.n4 }} onClick={onSkip}>
+          <Button
+            type="bare"
+            style={{ color: theme.pageTextLight }}
+            onClick={onSkip}
+          >
             Stop using a server
           </Button>
         ) : (
@@ -176,7 +180,7 @@ export default function ConfigServer() {
               <Button
                 type="bare"
                 style={{
-                  color: colors.n4,
+                  color: theme.pageTextLight,
                   margin: 5,
                   marginRight: 15,
                 }}
@@ -187,7 +191,7 @@ export default function ConfigServer() {
             )}
             <Button
               type="bare"
-              style={{ color: colors.n4, margin: 5 }}
+              style={{ color: theme.pageTextLight, margin: 5 }}
               onClick={onSkip}
             >
               Don’t use a server
diff --git a/packages/desktop-client/src/components/manager/DeleteFile.js b/packages/desktop-client/src/components/manager/DeleteFile.js
index dc0e38bcd14..28eb1dc3fa5 100644
--- a/packages/desktop-client/src/components/manager/DeleteFile.js
+++ b/packages/desktop-client/src/components/manager/DeleteFile.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import { ButtonWithLoading } from '../common/Button';
 import Modal from '../common/Modal';
 import Text from '../common/Text';
@@ -62,7 +62,7 @@ export default function DeleteMenu({ modalProps, actions, file }) {
                 type="primary"
                 loading={loadingState === 'cloud'}
                 style={{
-                  backgroundColor: colors.r4,
+                  backgroundColor: theme.errorText,
                   alignSelf: 'center',
                   border: 0,
                   padding: '10px 30px',
@@ -110,12 +110,12 @@ export default function DeleteMenu({ modalProps, actions, file }) {
                   fontSize: 14,
                   ...(isRemote
                     ? {
-                        color: colors.r4,
-                        borderColor: colors.r4,
+                        color: theme.errorText,
+                        borderColor: theme.errorText,
                       }
                     : {
                         border: 0,
-                        backgroundColor: colors.r4,
+                        backgroundColor: theme.errorText,
                       }),
                 }}
                 onClick={onDeleteLocal}
diff --git a/packages/desktop-client/src/components/manager/Import.js b/packages/desktop-client/src/components/manager/Import.js
index 08bb54ca5c0..a57ce920a40 100644
--- a/packages/desktop-client/src/components/manager/Import.js
+++ b/packages/desktop-client/src/components/manager/Import.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
 import Block from '../common/Block';
 import Button from '../common/Button';
 import Modal from '../common/Modal';
@@ -36,7 +36,7 @@ function Import({ modalProps, actions }) {
 
   let itemStyle = {
     padding: 10,
-    border: '1px solid ' + colors.border,
+    border: '1px solid ' + theme.tableBorder,
     borderRadius: 6,
     marginBottom: 10,
     display: 'block',
@@ -47,7 +47,7 @@ function Import({ modalProps, actions }) {
       {() => (
         <View style={{ ...styles.smallText, lineHeight: 1.5 }}>
           {error && (
-            <Block style={{ color: colors.r4, marginBottom: 15 }}>
+            <Block style={{ color: theme.errorText, marginBottom: 15 }}>
               {getErrorMessage(error)}
             </Block>
           )}
@@ -59,19 +59,19 @@ function Import({ modalProps, actions }) {
 
           <Button style={itemStyle} onClick={() => onSelectType('ynab4')}>
             <span style={{ fontWeight: 700 }}>YNAB4</span>
-            <View style={{ color: colors.n5 }}>
+            <View style={{ color: theme.alt2PillText }}>
               The old unsupported desktop app
             </View>
           </Button>
           <Button style={itemStyle} onClick={() => onSelectType('ynab5')}>
             <span style={{ fontWeight: 700 }}>nYNAB</span>
-            <View style={{ color: colors.n5 }}>
+            <View style={{ color: theme.alt2PillText }}>
               <div>The newer web app</div>
             </View>
           </Button>
           <Button style={itemStyle} onClick={() => onSelectType('actual')}>
             <span style={{ fontWeight: 700 }}>Actual</span>
-            <View style={{ color: colors.n5 }}>
+            <View style={{ color: theme.alt2PillText }}>
               <div>Import a file exported from Actual</div>
             </View>
           </Button>
diff --git a/packages/desktop-client/src/components/manager/ImportActual.tsx b/packages/desktop-client/src/components/manager/ImportActual.tsx
index dbc77423942..0a66be3f6ce 100644
--- a/packages/desktop-client/src/components/manager/ImportActual.tsx
+++ b/packages/desktop-client/src/components/manager/ImportActual.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 
 import { importBudget } from 'loot-core/src/client/actions/budgets';
 
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
 import Block from '../common/Block';
 import { ButtonWithLoading } from '../common/Button';
 import Modal, { type ModalProps } from '../common/Modal';
@@ -63,7 +63,7 @@ function Import({ modalProps }: ImportProps) {
       {() => (
         <View style={{ ...styles.smallText, lineHeight: 1.5, marginTop: 20 }}>
           {error && (
-            <Block style={{ color: colors.r4, marginBottom: 15 }}>
+            <Block style={{ color: theme.errorText, marginBottom: 15 }}>
               {getErrorMessage(error)}
             </Block>
           )}
diff --git a/packages/desktop-client/src/components/manager/ImportYNAB4.tsx b/packages/desktop-client/src/components/manager/ImportYNAB4.tsx
index cefe3db03a9..7e716371484 100644
--- a/packages/desktop-client/src/components/manager/ImportYNAB4.tsx
+++ b/packages/desktop-client/src/components/manager/ImportYNAB4.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 
 import { importBudget } from 'loot-core/src/client/actions/budgets';
 
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
 import Block from '../common/Block';
 import { ButtonWithLoading } from '../common/Button';
 import Modal, { type ModalProps } from '../common/Modal';
@@ -51,7 +51,7 @@ function Import({ modalProps }: ImportProps) {
       {() => (
         <View style={{ ...styles.smallText, lineHeight: 1.5, marginTop: 20 }}>
           {error && (
-            <Block style={{ color: colors.r4, marginBottom: 15 }}>
+            <Block style={{ color: theme.errorText, marginBottom: 15 }}>
               {getErrorMessage(error)}
             </Block>
           )}
diff --git a/packages/desktop-client/src/components/manager/ImportYNAB5.tsx b/packages/desktop-client/src/components/manager/ImportYNAB5.tsx
index 0c1839871d0..3b7a29393a6 100644
--- a/packages/desktop-client/src/components/manager/ImportYNAB5.tsx
+++ b/packages/desktop-client/src/components/manager/ImportYNAB5.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 
 import { importBudget } from 'loot-core/src/client/actions/budgets';
 
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
 import Block from '../common/Block';
 import { ButtonWithLoading } from '../common/Button';
 import ExternalLink from '../common/ExternalLink';
@@ -54,7 +54,7 @@ function Import({ modalProps }: ImportProps) {
       {() => (
         <View style={{ ...styles.smallText, lineHeight: 1.5, marginTop: 20 }}>
           {error && (
-            <Block style={{ color: colors.r4, marginBottom: 15 }}>
+            <Block style={{ color: theme.errorText, marginBottom: 15 }}>
               {getErrorMessage(error)}
             </Block>
           )}
diff --git a/packages/desktop-client/src/components/manager/WelcomeScreen.js b/packages/desktop-client/src/components/manager/WelcomeScreen.js
index 1fc42330d23..53125f8d2f2 100644
--- a/packages/desktop-client/src/components/manager/WelcomeScreen.js
+++ b/packages/desktop-client/src/components/manager/WelcomeScreen.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useActions } from '../../hooks/useActions';
-import { colors, styles } from '../../style';
+import { styles, theme } from '../../style';
 import Button from '../common/Button';
 import ExternalLink from '../common/ExternalLink';
 import Paragraph from '../common/Paragraph';
@@ -48,7 +48,7 @@ export default function WelcomeScreen() {
           to help you get your bearings, and check out the rest of the
           documentation while you’re there to learn more about advanced topics.
         </Paragraph>
-        <Paragraph style={{ color: colors.n5 }}>
+        <Paragraph style={{ color: theme.altpageTextSubdued }}>
           Get started by importing an existing budget file from Actual or
           another budgeting app, or start fresh with an empty budget. You can
           always create or import another budget later.
diff --git a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js
index 141e53b570c..9c209ed7a4b 100644
--- a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js
+++ b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import CategoryAutocomplete from '../autocomplete/CategoryAutocomplete';
 import Block from '../common/Block';
 import Button from '../common/Button';
@@ -29,7 +29,16 @@ export default function ConfirmCategoryDelete({
         msg = 'Something bad happened, sorry!';
     }
 
-    return <Text style={{ marginTop: 15, color: colors.r4 }}>{msg}</Text>;
+    return (
+      <Text
+        style={{
+          marginTop: 15,
+          color: theme.errorText,
+        }}
+      >
+        {msg}
+      </Text>
+    );
   };
 
   const isIncome = !!(category || group).is_income;
diff --git a/packages/desktop-client/src/components/modals/CreateEncryptionKey.js b/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
index 0012680877d..9ead88f342e 100644
--- a/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
+++ b/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
@@ -5,7 +5,7 @@ import { css } from 'glamor';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { getCreateKeyError } from 'loot-core/src/shared/errors';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import { ButtonWithLoading } from '../common/Button';
 import ExternalLink from '../common/ExternalLink';
 import InitialFocus from '../common/InitialFocus';
@@ -128,7 +128,7 @@ export default function CreateEncryptionKey({
               {error && (
                 <View
                   style={{
-                    color: colors.r4,
+                    color: theme.errorText,
                     textAlign: 'center',
                     fontSize: 13,
                     marginBottom: 3,
diff --git a/packages/desktop-client/src/components/modals/EditField.js b/packages/desktop-client/src/components/modals/EditField.js
index 62bd9bffa52..1e9f09af25e 100644
--- a/packages/desktop-client/src/components/modals/EditField.js
+++ b/packages/desktop-client/src/components/modals/EditField.js
@@ -9,7 +9,7 @@ import { amountToInteger } from 'loot-core/src/shared/util';
 import { useActions } from '../../hooks/useActions';
 import useCategories from '../../hooks/useCategories';
 import { useResponsive } from '../../ResponsiveProvider';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
 import CategoryAutocomplete from '../autocomplete/CategoryAutocomplete';
 import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
@@ -86,7 +86,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
           groupHeaderStyle={
             isNarrowWidth
               ? {
-                  color: colors.n6,
+                  color: theme.altTableText,
                 }
               : undefined
           }
@@ -118,7 +118,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
           groupHeaderStyle={
             isNarrowWidth
               ? {
-                  color: colors.n6,
+                  color: theme.altTableText,
                 }
               : undefined
           }
@@ -155,7 +155,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
           groupHeaderStyle={
             isNarrowWidth
               ? {
-                  color: colors.n6,
+                  color: theme.altTableText,
                 }
               : undefined
           }
@@ -192,7 +192,10 @@ export default function EditField({ modalProps, name, onSubmit }) {
         padding: '15px 10px',
         borderRadius: '6px',
         ...(minWidth && { minWidth }),
-        ...(!isNarrowWidth && { backgroundColor: colors.n1, color: 'white' }),
+        ...(!isNarrowWidth && {
+          backgroundColor: theme.mobileModalBackground,
+          color: theme.mobileModalText,
+        }),
       }}
     >
       {() => (
@@ -202,7 +205,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
               title={label}
               style={{
                 alignSelf: 'center',
-                color: colors.b10,
+                color: theme.altMobileModalText,
                 marginBottom: 10,
               }}
             />
diff --git a/packages/desktop-client/src/components/modals/FixEncryptionKey.js b/packages/desktop-client/src/components/modals/FixEncryptionKey.js
index e8edc6237cb..57e52e37edf 100644
--- a/packages/desktop-client/src/components/modals/FixEncryptionKey.js
+++ b/packages/desktop-client/src/components/modals/FixEncryptionKey.js
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { getTestKeyError } from 'loot-core/src/shared/errors';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Button, { ButtonWithLoading } from '../common/Button';
 import ExternalLink from '../common/ExternalLink';
 import InitialFocus from '../common/InitialFocus';
@@ -53,7 +53,7 @@ export default function FixEncryptionKey({
             style={{
               fontSize: 25,
               fontWeight: 700,
-              color: colors.n2,
+              color: theme.pageTextDark,
               margin: '20px 0',
             }}
           >
@@ -96,7 +96,7 @@ export default function FixEncryptionKey({
               {error && (
                 <View
                   style={{
-                    color: colors.r4,
+                    color: theme.errorText,
                     textAlign: 'center',
                     fontSize: 13,
                     marginBottom: 3,
diff --git a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js
index a17520d5a45..acc68f08c62 100644
--- a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js
+++ b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js
@@ -7,7 +7,7 @@ import { sendCatch } from 'loot-core/src/platform/client/fetch';
 import useGoCardlessStatus from '../../hooks/useGoCardlessStatus';
 import AnimatedLoading from '../../icons/AnimatedLoading';
 import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import { Error, Warning } from '../alerts';
 import Autocomplete from '../autocomplete/Autocomplete';
 import Button from '../common/Button';
@@ -154,7 +154,7 @@ export default function GoCardlessExternalMsg({
             be misconfigured. Please{' '}
             <LinkButton
               onClick={onGoCardlessInit}
-              style={{ color: colors.b3, display: 'inline' }}
+              style={{ color: theme.altFormLabelText, display: 'inline' }}
             >
               set them up
             </LinkButton>{' '}
@@ -266,10 +266,10 @@ export default function GoCardlessExternalMsg({
           {waiting || isConfigurationLoading ? (
             <View style={{ alignItems: 'center', marginTop: 15 }}>
               <AnimatedLoading
-                color={colors.n1}
+                color={theme.pageTextDark}
                 style={{ width: 20, height: 20 }}
               />
-              <View style={{ marginTop: 10, color: colors.n4 }}>
+              <View style={{ marginTop: 10, color: theme.pageText }}>
                 {isConfigurationLoading
                   ? 'Checking GoCardless configuration..'
                   : waiting === 'browser'
@@ -293,8 +293,8 @@ export default function GoCardlessExternalMsg({
                 fontSize: 15,
                 fontWeight: 600,
                 marginTop: 10,
-                backgroundColor: colors.g4,
-                borderColor: colors.g4,
+                backgroundColor: theme.alt3NoticeText,
+                borderColor: theme.alt3NoticeText,
               }}
               onClick={onContinue}
             >
@@ -304,7 +304,7 @@ export default function GoCardlessExternalMsg({
             renderLinkButton()
           ) : (
             <>
-              <Paragraph style={{ color: colors.r5 }}>
+              <Paragraph style={{ color: theme.errorText }}>
                 GoCardless integration has not yet been configured.
               </Paragraph>
               <Button type="primary" onClick={onGoCardlessInit}>
diff --git a/packages/desktop-client/src/components/modals/ImportTransactions.js b/packages/desktop-client/src/components/modals/ImportTransactions.js
index 93728cf77ca..87b51d7744c 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactions.js
+++ b/packages/desktop-client/src/components/modals/ImportTransactions.js
@@ -12,7 +12,7 @@ import {
 
 import { useActions } from '../../hooks/useActions';
 import useFeatureFlag from '../../hooks/useFeatureFlag';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
 import Button, { ButtonWithLoading } from '../common/Button';
 import Input from '../common/Input';
 import Modal from '../common/Modal';
@@ -132,11 +132,13 @@ function ParsedDate({ parseDateFormat, showParsed, dateFormat, date }) {
     <Text>
       <Text>
         {date || (
-          <Text style={{ color: colors.n4, fontStyle: 'italic' }}>Empty</Text>
+          <Text style={{ color: theme.pageTextLight, fontStyle: 'italic' }}>
+            Empty
+          </Text>
         )}{' '}
         &rarr;{' '}
       </Text>
-      <Text style={{ color: parsed ? colors.g3 : colors.r4 }}>
+      <Text style={{ color: parsed ? theme.alt3NoticeText : theme.errorText }}>
         {parsed || 'Invalid'}
       </Text>
     </Text>
@@ -275,7 +277,11 @@ function Transaction({
   inflow = amountToCurrency(inflow);
 
   return (
-    <Row style={{ backgroundColor: 'white' }}>
+    <Row
+      style={{
+        backgroundColor: theme.tableBackground,
+      }}
+    >
       <Field width={200}>
         {showParsed ? (
           <ParsedDate
@@ -328,7 +334,7 @@ function Transaction({
 
 function SubLabel({ title }) {
   return (
-    <Text style={{ fontSize: 13, marginBottom: 3, color: colors.n3 }}>
+    <Text style={{ fontSize: 13, marginBottom: 3, color: theme.pageText }}>
       {title}
     </Text>
   );
@@ -414,7 +420,10 @@ function CheckboxOption({ id, checked, disabled, onChange, children, style }) {
       />
       <label
         htmlFor={id}
-        style={{ userSelect: 'none', color: disabled ? colors.n6 : null }}
+        style={{
+          userSelect: 'none',
+          color: disabled ? theme.pageTextSubdued : null,
+        }}
       >
         {children}
       </label>
@@ -821,7 +830,7 @@ export default function ImportTransactions({ modalProps, options }) {
     >
       {error && !error.parsed && (
         <View style={{ alignItems: 'center', marginBottom: 15 }}>
-          <Text style={{ marginRight: 10, color: colors.r4 }}>
+          <Text style={{ marginRight: 10, color: theme.errorText }}>
             <strong>Error:</strong> {error.message}
           </Text>
         </View>
@@ -831,7 +840,7 @@ export default function ImportTransactions({ modalProps, options }) {
           style={{
             flex: 'unset',
             height: 300,
-            border: '1px solid ' + colors.border,
+            border: '1px solid ' + theme.tableBorder,
           }}
         >
           <TableHeader headers={headers} />
@@ -839,7 +848,7 @@ export default function ImportTransactions({ modalProps, options }) {
           <TableWithNavigator
             items={transactions}
             fields={['payee', 'amount']}
-            style={{ backgroundColor: colors.n11 }}
+            style={{ backgroundColor: theme.tableHeaderBackground }}
             getItemKey={index => index}
             renderEmpty={() => {
               return (
@@ -847,7 +856,7 @@ export default function ImportTransactions({ modalProps, options }) {
                   style={{
                     textAlign: 'center',
                     marginTop: 25,
-                    color: colors.n4,
+                    color: theme.tableHeaderText,
                     fontStyle: 'italic',
                   }}
                 >
@@ -875,7 +884,7 @@ export default function ImportTransactions({ modalProps, options }) {
       {error && error.parsed && (
         <View
           style={{
-            color: colors.r4,
+            color: theme.errorText,
             alignItems: 'center',
             marginTop: 10,
           }}
diff --git a/packages/desktop-client/src/components/modals/LoadBackup.js b/packages/desktop-client/src/components/modals/LoadBackup.js
index 33a946af075..92b12199c5c 100644
--- a/packages/desktop-client/src/components/modals/LoadBackup.js
+++ b/packages/desktop-client/src/components/modals/LoadBackup.js
@@ -2,7 +2,7 @@ import React, { Component, useState, useEffect } from 'react';
 
 import { send, listen, unlisten } from 'loot-core/src/platform/client/fetch';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Block from '../common/Block';
 import Button from '../common/Button';
 import Modal from '../common/Modal';
@@ -119,7 +119,7 @@ function LoadBackup({
             )}
           </View>
           {previousBackups.length === 0 ? (
-            <Block style={{ color: colors.n6, marginLeft: 20 }}>
+            <Block style={{ color: theme.altTableText, marginLeft: 20 }}>
               No backups available
             </Block>
           ) : (
diff --git a/packages/desktop-client/src/components/modals/PlaidExternalMsg.js b/packages/desktop-client/src/components/modals/PlaidExternalMsg.js
index bf1315ef3d0..b6d8867b3ee 100644
--- a/packages/desktop-client/src/components/modals/PlaidExternalMsg.js
+++ b/packages/desktop-client/src/components/modals/PlaidExternalMsg.js
@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react';
 
 import AnimatedLoading from '../../icons/AnimatedLoading';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import { Error } from '../alerts';
 import Button from '../common/Button';
 import Modal, { ModalButtons } from '../common/Modal';
@@ -76,10 +76,10 @@ export default function PlaidExternalMsg({
           {waiting ? (
             <View style={{ alignItems: 'center', marginTop: 15 }}>
               <AnimatedLoading
-                color={colors.n1}
+                color={theme.pageTextDark}
                 style={{ width: 20, height: 20 }}
               />
-              <View style={{ marginTop: 10, color: colors.n4 }}>
+              <View style={{ marginTop: 10, color: theme.pageText }}>
                 {waiting === 'browser'
                   ? 'Waiting on browser...'
                   : waiting === 'accounts'
@@ -95,8 +95,8 @@ export default function PlaidExternalMsg({
                 fontSize: 15,
                 fontWeight: 600,
                 marginTop: 10,
-                backgroundColor: colors.g4,
-                borderColor: colors.g4,
+                backgroundColor: theme.alt3NoticeText,
+                borderColor: theme.alt3NoticeText,
               }}
               onClick={onContinue}
             >
@@ -117,17 +117,17 @@ export default function PlaidExternalMsg({
             </Button>
           )}
           <div style={{ marginTop: waiting ? 30 : 35 }}>
-            <Text style={{ color: colors.n5, fontWeight: 600 }}>
+            <Text style={{ color: theme.pageText, fontWeight: 600 }}>
               Why not link it in the app?
             </Text>
           </div>
           <Text
             style={{
               marginTop: 10,
-              color: colors.n5,
+              color: theme.pageText,
               fontSize: 13,
               '& a, & a:visited': {
-                color: colors.n5,
+                color: theme.pageText,
               },
             }}
           >
diff --git a/packages/desktop-client/src/components/util/DisplayId.js b/packages/desktop-client/src/components/util/DisplayId.js
index 3faf67e4308..3947f9f1e5d 100644
--- a/packages/desktop-client/src/components/util/DisplayId.js
+++ b/packages/desktop-client/src/components/util/DisplayId.js
@@ -3,10 +3,14 @@ import React from 'react';
 import { CachedAccounts } from 'loot-core/src/client/data-hooks/accounts';
 import { CachedPayees } from 'loot-core/src/client/data-hooks/payees';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Text from '../common/Text';
 
-export default function DisplayId({ type, id, noneColor = colors.n8 }) {
+export default function DisplayId({
+  type,
+  id,
+  noneColor = theme.pageTextSubdued,
+}) {
   let DataComponent;
 
   switch (type) {
diff --git a/packages/desktop-client/src/components/util/LoadComponent.tsx b/packages/desktop-client/src/components/util/LoadComponent.tsx
index d8009096fa6..08be27854aa 100644
--- a/packages/desktop-client/src/components/util/LoadComponent.tsx
+++ b/packages/desktop-client/src/components/util/LoadComponent.tsx
@@ -1,7 +1,7 @@
 import { type ComponentType, useEffect, useState } from 'react';
 
 import AnimatedLoading from '../../icons/AnimatedLoading';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
 import Block from '../common/Block';
 import View from '../common/View';
 
@@ -41,7 +41,7 @@ function LoadComponentInner<K extends string>({
         {message && (
           <Block style={{ marginBottom: 20, fontSize: 18 }}>{message}</Block>
         )}
-        <AnimatedLoading width={25} color={colors.n1} />
+        <AnimatedLoading width={25} color={theme.pageTextDark} />
       </View>
     );
   }
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 40a2e829e15..6bb32f067e5 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -86,6 +86,9 @@ export const mobileNavItem = colorPalette.navy150;
 export const mobileNavItemSelected = colorPalette.purple400;
 export const mobileAccountShadow = cardShadow;
 export const mobileAccountText = colorPalette.blue800;
+export const mobileModalBackground = colorPalette.navy900;
+export const mobileModalText = colorPalette.white;
+export const altMobileModalText = colorPalette.blue100;
 
 // Mobile view themes (for the top bar)
 export const mobileAccountViewTheme = colorPalette.navy50;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index a36e26b0a05..292d61143e7 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -86,6 +86,9 @@ export const mobileNavItem = colorPalette.gray300;
 export const mobileNavItemSelected = colorPalette.purple500;
 export const mobileAccountShadow = colorPalette.navy300;
 export const mobileAccountText = colorPalette.blue800;
+export const mobileModalBackground = colorPalette.navy900;
+export const mobileModalText = colorPalette.white;
+export const altMobileModalText = colorPalette.blue100;
 
 // Mobile view themes (for the top bar)
 export const mobileAccountViewTheme = colorPalette.navy50;
diff --git a/upcoming-release-notes/1503.md b/upcoming-release-notes/1503.md
new file mode 100644
index 00000000000..0ea6bd904aa
--- /dev/null
+++ b/upcoming-release-notes/1503.md
@@ -0,0 +1,5 @@
+---
+category: Enhancements
+authors: [biohzrddd, carkom]
+---
+Phase four of dark theme, to include manager/modals
\ No newline at end of file