From f6f496f656f6f9016df815955d08d06a2ce87c5f Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Sat, 16 Sep 2023 01:56:19 -0700
Subject: [PATCH] Dark Theme Final (#1513)

---
 .eslintrc.js                                  |  38 +------
 .../src/components/LoggedInUser.tsx           |   4 +-
 .../src/components/MobileWebMessage.tsx       |   6 +-
 .../src/components/NotesButton.tsx            |  18 +--
 .../src/components/Notifications.tsx          |  34 ++++--
 .../desktop-client/src/components/Page.tsx    |   6 +-
 .../src/components/Titlebar.tsx               |  16 +--
 .../src/components/UpdateNotification.tsx     |  18 ++-
 .../src/components/accounts/Header.js         |   4 +-
 .../src/components/budget/BudgetCategories.js |   9 +-
 .../src/components/budget/BudgetTotals.js     |  11 +-
 .../src/components/budget/ExpenseGroup.js     |   4 +-
 .../src/components/budget/IncomeGroup.js      |   4 +-
 .../src/components/budget/MobileBudget.js     |   3 +-
 .../components/budget/MobileBudgetTable.js    |  68 ++++++-----
 .../src/components/budget/MobileTable.tsx     |   4 +-
 .../components/budget/MonthCountSelector.tsx  |   6 +-
 .../src/components/budget/MonthPicker.js      |  14 ++-
 .../src/components/budget/RenderMonths.js     |   4 +-
 .../src/components/budget/SidebarCategory.js  |   8 +-
 .../src/components/budget/SidebarGroup.js     |   8 +-
 .../src/components/budget/constants.js        |   4 -
 .../budget/rollover/BudgetSummary.tsx         |  27 ++---
 .../budget/rollover/rollover-components.tsx   |  34 +++---
 .../src/components/budget/util.js             |  13 ++-
 .../src/components/common/ExternalLink.tsx    |   6 +-
 .../src/components/mobile/MobileForms.js      |   9 +-
 .../src/components/modals/BudgetSummary.js    |   5 +-
 .../transactions/MobileTransaction.js         | 107 +++++++++++-------
 .../transactions/TransactionsTable.js         |  28 ++---
 packages/desktop-client/src/style/styles.ts   |   1 +
 .../desktop-client/src/style/themes/dark.ts   |   7 ++
 .../src/style/themes/development.ts           |   7 ++
 .../desktop-client/src/style/themes/light.ts  |  22 ++++
 upcoming-release-notes/1513.md                |   5 +
 35 files changed, 312 insertions(+), 250 deletions(-)
 delete mode 100644 packages/desktop-client/src/components/budget/constants.js
 create mode 100644 upcoming-release-notes/1513.md

diff --git a/.eslintrc.js b/.eslintrc.js
index 8f4181aff90..ef5d7e4e2a8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -216,43 +216,9 @@ module.exports = {
       rules: { 'import/no-unused-modules': 'off' },
     },
     {
-      //This is temporary. We will remove these as dark theme gets ported
       files: [
-        './packages/desktop-client/src/components/LoggedInUser.*',
-        './packages/desktop-client/src/components/MobileWebMessage.*',
-        './packages/desktop-client/src/components/NotesButton.*',
-        './packages/desktop-client/src/components/Notifications.*',
-        './packages/desktop-client/src/components/Page.*',
-        './packages/desktop-client/src/components/Titlebar.*',
-        './packages/desktop-client/src/components/UpdateNotification.*',
-        './packages/desktop-client/src/components/accounts/Header.*',
-        './packages/desktop-client/src/components/alerts.*',
-        './packages/desktop-client/src/components/budget/BudgetCategories.*',
-        './packages/desktop-client/src/components/budget/BudgetTotals.*',
-        './packages/desktop-client/src/components/budget/ExpenseGroup.*',
-        './packages/desktop-client/src/components/budget/IncomeGroup.*',
-        './packages/desktop-client/src/components/budget/MobileBudget.*',
-        './packages/desktop-client/src/components/budget/MobileBudgetTable.*',
-        './packages/desktop-client/src/components/budget/MobileTable.*',
-        './packages/desktop-client/src/components/budget/MonthCountSelector.*',
-        './packages/desktop-client/src/components/budget/MonthPicker.*',
-        './packages/desktop-client/src/components/budget/RenderMonths.*',
-        './packages/desktop-client/src/components/budget/SidebarCategory.*',
-        './packages/desktop-client/src/components/budget/SidebarGroup.*',
-        './packages/desktop-client/src/components/budget/constants.*',
-        './packages/desktop-client/src/components/budget/misc.*',
-        './packages/desktop-client/src/components/budget/report/BudgetSummary.*',
-        './packages/desktop-client/src/components/budget/report/components.*',
-        './packages/desktop-client/src/components/budget/rollover/BudgetSummary.*',
-        './packages/desktop-client/src/components/budget/rollover/rollover-components.*',
-        './packages/desktop-client/src/components/budget/util.*',
-        './packages/desktop-client/src/components/common/ExternalLink.*',
-        './packages/desktop-client/src/components/modals/BudgetSummary.*',
-        './packages/desktop-client/src/components/payees/index.*',
-        './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/style/*',
+        './packages/desktop-client/src/style/index.*',
+        './packages/desktop-client/src/style/palette.*',
       ],
       rules: {
         'no-restricted-imports': ['off', { patterns: restrictedImportColors }],
diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx
index 4f432c8077f..7e81e9a732d 100644
--- a/packages/desktop-client/src/components/LoggedInUser.tsx
+++ b/packages/desktop-client/src/components/LoggedInUser.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 import { useActions } from '../hooks/useActions';
-import { colors, styles, type CSSProperties } from '../style';
+import { theme, styles, type CSSProperties } from '../style';
 
 import Button from './common/Button';
 import Menu from './common/Menu';
@@ -78,7 +78,7 @@ export default function LoggedInUser({
     return (
       <Text
         style={{
-          color: colors.n5,
+          color: theme.altpageTextSubdued,
           fontStyle: 'italic',
           ...styles.delayedFadeIn,
           ...style,
diff --git a/packages/desktop-client/src/components/MobileWebMessage.tsx b/packages/desktop-client/src/components/MobileWebMessage.tsx
index 9afb7830382..d68b927f0cc 100644
--- a/packages/desktop-client/src/components/MobileWebMessage.tsx
+++ b/packages/desktop-client/src/components/MobileWebMessage.tsx
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { savePrefs } from 'loot-core/src/client/actions';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { colors, styles } from '../style';
+import { theme, styles } from '../style';
 
 import Button from './common/Button';
 import Text from './common/Text';
@@ -55,8 +55,8 @@ export default function MobileWebMessage() {
         bottom: 0,
         left: 0,
         right: 0,
-        backgroundColor: colors.n1,
-        color: 'white',
+        backgroundColor: theme.mobileModalBackground,
+        color: theme.mobileModalText,
         padding: 10,
         margin: 10,
         borderRadius: 6,
diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
index ac46eed8bb4..7d25feb94c3 100644
--- a/packages/desktop-client/src/components/NotesButton.tsx
+++ b/packages/desktop-client/src/components/NotesButton.tsx
@@ -9,7 +9,7 @@ import { useLiveQuery } from 'loot-core/src/client/query-hooks';
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import CustomNotesPaper from '../icons/v2/CustomNotesPaper';
-import { type CSSProperties, colors } from '../style';
+import { type CSSProperties, theme } from '../style';
 import { remarkBreaks, sequentialNewlinesPlugin } from '../util/markdown';
 
 import Button from './common/Button';
@@ -43,23 +43,23 @@ const markdownStyles = css({
   },
   '& blockquote': {
     paddingLeft: '0.75rem',
-    borderLeft: '3px solid ' + colors.p6,
+    borderLeft: '3px solid ' + theme.markdownDark,
     margin: 0,
   },
   '& hr': {
     borderTop: 'none',
     borderLeft: 'none',
     borderRight: 'none',
-    borderBottom: '1px solid ' + colors.p9,
+    borderBottom: '1px solid ' + theme.markdownNormal,
   },
   '& code': {
-    backgroundColor: colors.p10,
+    backgroundColor: theme.markdownLight,
     padding: '0.1rem 0.5rem',
     borderRadius: '0.25rem',
   },
   '& pre': {
     padding: '0.5rem',
-    backgroundColor: colors.p10,
+    backgroundColor: theme.markdownLight,
     borderRadius: '0.5rem',
     margin: 0,
     ':not(:first-child)': {
@@ -72,7 +72,7 @@ const markdownStyles = css({
     },
   },
   '& table, & th, & td': {
-    border: '1px solid ' + colors.p9,
+    border: '1px solid ' + theme.markdownNormal,
   },
   '& table': {
     borderCollapse: 'collapse',
@@ -110,7 +110,7 @@ function NotesTooltip({
         <textarea
           ref={inputRef}
           className={`${css({
-            border: '1px solid ' + colors.border,
+            border: '1px solid ' + theme.buttonNormalBorder,
             padding: 7,
             minWidth: 350,
             minHeight: 120,
@@ -145,7 +145,7 @@ export default function NotesButton({
   id,
   width = 12,
   height = 12,
-  defaultColor = colors.n8,
+  defaultColor = theme.pageBackgroundModalActive,
   tooltipPosition,
   style,
 }: NotesButtonProps) {
@@ -191,7 +191,7 @@ export default function NotesButton({
           color: defaultColor,
           ...style,
           ...(hasNotes && { display: 'flex !important' }),
-          ...(tooltipOpen && { color: colors.n1 }),
+          ...(tooltipOpen && { color: theme.buttonNormalText }),
         }}
         {...tooltip.getOpenEvents()}
       >
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
index 368d095563c..f61552521e2 100644
--- a/packages/desktop-client/src/components/Notifications.tsx
+++ b/packages/desktop-client/src/components/Notifications.tsx
@@ -11,7 +11,7 @@ import type { NotificationWithId } from 'loot-core/src/client/state-types/notifi
 import { useActions } from '../hooks/useActions';
 import AnimatedLoading from '../icons/AnimatedLoading';
 import Delete from '../icons/v0/Delete';
-import { styles, colors, type CSSProperties } from '../style';
+import { styles, theme, type CSSProperties } from '../style';
 
 import Button, { ButtonWithLoading } from './common/Button';
 import ExternalLink from './common/ExternalLink';
@@ -107,7 +107,11 @@ function Notification({
     <View
       style={{
         marginTop: 10,
-        color: positive ? colors.g3 : error ? colors.r3 : colors.y2,
+        color: positive
+          ? theme.alt4NoticeText
+          : error
+          ? theme.alt3ErrorText
+          : theme.alt4WarningText,
       }}
     >
       <Stack
@@ -117,12 +121,16 @@ function Notification({
           padding: '14px 14px',
           fontSize: 14,
           backgroundColor: positive
-            ? colors.g11
+            ? theme.alt2NoticeBackground
             : error
-            ? colors.r11
-            : colors.y10,
+            ? theme.errorBackground
+            : theme.alt2WarningBackground,
           borderTop: `3px solid ${
-            positive ? colors.g5 : error ? colors.r5 : colors.y4
+            positive
+              ? theme.altNoticeAccent
+              : error
+              ? theme.altErrorAccent
+              : theme.altWarningAccent
           }`,
           ...styles.shadowLarge,
           maxWidth: 550,
@@ -164,17 +172,21 @@ function Notification({
               style={{
                 backgroundColor: 'transparent',
                 border: `1px solid ${
-                  positive ? colors.g5 : error ? colors.r4 : colors.y3
+                  positive
+                    ? theme.altNoticeAccent
+                    : error
+                    ? theme.altErrorAccent
+                    : theme.altWarningAccent
                 }`,
                 color: 'currentColor',
                 fontSize: 14,
                 flexShrink: 0,
                 '&:hover, &:active': {
                   backgroundColor: positive
-                    ? colors.g9
+                    ? theme.noticeBackground
                     : error
-                    ? colors.r10
-                    : colors.y9,
+                    ? theme.altErrorBackground
+                    : theme.altWarningBackground,
                 },
               }}
             >
@@ -200,7 +212,7 @@ function Notification({
             left: 0,
             right: 0,
             bottom: 0,
-            backgroundColor: 'rgba(250, 250, 250, .75)',
+            backgroundColor: theme.tableBackground,
             alignItems: 'center',
             justifyContent: 'center',
           }}
diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
index b6ac595eaee..1971861caaf 100644
--- a/packages/desktop-client/src/components/Page.tsx
+++ b/packages/desktop-client/src/components/Page.tsx
@@ -1,7 +1,7 @@
 import React, { type ReactNode } from 'react';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { colors, styles, type CSSProperties } from '../style';
+import { theme, styles, type CSSProperties } from '../style';
 
 import Text from './common/Text';
 import View from './common/View';
@@ -20,8 +20,8 @@ function PageTitle({
       <View
         style={{
           alignItems: 'center',
-          backgroundColor: colors.b2,
-          color: 'white',
+          backgroundColor: theme.sidebarItemBackground,
+          color: theme.mobileModalText,
           flexDirection: 'row',
           flex: '1 0 auto',
           fontSize: 18,
diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
index a91446e353f..3e449defd85 100644
--- a/packages/desktop-client/src/components/Titlebar.tsx
+++ b/packages/desktop-client/src/components/Titlebar.tsx
@@ -21,7 +21,7 @@ import SvgEye from '../icons/v2/Eye';
 import SvgEyeSlashed from '../icons/v2/EyeSlashed';
 import NavigationMenu from '../icons/v2/NavigationMenu';
 import { useResponsive } from '../ResponsiveProvider';
-import { colors, type CSSProperties } from '../style';
+import { theme, type CSSProperties } from '../style';
 
 import AccountSyncCheck from './accounts/AccountSyncCheck';
 import AnimatedRefresh from './AnimatedRefresh';
@@ -72,7 +72,9 @@ function UncategorizedButton() {
       <ButtonLink
         type="bare"
         to="/accounts/uncategorized"
-        style={{ color: colors.r5 }}
+        style={{
+          color: theme.errorText,
+        }}
       >
         {count} uncategorized {count === 1 ? 'transaction' : 'transactions'}
       </ButtonLink>
@@ -148,19 +150,19 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
 
   const mobileColor =
     syncState === 'error'
-      ? colors.r7
+      ? theme.alt4ErrorText
       : syncState === 'disabled' ||
         syncState === 'offline' ||
         syncState === 'local'
-      ? colors.n9
+      ? theme.sidebarItemText
       : style.color;
   const desktopColor =
     syncState === 'error'
-      ? colors.r4
+      ? theme.alt2ErrorText
       : syncState === 'disabled' ||
         syncState === 'offline' ||
         syncState === 'local'
-      ? colors.n6
+      ? theme.altTableText
       : null;
 
   const activeStyle = isMobile
@@ -337,7 +339,7 @@ export default function Titlebar({ style }) {
         >
           <NavigationMenu
             className="menu"
-            style={{ width: 15, height: 15, color: colors.n5, left: 0 }}
+            style={{ width: 15, height: 15, color: theme.pageText, left: 0 }}
           />
         </Button>
       )}
diff --git a/packages/desktop-client/src/components/UpdateNotification.tsx b/packages/desktop-client/src/components/UpdateNotification.tsx
index df42cc420b5..7e844e02999 100644
--- a/packages/desktop-client/src/components/UpdateNotification.tsx
+++ b/packages/desktop-client/src/components/UpdateNotification.tsx
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 
 import { useActions } from '../hooks/useActions';
 import Close from '../icons/v1/Close';
-import { colors } from '../style';
+import { theme } from '../style';
 
 import Button from './common/Button';
 import LinkButton from './common/LinkButton';
@@ -36,8 +36,8 @@ export default function UpdateNotification() {
           bottom: 0,
           right: 0,
           margin: '15px 17px',
-          backgroundColor: colors.p6,
-          color: 'white',
+          backgroundColor: theme.altPageTextPositive,
+          color: theme.tableBackground,
           padding: '7px 10px',
           borderRadius: 4,
           zIndex: 10000,
@@ -53,13 +53,19 @@ export default function UpdateNotification() {
             <Text>
               <LinkButton
                 onClick={updateApp}
-                style={{ color: 'white', textDecoration: 'underline' }}
+                style={{
+                  color: theme.buttonPrimaryText,
+                  textDecoration: 'underline',
+                }}
               >
                 Restart
               </LinkButton>{' '}
               (
               <LinkButton
-                style={{ color: 'white', textDecoration: 'underline' }}
+                style={{
+                  color: theme.buttonPrimaryText,
+                  textDecoration: 'underline',
+                }}
                 onClick={() =>
                   window.Actual.openURLInBrowser(
                     'https://actualbudget.org/docs/releases',
@@ -74,7 +80,7 @@ export default function UpdateNotification() {
                 style={{ display: 'inline', padding: '1px 7px 2px 7px' }}
                 onClick={() => closeNotification(setAppState)}
               >
-                <Close width={9} style={{ color: 'white' }} />
+                <Close width={9} style={{ color: theme.buttonPrimaryText }} />
               </Button>
             </Text>
           </View>
diff --git a/packages/desktop-client/src/components/accounts/Header.js b/packages/desktop-client/src/components/accounts/Header.js
index eb180b07adf..e6dcfe54942 100644
--- a/packages/desktop-client/src/components/accounts/Header.js
+++ b/packages/desktop-client/src/components/accounts/Header.js
@@ -7,7 +7,7 @@ import ArrowsExpand3 from '../../icons/v2/ArrowsExpand3';
 import ArrowsShrink3 from '../../icons/v2/ArrowsShrink3';
 import DownloadThickBottom from '../../icons/v2/DownloadThickBottom';
 import Pencil1 from '../../icons/v2/Pencil1';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
 import AnimatedRefresh from '../AnimatedRefresh';
 import Button from '../common/Button';
 import InitialFocus from '../common/InitialFocus';
@@ -170,7 +170,7 @@ export function AccountHeader({
                     style={{
                       width: 11,
                       height: 11,
-                      color: colors.n8,
+                      color: theme.altButtonBareText,
                     }}
                   />
                 </Button>
diff --git a/packages/desktop-client/src/components/budget/BudgetCategories.js b/packages/desktop-client/src/components/budget/BudgetCategories.js
index cfec40f1c42..bab700c8494 100644
--- a/packages/desktop-client/src/components/budget/BudgetCategories.js
+++ b/packages/desktop-client/src/components/budget/BudgetCategories.js
@@ -1,11 +1,10 @@
 import React, { memo, useState, useMemo } from 'react';
 
-import { colors } from '../../style';
+import { theme, styles } from '../../style';
 import View from '../common/View';
 import { DropHighlightPosContext } from '../sort';
 import { Row } from '../table';
 
-import { INCOME_HEADER_HEIGHT, MONTH_BOX_SHADOW } from './constants';
 import ExpenseCategory from './ExpenseCategory';
 import ExpenseGroup from './ExpenseGroup';
 import IncomeCategory from './IncomeCategory';
@@ -152,7 +151,7 @@ const BudgetCategories = memo(
           marginBottom: 10,
           backgroundColor: 'white',
           overflow: 'hidden',
-          boxShadow: MONTH_BOX_SHADOW,
+          boxShadow: styles.cardShadow,
           borderRadius: '0 0 4px 4px',
           flex: 1,
         }}
@@ -162,7 +161,7 @@ const BudgetCategories = memo(
           switch (item.type) {
             case 'new-group':
               content = (
-                <Row style={{ backgroundColor: colors.n11 }}>
+                <Row style={{ backgroundColor: theme.altTableBackground }}>
                   <SidebarGroup
                     group={{ id: 'new', name: '' }}
                     editing={true}
@@ -235,7 +234,7 @@ const BudgetCategories = memo(
               content = (
                 <View
                   style={{
-                    height: INCOME_HEADER_HEIGHT,
+                    height: styles.incomeHeaderHeight,
                     backgroundColor: 'white',
                   }}
                 >
diff --git a/packages/desktop-client/src/components/budget/BudgetTotals.js b/packages/desktop-client/src/components/budget/BudgetTotals.js
index 2132d0e0bb5..3a811461fec 100644
--- a/packages/desktop-client/src/components/budget/BudgetTotals.js
+++ b/packages/desktop-client/src/components/budget/BudgetTotals.js
@@ -1,13 +1,12 @@
 import React, { memo, useState } from 'react';
 
 import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
-import { colors } from '../../style';
+import { theme, styles } from '../../style';
 import Button from '../common/Button';
 import Menu from '../common/Menu';
 import View from '../common/View';
 import { Tooltip } from '../tooltips';
 
-import { MONTH_BOX_SHADOW } from './constants';
 import RenderMonths from './RenderMonths';
 import { getScrollbarWidth } from './util';
 
@@ -25,17 +24,17 @@ const BudgetTotals = memo(function BudgetTotals({
         backgroundColor: 'white',
         flexDirection: 'row',
         flexShrink: 0,
-        boxShadow: MONTH_BOX_SHADOW,
+        boxShadow: styles.cardShadow,
         marginLeft: 5,
         marginRight: 5 + getScrollbarWidth(),
         borderRadius: '4px 4px 0 0',
-        borderBottom: '1px solid ' + colors.border,
+        borderBottom: '1px solid ' + theme.tableBorder,
       }}
     >
       <View
         style={{
           width: 200,
-          color: colors.n4,
+          color: theme.pageTextLight,
           justifyContent: 'center',
           paddingLeft: 15,
           paddingRight: 5,
@@ -57,7 +56,7 @@ const BudgetTotals = memo(function BudgetTotals({
           <DotsHorizontalTriple
             width={15}
             height={15}
-            style={{ color: colors.n5 }}
+            style={{ color: theme.altpageTextSubdued }}
           />
           {menuOpen && (
             <Tooltip
diff --git a/packages/desktop-client/src/components/budget/ExpenseGroup.js b/packages/desktop-client/src/components/budget/ExpenseGroup.js
index b9908b9ad9c..14c7322091a 100644
--- a/packages/desktop-client/src/components/budget/ExpenseGroup.js
+++ b/packages/desktop-client/src/components/budget/ExpenseGroup.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import View from '../common/View';
 import { useDraggable, useDroppable, DropHighlight } from '../sort';
 import { Row, ROW_HEIGHT } from '../table';
@@ -56,7 +56,7 @@ function ExpenseGroup({
       style={{
         fontWeight: 600,
         opacity: group.hidden ? 0.33 : undefined,
-        backgroundColor: colors.n11,
+        backgroundColor: theme.altTableBackground,
       }}
     >
       {dragState && !dragState.preview && dragState.type === 'group' && (
diff --git a/packages/desktop-client/src/components/budget/IncomeGroup.js b/packages/desktop-client/src/components/budget/IncomeGroup.js
index 38cbd53cbcf..f7d260fff54 100644
--- a/packages/desktop-client/src/components/budget/IncomeGroup.js
+++ b/packages/desktop-client/src/components/budget/IncomeGroup.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import { Row } from '../table';
 
 import RenderMonths from './RenderMonths';
@@ -19,7 +19,7 @@ function IncomeGroup({
   return (
     <Row
       collapsed={true}
-      style={{ fontWeight: 600, backgroundColor: colors.n11 }}
+      style={{ fontWeight: 600, backgroundColor: theme.altTableBackground }}
     >
       <SidebarGroup
         group={group}
diff --git a/packages/desktop-client/src/components/budget/MobileBudget.js b/packages/desktop-client/src/components/budget/MobileBudget.js
index 559d42f4239..5d4275b67f0 100644
--- a/packages/desktop-client/src/components/budget/MobileBudget.js
+++ b/packages/desktop-client/src/components/budget/MobileBudget.js
@@ -249,7 +249,7 @@ class Budget extends Component {
         <View
           style={{
             flex: 1,
-            backgroundColor: 'white',
+            backgroundColor: theme.pageBackgroundLineTop,
             alignItems: 'center',
             justifyContent: 'center',
             marginBottom: 25,
@@ -302,7 +302,6 @@ export default function BudgetWrapper() {
 
   let actions = useActions();
   let spreadsheet = useSpreadsheet();
-
   useSetThemeColor(theme.mobileBudgetViewTheme);
   return (
     <Budget
diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index 6f8dbf39bce..0533135d5f7 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -19,7 +19,7 @@ import Add from '../../icons/v1/Add';
 import ArrowThinLeft from '../../icons/v1/ArrowThinLeft';
 import ArrowThinRight from '../../icons/v1/ArrowThinRight';
 import { useResponsive } from '../../ResponsiveProvider';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
 import Button from '../common/Button';
 import Card from '../common/Card';
 import Label from '../common/Label';
@@ -51,13 +51,13 @@ function ToBudget({ toBudget, onClick }) {
     >
       <Label
         title={amount < 0 ? 'OVERBUDGETED' : 'TO BUDGET'}
-        style={{ color: colors.n1, flexShrink: 0 }}
+        style={{ color: theme.formInputText, flexShrink: 0 }}
       />
       <Text
         style={{
           ...styles.smallText,
           fontWeight: '500',
-          color: amount < 0 ? colors.r4 : colors.n1,
+          color: amount < 0 ? theme.errorText : theme.formInputText,
         }}
       >
         {format(amount, 'financial')}
@@ -82,11 +82,14 @@ function Saved({ projected }) {
       }}
     >
       {projected ? (
-        <Label title="PROJECTED SAVINGS" style={{ color: colors.n1 }} />
+        <Label
+          title="PROJECTED SAVINGS"
+          style={{ color: theme.formInputText }}
+        />
       ) : (
         <Label
           title={isNegative ? 'OVERSPENT' : 'SAVED'}
-          style={{ color: colors.n1 }}
+          style={{ color: theme.formInputText }}
         />
       )}
 
@@ -94,7 +97,11 @@ function Saved({ projected }) {
         style={{
           ...styles.smallText,
           fontWeight: '500',
-          color: projected ? colors.y3 : isNegative ? colors.r4 : colors.n1,
+          color: projected
+            ? theme.alt2WarningText
+            : isNegative
+            ? theme.alt2ErrorText
+            : theme.formInputText,
         }}
       >
         {format(saved, 'financial')}
@@ -267,7 +274,7 @@ class BudgetCategory extends PureComponent {
     let content = !category.hidden && (
       <ListItem
         style={{
-          backgroundColor: editing ? colors.p11 : 'transparent',
+          backgroundColor: editing ? theme.altTableTextEditing : 'transparent',
           borderBottomWidth: 0,
           borderTopWidth: index > 0 ? 1 : 0,
           ...style,
@@ -318,7 +325,7 @@ class BudgetCategory extends PureComponent {
               width: 90,
               textAlign: 'right',
             }}
-            getStyle={value => value < 0 && { color: colors.r4 }}
+            getStyle={value => value < 0 && { color: theme.errorText }}
             type="financial"
           />
         </View>
@@ -386,7 +393,7 @@ class TotalsRow extends PureComponent {
         style={{
           flexDirection: 'row',
           alignItems: 'center',
-          backgroundColor: colors.n11,
+          backgroundColor: theme.tableHeaderBackground,
         }}
         data-testid="totals"
       >
@@ -564,7 +571,7 @@ class IncomeCategory extends PureComponent {
 //           flexDirection: 'row',
 //           justifyContent: 'flex-end',
 //           alignItems: 'stretch',
-//           backgroundColor: colors.n10,
+//           backgroundColor: colorsm.tableBackground,
 //           padding: 5,
 //           height: 45
 //         }}
@@ -718,7 +725,9 @@ class IncomeBudgetGroup extends Component {
             }
             nameTextStyle={{ fontWeight: '500' }}
             amountTextStyle={{ fontWeight: '500' }}
-            style={{ backgroundColor: colors.n11 }}
+            style={{
+              backgroundColor: theme.altTableBackground,
+            }}
           />
 
           {group.categories.map((category, index) => {
@@ -883,7 +892,7 @@ export function BudgetTable(props) {
             paddingRight: 14,
             backgroundColor: 'white',
             borderBottomWidth: 1,
-            borderColor: colors.n9,
+            borderColor: theme.tableBorder,
           }}
         >
           {type === 'report' ? (
@@ -905,22 +914,25 @@ export function BudgetTable(props) {
               margin: '0 -8px',
               background:
                 showBudgetedCol && !show3Cols
-                  ? `linear-gradient(-45deg, ${colors.p5} 8px, transparent 0)`
+                  ? `linear-gradient(-45deg, ${theme.formInputBackgroundSelection} 8px, transparent 0)`
                   : !show3Cols
-                  ? `linear-gradient(45deg, ${colors.p5} 8px, transparent 0)`
+                  ? `linear-gradient(45deg, ${theme.formInputBackgroundSelection} 8px, transparent 0)`
                   : null,
               // 45deg to flip it to the lower left corner
             }}
           >
             {show3Cols || showBudgetedCol ? (
               <View style={{ width: 90, justifyContent: 'center' }}>
-                <Label title="BUDGETED" style={{ color: colors.n1 }} />
+                <Label
+                  title="BUDGETED"
+                  style={{ color: theme.buttonNormalText }}
+                />
                 <CellValue
                   binding={reportBudget.totalBudgetedExpense}
                   type="financial"
                   style={{
                     ...styles.smallText,
-                    color: colors.n1,
+                    color: theme.buttonNormalText,
                     textAlign: 'right',
                     fontWeight: '500',
                   }}
@@ -937,13 +949,13 @@ export function BudgetTable(props) {
                   justifyContent: 'center',
                 }}
               >
-                <Label title="SPENT" style={{ color: colors.n1 }} />
+                <Label title="SPENT" style={{ color: theme.formInputText }} />
                 <CellValue
                   binding={rolloverBudget.totalSpent}
                   type="financial"
                   style={{
                     ...styles.smallText,
-                    color: colors.n1,
+                    color: theme.formInputText,
                     textAlign: 'right',
                     fontWeight: '500',
                   }}
@@ -957,20 +969,19 @@ export function BudgetTable(props) {
               justifyContent: 'center',
             }}
           >
-            <Label title="BALANCE" style={{ color: colors.n1 }} />
+            <Label title="BALANCE" style={{ color: theme.formInputText }} />
             <CellValue
               binding={rolloverBudget.totalBalance}
               type="financial"
               style={{
                 ...styles.smallText,
-                color: colors.n1,
+                color: theme.formInputText,
                 textAlign: 'right',
                 fontWeight: '500',
               }}
             />
           </View>
         </View>
-
         <View style={{ overflowY: 'auto' }}>
           {!editMode ? (
             // <ScrollView
@@ -1077,7 +1088,7 @@ function BudgetHeader({
         flexShrink: 0,
         height: 50,
         justifyContent: 'center',
-        backgroundColor: colors.p5,
+        backgroundColor: theme.buttonPrimaryBackground,
       }}
     >
       {!editMode && (
@@ -1093,7 +1104,11 @@ function BudgetHeader({
             padding: '5px 30px 5px 0',
           }}
         >
-          <ArrowThinLeft style={{ color: colors.n11 }} width="15" height="15" />
+          <ArrowThinLeft
+            style={{ color: theme.formInputTextReadOnlySelection }}
+            width="15"
+            height="15"
+          />
         </Button>
       )}
       <Text
@@ -1101,7 +1116,7 @@ function BudgetHeader({
           ...styles.mediumText,
           marginTop: 12,
           marginBottom: 12,
-          color: colors.n11,
+          color: theme.formInputTextSelected,
           textAlign: 'center',
           // zIndex: -1
         }}
@@ -1121,7 +1136,7 @@ function BudgetHeader({
             right: 0,
           }}
           textStyle={{
-            color: colors.n11,
+            color: theme.formInputTextReadOnlySelection,
             fontSize: 15,
             fontWeight: '500',
           }}
@@ -1137,12 +1152,11 @@ function BudgetHeader({
             style={{ ...buttonStyle, opacity: nextEnabled ? 1 : 0.6 }}
           >
             <ArrowThinRight
-              style={{ color: colors.n11 }}
+              style={{ color: theme.formInputTextReadOnlySelection }}
               width="15"
               height="15"
             />
           </Button>
-
           {serverURL && (
             <SyncButton
               isMobile
diff --git a/packages/desktop-client/src/components/budget/MobileTable.tsx b/packages/desktop-client/src/components/budget/MobileTable.tsx
index 0915f01a9f3..a63df9db403 100644
--- a/packages/desktop-client/src/components/budget/MobileTable.tsx
+++ b/packages/desktop-client/src/components/budget/MobileTable.tsx
@@ -1,6 +1,6 @@
 import React, { type ComponentProps, type ReactNode } from 'react';
 
-import { type CSSProperties, colors } from '../../style';
+import { type CSSProperties, theme } from '../../style';
 import View from '../common/View';
 
 export const ROW_HEIGHT = 50;
@@ -16,7 +16,7 @@ export const ListItem = ({ children, style, ...props }: ListItemProps) => {
       style={{
         height: ROW_HEIGHT,
         borderBottomWidth: 1,
-        borderColor: colors.border,
+        borderColor: theme.tableBorder,
         flexDirection: 'row',
         alignItems: 'center',
         paddingLeft: 10,
diff --git a/packages/desktop-client/src/components/budget/MonthCountSelector.tsx b/packages/desktop-client/src/components/budget/MonthCountSelector.tsx
index d5bba0f3a20..d3baecf087b 100644
--- a/packages/desktop-client/src/components/budget/MonthCountSelector.tsx
+++ b/packages/desktop-client/src/components/budget/MonthCountSelector.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import CalendarIcon from '../../icons/v2/Calendar';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import View from '../common/View';
 
 import { useBudgetMonthCount } from './BudgetMonthCountContext';
@@ -42,7 +42,9 @@ export function MonthCountSelector({
     calendars.push(
       <Calendar
         key={i}
-        color={maxMonths >= i ? colors.n5 : colors.n8}
+        color={
+          maxMonths >= i ? theme.altpageTextSubdued : theme.altButtonBareText
+        }
         onClick={() => onChange(i)}
       />,
     );
diff --git a/packages/desktop-client/src/components/budget/MonthPicker.js b/packages/desktop-client/src/components/budget/MonthPicker.js
index 390f8e77bcf..4466edb38df 100644
--- a/packages/desktop-client/src/components/budget/MonthPicker.js
+++ b/packages/desktop-client/src/components/budget/MonthPicker.js
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import useResizeObserver from '../../hooks/useResizeObserver';
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
 import View from '../common/View';
 
 export const MonthPicker = ({
@@ -102,12 +102,12 @@ export const MonthPicker = ({
                 border: 'none',
                 ...(!isMonthBudgeted && {
                   textDecoration: 'line-through',
-                  color: colors.n7,
+                  color: theme.pageTextSubdued,
                 }),
                 ...styles.smallText,
                 ...(selected && {
-                  backgroundColor: colors.p6,
-                  color: 'white',
+                  backgroundColor: theme.tableBorderHover,
+                  color: theme.buttonPrimaryText,
                 }),
                 ...((hovered || selected) && {
                   borderRadius: 0,
@@ -119,7 +119,7 @@ export const MonthPicker = ({
                   }),
                 ...(hovered &&
                   selected && {
-                    backgroundColor: colors.p7,
+                    backgroundColor: theme.tableBorderHover,
                   }),
                 ...((idx === firstSelectedIndex ||
                   (idx === hoverId && !selected)) && {
@@ -146,7 +146,9 @@ export const MonthPicker = ({
                     left: 0,
                     fontSize: 10,
                     fontWeight: 'bold',
-                    color: isMonthBudgeted ? '#272630' : colors.n7,
+                    color: isMonthBudgeted
+                      ? theme.pageText
+                      : theme.pageTextSubdued,
                   }}
                 >
                   {year}
diff --git a/packages/desktop-client/src/components/budget/RenderMonths.js b/packages/desktop-client/src/components/budget/RenderMonths.js
index f563d859fe5..044f2ca702d 100644
--- a/packages/desktop-client/src/components/budget/RenderMonths.js
+++ b/packages/desktop-client/src/components/budget/RenderMonths.js
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import View from '../common/View';
 import NamespaceContext from '../spreadsheet/NamespaceContext';
 
@@ -22,7 +22,7 @@ function RenderMonths({ component: Component, editingIndex, args, style }) {
         <View
           style={{
             flex: 1,
-            borderLeft: '1px solid ' + colors.border,
+            borderLeft: '1px solid ' + theme.tableBorder,
             ...style,
           }}
         >
diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.js b/packages/desktop-client/src/components/budget/SidebarCategory.js
index 3ccebb13a3b..cee13b3924f 100644
--- a/packages/desktop-client/src/components/budget/SidebarCategory.js
+++ b/packages/desktop-client/src/components/budget/SidebarCategory.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import CheveronDown from '../../icons/v1/CheveronDown';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Button from '../common/Button';
 import Menu from '../common/Menu';
 import View from '../common/View';
@@ -16,7 +16,7 @@ function SidebarCategory({
   dragging,
   editing,
   style,
-  borderColor = colors.border,
+  borderColor = theme.tableBorder,
   isLast,
   onDragChange,
   onEditMonth,
@@ -110,9 +110,9 @@ function SidebarCategory({
         '& button': { display: 'none' },
         ...(!dragging &&
           !dragPreview && {
-            '&:hover button': { display: 'flex', color: colors.n1 },
+            '&:hover button': { display: 'flex', color: theme.tableTextHover },
           }),
-        ...(dragging && { color: colors.n8 }),
+        ...(dragging && { color: theme.formInputTextPlaceholderSelected }),
         // The zIndex here forces the the view on top of a row below
         // it that may be "collapsed" and show a border on top
         ...(dragPreview && {
diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.js b/packages/desktop-client/src/components/budget/SidebarGroup.js
index 2273dac88a9..f470ebb31ce 100644
--- a/packages/desktop-client/src/components/budget/SidebarGroup.js
+++ b/packages/desktop-client/src/components/budget/SidebarGroup.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import ExpandArrow from '../../icons/v0/ExpandArrow';
 import CheveronDown from '../../icons/v1/CheveronDown';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Button from '../common/Button';
 import Menu from '../common/Menu';
 import Text from '../common/Text';
@@ -18,7 +18,7 @@ function SidebarGroup({
   dragPreview,
   innerRef,
   style,
-  borderColor = colors.border,
+  borderColor = theme.tableBorder,
   onEdit,
   onSave,
   onDelete,
@@ -124,9 +124,9 @@ function SidebarGroup({
       style={{
         ...style,
         width: 200,
-        backgroundColor: colors.n11,
+        backgroundColor: theme.altTableBackground,
         '& button': { display: 'none' },
-        '&:hover button': { display: 'flex', color: colors.n1 },
+        '&:hover button': { display: 'flex', color: theme.tableTextHover },
         ...(dragPreview && {
           paddingLeft: 10,
           zIndex: 10000,
diff --git a/packages/desktop-client/src/components/budget/constants.js b/packages/desktop-client/src/components/budget/constants.js
deleted file mode 100644
index d0ac62ba30e..00000000000
--- a/packages/desktop-client/src/components/budget/constants.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const INCOME_HEADER_HEIGHT = 70;
-export const MONTH_BOX_SHADOW =
-  '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)';
-export const MONTH_RIGHT_PADDING = 5;
diff --git a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
index f137a857e87..99e5f7621df 100644
--- a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
@@ -8,7 +8,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import DotsHorizontalTriple from '../../../icons/v1/DotsHorizontalTriple';
 import ArrowButtonDown1 from '../../../icons/v2/ArrowButtonDown1';
 import ArrowButtonUp1 from '../../../icons/v2/ArrowButtonUp1';
-import { colors, styles } from '../../../style';
+import { theme, styles } from '../../../style';
 import AlignedText from '../../common/AlignedText';
 import Block from '../../common/Block';
 import Button from '../../common/Button';
@@ -23,7 +23,6 @@ import useFormat from '../../spreadsheet/useFormat';
 import useSheetName from '../../spreadsheet/useSheetName';
 import useSheetValue from '../../spreadsheet/useSheetValue';
 import { Tooltip } from '../../tooltips';
-import { MONTH_BOX_SHADOW } from '../constants';
 
 import HoldTooltip from './HoldTooltip';
 import { useRollover } from './RolloverContext';
@@ -44,10 +43,10 @@ function TotalsList({ prevMonthName, collapsed }: TotalsListProps) {
         ...(!collapsed && {
           padding: '5px 0',
           marginTop: 17,
-          backgroundColor: colors.n11,
+          backgroundColor: theme.tableRowHeaderBackground,
           borderTopWidth: 1,
           borderBottomWidth: 1,
-          borderColor: colors.n9,
+          borderColor: theme.tableBorder,
         }),
         ...(collapsed && {
           padding: 7,
@@ -186,11 +185,13 @@ function ToBudget({
                   fontWeight: 400,
                   userSelect: 'none',
                   cursor: 'pointer',
-                  color: isNegative ? colors.r4 : colors.p5,
+                  color: isNegative ? theme.errorText : theme.pageTextPositive,
                   marginBottom: -1,
                   borderBottom: '1px solid transparent',
                   ':hover': {
-                    borderColor: isNegative ? colors.r4 : colors.p5,
+                    borderColor: isNegative
+                      ? theme.errorText
+                      : theme.pageTextPositive,
                   },
                 },
               ])}`}
@@ -289,8 +290,8 @@ export function BudgetSummary({
     <View
       data-testid="budget-summary"
       style={{
-        backgroundColor: 'white',
-        boxShadow: MONTH_BOX_SHADOW,
+        backgroundColor: theme.tableBackground,
+        boxShadow: styles.cardShadow,
         borderRadius: 6,
         marginLeft: 0,
         marginRight: 0,
@@ -331,7 +332,7 @@ export function BudgetSummary({
                 width={13}
                 height={13}
                 // The margin is to make it the exact same size as the dots button
-                style={{ color: colors.n6, margin: 1 }}
+                style={{ color: theme.altTableText, margin: 1 }}
               />
             </Button>
           </View>
@@ -366,7 +367,7 @@ export function BudgetSummary({
                 width={15}
                 height={15}
                 tooltipPosition="bottom-right"
-                defaultColor={colors.n6}
+                defaultColor={theme.altTableText}
               />
             </View>
             <View style={{ userSelect: 'none', marginLeft: 2 }}>
@@ -374,7 +375,7 @@ export function BudgetSummary({
                 <DotsHorizontalTriple
                   width={15}
                   height={15}
-                  style={{ color: colors.n5 }}
+                  style={{ color: theme.alt2PillText }}
                 />
               </Button>
               {menuOpen && (
@@ -426,8 +427,8 @@ export function BudgetSummary({
               alignItems: 'center',
               padding: '10px 20px',
               justifyContent: 'space-between',
-              backgroundColor: colors.n11,
-              borderTop: '1px solid ' + colors.n10,
+              backgroundColor: theme.tableHeaderBackground,
+              borderTop: '1px solid ' + theme.tableBorder,
             }}
           >
             <ToBudget
diff --git a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
index 298a1837af6..ff0c26e3392 100644
--- a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
@@ -6,7 +6,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
 import useFeatureFlag from '../../../hooks/useFeatureFlag';
 import CheveronDown from '../../../icons/v1/CheveronDown';
-import { styles, colors, type CSSProperties } from '../../../style';
+import { styles, theme, type CSSProperties } from '../../../style';
 import CategoryAutocomplete from '../../autocomplete/CategoryAutocomplete';
 import Button from '../../common/Button';
 import InitialFocus from '../../common/InitialFocus';
@@ -20,7 +20,6 @@ import { Row, Field, SheetCell } from '../../table';
 import { Tooltip, useTooltip } from '../../tooltips';
 import BalanceWithCarryover from '../BalanceWithCarryover';
 import { CategoryGroupsContext } from '../CategoryGroupsContext';
-import { MONTH_RIGHT_PADDING } from '../constants';
 import { makeAmountGrey, addToBeBudgetedGroup } from '../util';
 
 import TransferTooltip from './TransferTooltip';
@@ -183,7 +182,6 @@ function BalanceTooltip({
     </>
   );
 }
-
 let headerLabelStyle: CSSProperties = {
   flex: 1,
   padding: '0 5px',
@@ -197,36 +195,36 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
       style={{
         flex: 1,
         flexDirection: 'row',
-        marginRight: MONTH_RIGHT_PADDING,
+        marginRight: styles.monthRightPadding,
         paddingTop: 10,
         paddingBottom: 10,
       }}
     >
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Budgeted</Text>
+        <Text style={{ color: theme.alt2TableText }}>Budgeted</Text>
         <CellValue
           binding={rolloverBudget.totalBudgeted}
           type="financial"
-          style={{ color: colors.n4, fontWeight: 600 }}
+          style={{ color: theme.alt2TableText, fontWeight: 600 }}
           formatter={value => {
             return format(-parseFloat(value || '0'), 'financial');
           }}
         />
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Spent</Text>
+        <Text style={{ color: theme.alt2TableText }}>Spent</Text>
         <CellValue
           binding={rolloverBudget.totalSpent}
           type="financial"
-          style={{ color: colors.n4, fontWeight: 600 }}
+          style={{ color: theme.alt2TableText, fontWeight: 600 }}
         />
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Balance</Text>
+        <Text style={{ color: theme.alt2TableText }}>Balance</Text>
         <CellValue
           binding={rolloverBudget.totalBalance}
           type="financial"
-          style={{ color: colors.n4, fontWeight: 600 }}
+          style={{ color: theme.alt2TableText, fontWeight: 600 }}
         />
       </View>
     </View>
@@ -237,7 +235,7 @@ export function IncomeHeaderMonth() {
   return (
     <Row
       style={{
-        color: colors.n4,
+        color: theme.alt2TableText,
         alignItems: 'center',
         paddingRight: 10,
       }}
@@ -283,7 +281,7 @@ export const ExpenseGroupMonth = memo(function ExpenseGroupMonth({
         textAlign="right"
         style={{
           fontWeight: 600,
-          paddingRight: MONTH_RIGHT_PADDING,
+          paddingRight: styles.monthRightPadding,
           ...styles.tnum,
         }}
         valueProps={{
@@ -291,7 +289,7 @@ export const ExpenseGroupMonth = memo(function ExpenseGroupMonth({
           type: 'financial',
           privacyFilter: {
             style: {
-              paddingRight: MONTH_RIGHT_PADDING,
+              paddingRight: styles.monthRightPadding,
             },
           },
         }}
@@ -424,7 +422,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             padding: '0 4px',
             borderRadius: 4,
             ':hover': {
-              boxShadow: 'inset 0 0 0 1px ' + colors.n7,
+              boxShadow: 'inset 0 0 0 1px ' + theme.mobileAccountShadow,
               backgroundColor: 'white',
             },
           }}
@@ -474,7 +472,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
       <Field
         name="balance"
         width="flex"
-        style={{ paddingRight: MONTH_RIGHT_PADDING, textAlign: 'right' }}
+        style={{ paddingRight: styles.monthRightPadding, textAlign: 'right' }}
       >
         <span {...balanceTooltip.getOpenEvents()}>
           <BalanceWithCarryover
@@ -504,7 +502,7 @@ export function IncomeGroupMonth() {
         textAlign="right"
         style={{
           fontWeight: 600,
-          paddingRight: MONTH_RIGHT_PADDING,
+          paddingRight: styles.monthRightPadding,
           ...styles.tnum,
         }}
         valueProps={{
@@ -512,7 +510,7 @@ export function IncomeGroupMonth() {
           type: 'financial',
           privacyFilter: {
             style: {
-              paddingRight: MONTH_RIGHT_PADDING,
+              paddingRight: styles.monthRightPadding,
             },
           },
         }}
@@ -539,7 +537,7 @@ export function IncomeCategoryMonth({
         name="received"
         width="flex"
         style={{
-          paddingRight: MONTH_RIGHT_PADDING,
+          paddingRight: styles.monthRightPadding,
           textAlign: 'right',
           ...(isLast && { borderBottomWidth: 0 }),
         }}
diff --git a/packages/desktop-client/src/components/budget/util.js b/packages/desktop-client/src/components/budget/util.js
index 9fed886012b..db5f7e76895 100644
--- a/packages/desktop-client/src/components/budget/util.js
+++ b/packages/desktop-client/src/components/budget/util.js
@@ -1,4 +1,4 @@
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
 
 export function addToBeBudgetedGroup(groups) {
   return [
@@ -20,7 +20,7 @@ export function separateGroups(categoryGroups) {
 
 export function makeAmountGrey(value) {
   return value === 0 || value === '0' || value === ''
-    ? { color: colors.n10 }
+    ? { color: theme.altMenuItemText }
     : null;
 }
 
@@ -31,13 +31,18 @@ export function makeAmountStyle(value) {
   }
 
   if (value < 0) {
-    return { color: colors.r4 };
+    return { color: theme.errorText };
   }
 }
 
 export function makeAmountFullStyle(value) {
   return {
-    color: value < 0 ? colors.r4 : value === 0 ? colors.n10 : colors.g4,
+    color:
+      value < 0
+        ? theme.errorText
+        : value === 0
+        ? theme.altMenuItemText
+        : theme.noticeText,
   };
 }
 
diff --git a/packages/desktop-client/src/components/common/ExternalLink.tsx b/packages/desktop-client/src/components/common/ExternalLink.tsx
index e4fa656b5c7..6c37ea5825a 100644
--- a/packages/desktop-client/src/components/common/ExternalLink.tsx
+++ b/packages/desktop-client/src/components/common/ExternalLink.tsx
@@ -1,10 +1,10 @@
 import React, { type ReactNode, forwardRef } from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 
 let externalLinkColors = {
-  purple: colors.p4,
-  blue: colors.b4,
+  purple: theme.pageTextPositive,
+  blue: theme.pageTextLink,
   muted: 'inherit',
 };
 type ExternalLinkProps = {
diff --git a/packages/desktop-client/src/components/mobile/MobileForms.js b/packages/desktop-client/src/components/mobile/MobileForms.js
index 4114b2571fc..21ebbc657a3 100644
--- a/packages/desktop-client/src/components/mobile/MobileForms.js
+++ b/packages/desktop-client/src/components/mobile/MobileForms.js
@@ -2,13 +2,12 @@ import { forwardRef } from 'react';
 
 import { css } from 'glamor';
 
-import { theme } from '../../style';
+import { theme, styles } from '../../style';
 import Button from '../common/Button';
 import Input from '../common/Input';
 import Text from '../common/Text';
 import View from '../common/View';
 
-export const EDITING_PADDING = 12;
 const FIELD_HEIGHT = 40;
 
 export function FieldLabel({ title, flush, style }) {
@@ -19,7 +18,7 @@ export function FieldLabel({ title, flush, style }) {
         marginTop: flush ? 0 : 25,
         fontSize: 13,
         color: theme.tableRowHeaderText,
-        paddingLeft: EDITING_PADDING,
+        paddingLeft: styles.mobileEditingPadding,
         textTransform: 'uppercase',
         userSelect: 'none',
         ...style,
@@ -36,7 +35,7 @@ const valueStyle = {
   marginLeft: -1,
   marginRight: -1,
   height: FIELD_HEIGHT,
-  paddingHorizontal: EDITING_PADDING,
+  paddingHorizontal: styles.mobileEditingPadding,
 };
 
 export const InputField = forwardRef(function InputField(
@@ -119,7 +118,7 @@ export function BooleanField({ checked, onUpdate, style }) {
       onChange={e => onUpdate(e.target.checked)}
       className={`${css([
         {
-          marginInline: EDITING_PADDING,
+          marginInline: styles.mobileEditingPadding,
         },
         style,
       ])}`}
diff --git a/packages/desktop-client/src/components/modals/BudgetSummary.js b/packages/desktop-client/src/components/modals/BudgetSummary.js
index 3adf6022358..d4f3a82cba6 100644
--- a/packages/desktop-client/src/components/modals/BudgetSummary.js
+++ b/packages/desktop-client/src/components/modals/BudgetSummary.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { rolloverBudget } from 'loot-core/src/client/queries';
 import * as monthUtils from 'loot-core/src/shared/months';
 
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
 import Button from '../common/Button';
 import Modal from '../common/Modal';
 import Text from '../common/Text';
@@ -26,7 +26,7 @@ function ToBudget({ toBudget }) {
           ...styles.text,
           fontWeight: '600',
           fontSize: 22,
-          color: budgetAmount < 0 ? colors.r4 : colors.n1,
+          color: budgetAmount < 0 ? theme.errorText : theme.formInputText,
         }}
       >
         {format(budgetAmount, 'financial')}
@@ -90,7 +90,6 @@ function BudgetSummary({ month, modalProps }) {
               <Text>For Next Month</Text>
             </View>
           </View>
-
           <ToBudget toBudget={rolloverBudget.toBudget} />
 
           <View
diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
index c5247eb9b3a..893cbf6cdbe 100644
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -52,7 +52,7 @@ import SvgTrash from '../../icons/v1/Trash';
 import ArrowsSynchronize from '../../icons/v2/ArrowsSynchronize';
 import CheckCircle1 from '../../icons/v2/CheckCircle1';
 import SvgPencilWriteAlternate from '../../icons/v2/PencilWriteAlternate';
-import { styles, colors, theme } from '../../style';
+import { styles, theme } from '../../style';
 import Button from '../common/Button';
 import Text from '../common/Text';
 import TextOneLine from '../common/TextOneLine';
@@ -63,7 +63,6 @@ import {
   TapField,
   InputField,
   BooleanField,
-  EDITING_PADDING,
 } from '../mobile/MobileForms';
 
 const zIndices = { SECTION_HEADING: 10 };
@@ -138,12 +137,14 @@ export function DateHeader({ date }) {
     <ListItem
       style={{
         height: 25,
-        backgroundColor: colors.n10,
-        borderColor: colors.n9,
+        backgroundColor: theme.mobileDateBackground,
+        borderColor: theme.tableBorder,
         justifyContent: 'center',
       }}
     >
-      <Text style={{ ...styles.text, fontSize: 13, color: colors.n4 }}>
+      <Text
+        style={{ ...styles.text, fontSize: 13, color: theme.alt2TableText }}
+      >
         {monthUtils.format(date, 'MMMM dd, yyyy')}
       </Text>
     </ListItem>
@@ -155,13 +156,13 @@ function Status({ status }) {
 
   switch (status) {
     case 'missed':
-      color = colors.r3;
+      color = theme.alt3ErrorText;
       break;
     case 'due':
-      color = colors.y3;
+      color = theme.alt2WarningText;
       break;
     case 'upcoming':
-      color = colors.n4;
+      color = theme.alt2TableText;
       break;
     default:
   }
@@ -345,13 +346,13 @@ class TransactionEditInner extends PureComponent {
         style={{
           margin: 10,
           marginTop: 3,
-          backgroundColor: colors.n11,
+          backgroundColor: theme.tableHeaderBackground,
           flex: 1,
           borderRadius: 4,
 
           // This shadow make the card "pop" off of the screen below
           // it
-          shadowColor: colors.n3,
+          shadowColor: theme.cardShadow,
           shadowOffset: { width: 0, height: 0 },
           shadowRadius: 4,
           shadowOpacity: 1,
@@ -368,8 +369,8 @@ class TransactionEditInner extends PureComponent {
           <View
             style={{
               borderBottomWidth: 1,
-              borderColor: colors.n9,
-              backgroundColor: 'white',
+              borderColor: theme.tableBorder,
+              backgroundColor: theme.tableBackground,
               alignItems: 'center',
               flexDirection: 'row',
               flexShrink: 0,
@@ -389,13 +390,17 @@ class TransactionEditInner extends PureComponent {
             >
               <CheveronLeft
                 style={{
-                  color: colors.b5,
+                  color: theme.formLabelText,
                   width: 32,
                   height: 32,
                 }}
               />
               <Text
-                style={{ ...styles.text, color: colors.b5, fontWeight: 500 }}
+                style={{
+                  ...styles.text,
+                  color: theme.formLabelText,
+                  fontWeight: 500,
+                }}
               >
                 Back
               </Text>
@@ -428,7 +433,6 @@ class TransactionEditInner extends PureComponent {
             automaticallyAdjustContentInsets={false}
             keyboardShouldPersistTaps="always"
             style={{
-              backgroundColor: colors.n11,
               flexGrow: 1,
               overflow: 'hidden',
             }}
@@ -517,7 +521,7 @@ class TransactionEditInner extends PureComponent {
                   data-testid="category-field"
                 />
               ) : (
-                <Text style={{ paddingLeft: EDITING_PADDING }}>
+                <Text style={{ paddingLeft: styles.mobileEditingPadding }}>
                   Split transaction editing is not supported on mobile at this
                   time.
                 </Text>
@@ -592,8 +596,8 @@ class TransactionEditInner extends PureComponent {
                   style={{
                     borderWidth: 0,
                     paddingVertical: 5,
-                    marginLeft: EDITING_PADDING,
-                    marginRight: EDITING_PADDING,
+                    marginLeft: styles.mobileEditingPadding,
+                    marginRight: styles.mobileEditingPadding,
                     marginTop: 20,
                     marginBottom: 15,
                     backgroundColor: 'transparent',
@@ -603,11 +607,11 @@ class TransactionEditInner extends PureComponent {
                   <SvgTrash
                     width={17}
                     height={17}
-                    style={{ color: colors.r4 }}
+                    style={{ color: theme.errorText }}
                   />
                   <Text
                     style={{
-                      color: colors.r4,
+                      color: theme.errorText,
                       marginLeft: 5,
                       userSelect: 'none',
                     }}
@@ -621,22 +625,30 @@ class TransactionEditInner extends PureComponent {
 
           <View
             style={{
-              paddingLeft: EDITING_PADDING,
-              paddingRight: EDITING_PADDING,
+              paddingLeft: styles.mobileEditingPadding,
+              paddingRight: styles.mobileEditingPadding,
               paddingTop: 15,
               paddingBottom: 15,
-              backgroundColor: colors.n11,
+              backgroundColor: theme.tableHeaderBackground,
               borderTopWidth: 1,
-              borderColor: colors.n10,
+              borderColor: theme.tableBorder,
               marginTop: 'auto',
               flexShrink: 0,
             }}
           >
             {adding ? (
               <Button onClick={() => this.onAdd()}>
-                <SvgAdd width={17} height={17} style={{ color: colors.b3 }} />
+                <SvgAdd
+                  width={17}
+                  height={17}
+                  style={{ color: theme.altFormLabelText }}
+                />
                 <Text
-                  style={{ ...styles.text, color: colors.b3, marginLeft: 5 }}
+                  style={{
+                    ...styles.text,
+                    color: theme.altFormLabelText,
+                    marginLeft: 5,
+                  }}
                 >
                   Add transaction
                 </Text>
@@ -644,10 +656,14 @@ class TransactionEditInner extends PureComponent {
             ) : (
               <Button onClick={() => this.onSave()}>
                 <SvgPencilWriteAlternate
-                  style={{ width: 16, height: 16, color: colors.n1 }}
+                  style={{ width: 16, height: 16, color: theme.formInputText }}
                 />
                 <Text
-                  style={{ ...styles.text, marginLeft: 6, color: colors.n1 }}
+                  style={{
+                    ...styles.text,
+                    marginLeft: 6,
+                    color: theme.formInputText,
+                  }}
                 >
                   Save changes
                 </Text>
@@ -703,7 +719,6 @@ function TransactionEditUnconnected(props) {
   let transactions = [];
   let adding = false;
   let deleted = false;
-
   useSetThemeColor(theme.mobileTransactionViewTheme);
 
   useEffect(() => {
@@ -825,7 +840,7 @@ function TransactionEditUnconnected(props) {
     <View
       style={{
         flex: 1,
-        backgroundColor: colors.p5,
+        backgroundColor: theme.buttonPrimaryBackground,
       }}
     >
       <TransactionEditInner
@@ -922,7 +937,7 @@ class Transaction extends PureComponent {
     let isPreview = isPreviewId(id);
     let textStyle = isPreview && {
       fontStyle: 'italic',
-      color: colors.n5,
+      color: theme.altpageTextSubdued,
     };
 
     return (
@@ -939,7 +954,9 @@ class Transaction extends PureComponent {
             flex: 1,
             height: 60,
             padding: '5px 10px', // remove padding when Button is back
-            ...(isPreview && { backgroundColor: colors.n11 }),
+            ...(isPreview && {
+              backgroundColor: theme.tableRowHeaderBackground,
+            }),
             ...style,
           }}
         >
@@ -951,7 +968,7 @@ class Transaction extends PureComponent {
                     width: 12,
                     height: 12,
                     marginRight: 5,
-                    color: textStyle.color || colors.n1,
+                    color: textStyle.color || theme.menuItemText,
                   }}
                 />
               )}
@@ -962,7 +979,7 @@ class Transaction extends PureComponent {
                   fontSize: 14,
                   fontWeight: added ? '600' : '400',
                   ...(prettyDescription === '' && {
-                    color: colors.n6,
+                    color: theme.altTableText,
                     fontStyle: 'italic',
                   }),
                 }}
@@ -984,7 +1001,7 @@ class Transaction extends PureComponent {
                   style={{
                     width: 11,
                     height: 11,
-                    color: cleared ? colors.g6 : colors.n8,
+                    color: cleared ? theme.noticeText : theme.altButtonBareText,
                     marginRight: 5,
                   }}
                 />
@@ -994,7 +1011,9 @@ class Transaction extends PureComponent {
                       fontSize: 11,
                       marginTop: 1,
                       fontWeight: '400',
-                      color: prettyCategory ? colors.n3 : colors.p7,
+                      color: prettyCategory
+                        ? theme.tableTextSelected
+                        : theme.altMenuItemTextSelected,
                       fontStyle: prettyCategory ? null : 'italic',
                       textAlign: 'left',
                     }}
@@ -1186,10 +1205,10 @@ function ListBoxSection({ section, state }) {
         <div
           {...headingProps}
           className={`${css(styles.smallText, {
-            backgroundColor: colors.n10,
-            borderBottom: `1px solid ${colors.n9}`,
-            borderTop: `1px solid ${colors.n9}`,
-            color: colors.n4,
+            backgroundColor: theme.mobileDateBackground,
+            borderBottom: `1px solid ${theme.tableBorder}`,
+            borderTop: `1px solid ${theme.tableBorder}`,
+            color: theme.alt2TableText,
             display: 'flex',
             justifyContent: 'center',
             paddingBottom: 4,
@@ -1237,10 +1256,12 @@ function Option({ isLast, item, state }) {
       {...mergeProps(optionProps, focusProps)}
       ref={ref}
       style={{
-        background: isSelected ? 'blueviolet' : 'transparent',
-        color: isSelected ? 'white' : null,
+        background: isSelected
+          ? theme.tableRowBackgroundHighlight
+          : theme.tableBackground,
+        color: isSelected ? theme.mobileModalText : null,
         outline: isFocusVisible ? '2px solid orange' : 'none',
-        ...(!isLast && { borderBottom: `1px solid ${colors.border}` }),
+        ...(!isLast && { borderBottom: `1px solid ${theme.tableBorder}` }),
       }}
     >
       {item.rendered}
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
index 6be14aa2af3..22c6918a5dd 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.js
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js
@@ -53,7 +53,7 @@ import CheveronDown from '../../icons/v1/CheveronDown';
 import ArrowsSynchronize from '../../icons/v2/ArrowsSynchronize';
 import CalendarIcon from '../../icons/v2/Calendar';
 import Hyperlink2 from '../../icons/v2/Hyperlink2';
-import { colors, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
 import CategoryAutocomplete from '../autocomplete/CategoryAutocomplete';
 import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
@@ -416,14 +416,14 @@ function StatusCell({
 
   let statusColor =
     status === 'cleared'
-      ? colors.g5
+      ? theme.noticeText
       : status === 'missed'
-      ? colors.r6
+      ? theme.alt5ErrorText
       : status === 'due'
-      ? colors.y5
+      ? theme.alt3WarningText
       : selected
-      ? colors.b7
-      : colors.n7;
+      ? theme.altPageTextLink
+      : theme.pageTextSubdued;
 
   function onSelect() {
     if (isClearedField) {
@@ -1043,20 +1043,20 @@ const Transaction = memo(function Transaction(props) {
               style={{
                 color:
                   notes === 'missed'
-                    ? colors.r6
+                    ? theme.alt5ErrorText
                     : notes === 'due'
-                    ? colors.y4
+                    ? theme.alt5WarningText
                     : selected
-                    ? colors.b5
-                    : colors.n6,
+                    ? theme.formLabelText
+                    : theme.altTableText,
                 backgroundColor:
                   notes === 'missed'
-                    ? colors.r10
+                    ? theme.altErrorBackground
                     : notes === 'due'
-                    ? colors.y9
+                    ? theme.altWarningBackground
                     : selected
-                    ? colors.b8
-                    : colors.n10,
+                    ? theme.formLabelBackground
+                    : theme.alt2TableBackground,
                 margin: '0 5px',
                 padding: '3px 7px',
                 borderRadius: 4,
diff --git a/packages/desktop-client/src/style/styles.ts b/packages/desktop-client/src/style/styles.ts
index a7b91273fdc..7b8335a881b 100644
--- a/packages/desktop-client/src/style/styles.ts
+++ b/packages/desktop-client/src/style/styles.ts
@@ -11,6 +11,7 @@ export const styles = {
   cardShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
   monthRightPadding: 5,
   menuBorderRadius: 4,
+  mobileEditingPadding: 12,
   altMenuMaxHeight: 250,
   altMenuText: {
     fontSize: 13,
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index d5d714561e9..24fb0464cd3 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -14,6 +14,7 @@ export const altpageTextSubdued = pageTextSubdued;
 export const pageTextDark = colorPalette.navy800;
 export const pageTextPositive = colorPalette.purple200;
 export const pageTextLink = colorPalette.purple400;
+export const altPageTextLink = pageTextLink;
 
 export const modalBackground = colorPalette.gray800;
 export const modalBorder = colorPalette.navy600;
@@ -24,6 +25,7 @@ export const cardShadow = colorPalette.navy700;
 
 export const tableBackground = colorPalette.navy800;
 export const altTableBackground = tableBackground;
+export const alt2TableBackground = tableBackground;
 export const tableRowBackgroundHover = colorPalette.navy700;
 export const tableText = colorPalette.navy150;
 export const altTableText = tableText;
@@ -31,6 +33,7 @@ export const alt2TableText = tableText;
 export const tableTextSelected = colorPalette.navy150;
 export const tableTextHover = colorPalette.navy400;
 export const tableTextEditing = colorPalette.black;
+export const altTableTextEditing = tableTextEditing;
 export const tableTextEditingBackground = colorPalette.purple400;
 export const tableTextInactive = colorPalette.navy500;
 export const tableHeaderText = colorPalette.navy300;
@@ -93,6 +96,7 @@ export const mobileAccountText = colorPalette.blue800;
 export const mobileModalBackground = colorPalette.navy900;
 export const mobileModalText = colorPalette.white;
 export const altMobileModalText = colorPalette.blue100;
+export const mobileDateBackground = colorPalette.navy100;
 
 // Mobile view themes (for the top bar)
 export const mobileAccountViewTheme = colorPalette.navy50;
@@ -141,6 +145,7 @@ export const buttonNormalDisabledBackground = colorPalette.navy800;
 export const buttonNormalDisabledBorder = colorPalette.navy500;
 
 export const buttonBareText = buttonNormalText;
+export const altButtonBareText = buttonBareText;
 export const buttonBareTextHover = buttonNormalText;
 export const buttonBareBackground = 'transparent';
 export const buttonBareBackgroundHover = 'rgba(200, 200, 200, .3)';
@@ -161,6 +166,7 @@ export const altWarningBackground = warningBackground;
 export const warningText = colorPalette.orange200;
 export const altWarningText = warningText;
 export const alt2WarningText = warningText;
+export const alt3WarningText = warningText;
 export const warningAccent = colorPalette.orange500;
 export const errorBackground = colorPalette.red800;
 export const altErrorBackground = errorBackground;
@@ -175,6 +181,7 @@ export const upcomingAccent = tableBorder;
 
 export const formLabelText = colorPalette.purple150;
 export const altFormLabelText = formLabelText;
+export const formLabelBackground = colorPalette.blue900;
 export const formInputBackground = colorPalette.navy800;
 export const formInputBackgroundSelected = colorPalette.navy700;
 export const formInputBackgroundSelection = colorPalette.purple400;
diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
index 9db0ea23902..8d8cca113c3 100644
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -13,6 +13,7 @@ export const pageTextSubdued = colorPalette.blue500;
 export const altpageTextSubdued = colorPalette.navy500;
 export const pageTextPositive = colorPalette.blue50;
 export const pageTextLink = colorPalette.blue400;
+export const altPageTextLink = pageTextLink;
 
 export const modalBackground = colorPalette.navy900;
 export const modalBorder = colorPalette.navy200;
@@ -23,6 +24,7 @@ export const cardShadow = colorPalette.purple100;
 
 export const tableBackground = colorPalette.red900;
 export const altTableBackground = tableBackground;
+export const alt2TableBackground = tableBackground;
 export const tableRowBackgroundHover = colorPalette.red800;
 export const tableText = colorPalette.red200;
 export const altTableText = colorPalette.navy400;
@@ -30,6 +32,7 @@ export const alt2TableText = altTableText;
 export const tableTextSelected = colorPalette.red150;
 export const tableTextHover = colorPalette.red400;
 export const tableTextEditing = colorPalette.black;
+export const altTableTextEditing = tableTextEditing;
 export const tableTextEditingBackground = colorPalette.red200;
 export const tableTextInactive = colorPalette.red500;
 export const tableHeaderText = colorPalette.red700;
@@ -89,6 +92,7 @@ export const mobileAccountText = colorPalette.blue800;
 export const mobileModalBackground = colorPalette.navy900;
 export const mobileModalText = colorPalette.white;
 export const altMobileModalText = colorPalette.blue100;
+export const mobileDateBackground = colorPalette.navy100;
 
 // Button
 export const buttonMenuText = colorPalette.navy150;
@@ -129,6 +133,7 @@ export const buttonNormalDisabledBackground = colorPalette.navy800;
 export const buttonNormalDisabledBorder = colorPalette.navy500;
 
 export const buttonBareText = colorPalette.navy50;
+export const altButtonBareText = buttonBareText;
 export const buttonBareTextHover = colorPalette.navy200;
 export const buttonBareBackground = colorPalette.navy400;
 export const buttonBareBackgroundHover = colorPalette.purple800;
@@ -149,6 +154,7 @@ export const altWarningBackground = warningBackground;
 export const warningText = colorPalette.orange200;
 export const altWarningText = warningText;
 export const alt2WarningText = warningText;
+export const alt3WarningText = warningText;
 export const warningAccent = colorPalette.orange500;
 export const errorBackground = colorPalette.red800;
 export const altErrorBackground = errorBackground;
@@ -163,6 +169,7 @@ export const upcomingAccent = colorPalette.purple100;
 
 export const formLabelText = colorPalette.purple200;
 export const altFormLabelText = formLabelText;
+export const formLabelBackground = colorPalette.blue200;
 export const formInputBackground = colorPalette.purple700;
 export const formInputBackgroundSelected = colorPalette.purple400;
 export const formInputBackgroundSelection = colorPalette.purple400;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index 2c5e0d65a2f..5d2ec7fcf11 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -13,7 +13,9 @@ export const pageTextSubdued = colorPalette.navy300;
 export const altpageTextSubdued = colorPalette.navy500;
 export const pageTextDark = colorPalette.navy800;
 export const pageTextPositive = colorPalette.purple600;
+export const altPageTextPositive = colorPalette.purple400;
 export const pageTextLink = colorPalette.blue600;
+export const altPageTextLink = colorPalette.blue300;
 
 export const modalBackground = colorPalette.white;
 export const modalBorder = colorPalette.white;
@@ -24,6 +26,7 @@ export const cardShadow = colorPalette.navy700;
 
 export const tableBackground = colorPalette.white;
 export const altTableBackground = colorPalette.navy50;
+export const alt2TableBackground = colorPalette.navy100;
 export const tableRowBackgroundHover = colorPalette.navy50;
 export const tableText = pageText;
 export const altTableText = colorPalette.navy400;
@@ -31,6 +34,7 @@ export const alt2TableText = colorPalette.navy600;
 export const tableTextSelected = colorPalette.navy700;
 export const tableTextHover = colorPalette.navy900;
 export const tableTextEditing = colorPalette.navy50;
+export const altTableTextEditing = colorPalette.purple50;
 export const tableTextEditingBackground = colorPalette.blue500;
 export const tableTextInactive = colorPalette.navy500;
 export const tableHeaderText = colorPalette.navy600;
@@ -92,6 +96,7 @@ export const mobileAccountText = colorPalette.blue800;
 export const mobileModalBackground = colorPalette.navy900;
 export const mobileModalText = colorPalette.white;
 export const altMobileModalText = colorPalette.blue100;
+export const mobileDateBackground = colorPalette.navy100;
 
 // Mobile view themes (for the top bar)
 export const mobileAccountViewTheme = colorPalette.navy50;
@@ -101,6 +106,10 @@ export const mobileConfigServerViewTheme = colorPalette.purple500;
 export const mobileSettingsViewTheme = colorPalette.navy50;
 export const mobileTransactionViewTheme = colorPalette.purple500;
 
+export const markdownNormal = colorPalette.purple150;
+export const markdownDark = colorPalette.purple400;
+export const markdownLight = colorPalette.purple100;
+
 // Button
 export const buttonMenuText = colorPalette.navy100;
 export const buttonMenuTextHover = colorPalette.navy50;
@@ -140,6 +149,7 @@ export const buttonNormalDisabledBackground = buttonNormalBackground;
 export const buttonNormalDisabledBorder = buttonNormalBorder;
 
 export const buttonBareText = buttonNormalText;
+export const altButtonBareText = colorPalette.navy200;
 export const buttonBareTextHover = buttonNormalText;
 export const buttonBareBackground = 'transparent';
 export const buttonBareBackgroundHover = 'rgba(100, 100, 100, .15)';
@@ -154,19 +164,30 @@ export const noticeText = colorPalette.green500;
 export const altNoticeText = colorPalette.green900;
 export const alt2NoticeText = colorPalette.green800;
 export const alt3NoticeText = colorPalette.green600;
+export const alt4NoticeText = colorPalette.green700;
 export const noticeAccent = colorPalette.green200;
+export const altNoticeAccent = colorPalette.green500;
 export const warningBackground = colorPalette.orange200;
 export const altWarningBackground = colorPalette.orange150;
+export const alt2WarningBackground = colorPalette.orange100;
 export const warningText = colorPalette.orange800;
 export const altWarningText = colorPalette.orange900;
 export const alt2WarningText = colorPalette.orange700;
+export const alt3WarningText = colorPalette.orange500;
+export const alt4WarningText = colorPalette.orange800;
+export const alt5WarningText = colorPalette.orange600;
 export const warningAccent = colorPalette.orange400;
+export const altWarningAccent = colorPalette.orange600;
 export const errorBackground = colorPalette.red50;
 export const altErrorBackground = colorPalette.red100;
 export const errorText = colorPalette.red500;
 export const altErrorText = colorPalette.red900;
 export const alt2ErrorText = colorPalette.red600;
+export const alt3ErrorText = colorPalette.red700;
+export const alt4ErrorText = colorPalette.red300;
+export const alt5ErrorText = colorPalette.red400;
 export const errorAccent = colorPalette.red200;
+export const altErrorAccent = colorPalette.red500;
 export const upcomingBackground = colorPalette.purple100;
 export const upcomingText = colorPalette.purple900;
 export const altUpcomingText = colorPalette.purple500;
@@ -174,6 +195,7 @@ export const upcomingAccent = colorPalette.purple100;
 
 export const formLabelText = colorPalette.blue500;
 export const altFormLabelText = colorPalette.blue700;
+export const formLabelBackground = colorPalette.blue200;
 export const formInputBackground = colorPalette.navy50;
 export const formInputBackgroundSelected = colorPalette.white;
 export const formInputBackgroundSelection = colorPalette.purple500;
diff --git a/upcoming-release-notes/1513.md b/upcoming-release-notes/1513.md
new file mode 100644
index 00000000000..4731ee4093a
--- /dev/null
+++ b/upcoming-release-notes/1513.md
@@ -0,0 +1,5 @@
+---
+category: Enhancements
+authors: [biohzrddd, carkom]
+---
+Last phase of dark theme, to include budget and global files
\ No newline at end of file