From 27a31c7b68711de52cf5a8ffb0a480b1f37fe2bb Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Mon, 7 Aug 2023 19:04:33 +0100
Subject: [PATCH] Dark mode filters/rules/transactions (#1436)

---
 .../src/components/ManageRules.js             |  75 ++++----
 .../src/components/common/Input.tsx           |   5 +-
 .../src/components/common/Menu.tsx            |  20 +-
 .../src/components/common/Modal.tsx           |  13 +-
 .../src/components/common/Select.tsx          |  61 ++++++-
 .../src/components/filters/FiltersMenu.js     |  84 +++++----
 .../src/components/filters/SavedFilters.js    |   6 +-
 .../desktop-client/src/components/forms.tsx   |  24 +--
 .../src/components/modals/EditRule.js         |  56 +++---
 .../select/RecurringSchedulePicker.js         |  20 +-
 .../desktop-client/src/components/sort.js     |   4 +-
 .../desktop-client/src/components/table.tsx   | 171 ++++++++++--------
 .../desktop-client/src/components/tooltips.js |   5 +-
 .../transactions/SimpleTransactionsTable.js   |   4 +-
 .../transactions/TransactionList.js           |   3 +-
 .../transactions/TransactionsTable.js         | 147 ++++++++-------
 packages/desktop-client/src/style/styles.ts   |  55 +++---
 .../desktop-client/src/style/themes/dark.ts   |  12 +-
 .../desktop-client/src/style/themes/light.ts  |  55 ++++--
 upcoming-release-notes/1436.md                |   5 +
 20 files changed, 472 insertions(+), 353 deletions(-)
 create mode 100644 upcoming-release-notes/1436.md

diff --git a/packages/desktop-client/src/components/ManageRules.js b/packages/desktop-client/src/components/ManageRules.js
index 2dc1b21da88..9b1f229908f 100644
--- a/packages/desktop-client/src/components/ManageRules.js
+++ b/packages/desktop-client/src/components/ManageRules.js
@@ -29,7 +29,7 @@ import useSelected, {
   SelectedProvider,
 } from '../hooks/useSelected';
 import ArrowRight from '../icons/v0/RightArrow2';
-import { colors } from '../style';
+import { theme } from '../style';
 
 import Button from './common/Button';
 import ExternalLink from './common/ExternalLink';
@@ -40,6 +40,9 @@ import Text from './common/Text';
 import View from './common/View';
 import { SelectCell, Row, Field, Cell, CellButton, TableHeader } from './table';
 
+let valueStyle = {
+  color: theme.pageTextPositive,
+};
 let SchedulesQuery = liveQueryContext(q('schedules').select('*'));
 
 export function Value({
@@ -133,11 +136,11 @@ export function Value({
 
   if (Array.isArray(value)) {
     if (value.length === 0) {
-      return <Text style={{ color: colors.p4 }}>(empty)</Text>;
+      return <Text style={valueStyle}>(empty)</Text>;
     } else if (value.length === 1) {
       return (
         <Text>
-          [<Text style={{ color: colors.p4 }}>{formatValue(value[0])}</Text>]
+          [<Text style={valueStyle}>{formatValue(value[0])}</Text>]
         </Text>
       );
     }
@@ -148,10 +151,10 @@ export function Value({
     }
     let numHidden = value.length - displayed.length;
     return (
-      <Text style={{ color: colors.n3 }}>
+      <Text style={{ color: theme.tableText }}>
         [
         {displayed.map((v, i) => {
-          let text = <Text style={{ color: colors.p4 }}>{formatValue(v)}</Text>;
+          let text = <Text style={valueStyle}>{formatValue(v)}</Text>;
           let spacing;
           if (inline) {
             spacing = i !== 0 ? ' ' : '';
@@ -174,9 +177,9 @@ export function Value({
           );
         })}
         {numHidden > 0 && (
-          <Text style={{ color: colors.p4 }}>
+          <Text style={valueStyle}>
             &nbsp;&nbsp;
-            <LinkButton onClick={onExpand} style={{ color: colors.p4 }}>
+            <LinkButton onClick={onExpand} style={valueStyle}>
               {numHidden} more items...
             </LinkButton>
             {!inline && <br />}
@@ -189,12 +192,12 @@ export function Value({
     // An "in between" type
     return (
       <Text>
-        <Text style={{ color: colors.p4 }}>{formatValue(value.num1)}</Text> and{' '}
-        <Text style={{ color: colors.p4 }}>{formatValue(value.num2)}</Text>
+        <Text style={valueStyle}>{formatValue(value.num1)}</Text> and{' '}
+        <Text style={valueStyle}>{formatValue(value.num2)}</Text>
       </Text>
     );
   } else {
-    return <Text style={{ color: colors.p4 }}>{formatValue(value)}</Text>;
+    return <Text style={valueStyle}>{formatValue(value)}</Text>;
   }
 }
 
@@ -213,7 +216,8 @@ function ConditionExpression({
         {
           display: 'block',
           maxWidth: '100%',
-          backgroundColor: colors.n10,
+          color: theme.altPillText,
+          backgroundColor: theme.altPillBackground,
           borderRadius: 4,
           padding: '3px 5px',
           whiteSpace: 'nowrap',
@@ -223,9 +227,9 @@ function ConditionExpression({
         style,
       ]}
     >
-      {prefix && <Text style={{ color: colors.n3 }}>{prefix} </Text>}
-      <Text style={{ color: colors.p4 }}>{mapField(field, options)}</Text>{' '}
-      <Text style={{ color: colors.n3 }}>{friendlyOp(op)}</Text>{' '}
+      {prefix && <Text>{prefix} </Text>}
+      <Text style={valueStyle}>{mapField(field, options)}</Text>{' '}
+      <Text>{friendlyOp(op)}</Text>{' '}
       <Value value={value} field={field} inline={inline} />
     </View>
   );
@@ -261,7 +265,8 @@ function ActionExpression({ field, op, value, options, style }) {
         {
           display: 'block',
           maxWidth: '100%',
-          backgroundColor: colors.n10,
+          color: theme.altPillText,
+          backgroundColor: theme.altPillBackground,
           borderRadius: 4,
           padding: '3px 5px',
           whiteSpace: 'nowrap',
@@ -273,15 +278,14 @@ function ActionExpression({ field, op, value, options, style }) {
     >
       {op === 'set' ? (
         <>
-          <Text style={{ color: colors.n3 }}>{friendlyOp(op)}</Text>{' '}
-          <Text style={{ color: colors.p4 }}>{mapField(field, options)}</Text>{' '}
-          <Text style={{ color: colors.n3 }}>to </Text>
+          <Text>{friendlyOp(op)}</Text>{' '}
+          <Text style={valueStyle}>{mapField(field, options)}</Text>{' '}
+          <Text>to </Text>
           <Value value={value} field={field} />
         </>
       ) : op === 'link-schedule' ? (
         <>
-          <Text style={{ color: colors.n3 }}>{friendlyOp(op)}</Text>{' '}
-          <ScheduleValue value={value} />
+          <Text>{friendlyOp(op)}</Text> <ScheduleValue value={value} />
         </>
       ) : null}
     </View>
@@ -290,17 +294,22 @@ function ActionExpression({ field, op, value, options, style }) {
 
 let Rule = memo(({ rule, hovered, selected, onHover, onEditRule }) => {
   let dispatchSelected = useSelectedDispatch();
-  let borderColor = selected ? colors.b8 : colors.border;
+  let borderColor = selected ? theme.tableBorderSelected : 'none';
   let backgroundFocus = hovered;
 
   return (
     <Row
       height="auto"
-      borderColor={borderColor}
-      backgroundColor={
-        selected ? colors.selected : backgroundFocus ? colors.hover : 'white'
-      }
-      style={{ fontSize: 13, zIndex: selected ? 101 : 'auto' }}
+      style={{
+        fontSize: 13,
+        zIndex: selected ? 101 : 'auto',
+        borderColor,
+        backgroundColor: selected
+          ? theme.tableRowBackgroundHighlight
+          : backgroundFocus
+          ? theme.tableRowBackgroundHover
+          : theme.tableBackground,
+      }}
       collapsed="true"
       onMouseEnter={() => onHover && onHover(rule.id)}
       onMouseLeave={() => onHover && onHover(null)}
@@ -314,14 +323,14 @@ let Rule = memo(({ rule, hovered, selected, onHover, onEditRule }) => {
         selected={selected}
       />
 
-      <Cell name="stage" width={50} plain style={{ color: colors.n5 }}>
+      <Cell name="stage" width={50} plain style={{ color: theme.tableText }}>
         {rule.stage && (
           <View
             style={{
               alignSelf: 'flex-start',
               margin: 5,
-              backgroundColor: colors.b10,
-              color: colors.b1,
+              backgroundColor: theme.pillBackgroundSelected,
+              color: theme.pillTextSelected,
               borderRadius: 4,
               padding: '3px 5px',
             }}
@@ -352,7 +361,9 @@ let Rule = memo(({ rule, hovered, selected, onHover, onEditRule }) => {
           </View>
 
           <Text>
-            <ArrowRight color={colors.n4} style={{ width: 12, height: 12 }} />
+            <ArrowRight
+              style={{ width: 12, height: 12, color: theme.tableText }}
+            />
           </Text>
 
           <View
@@ -705,7 +716,7 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
         >
           <View
             style={{
-              color: colors.n4,
+              color: theme.pageTextLight,
               flexDirection: 'row',
               alignItems: 'center',
               width: '50%',
@@ -750,7 +761,7 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
           style={{
             paddingBlock: 15,
             paddingInline: isModal ? 13 : 0,
-            borderTop: isModal && '1px solid ' + colors.border,
+            borderTop: isModal && '1px solid ' + theme.pillBorder,
             flexShrink: 0,
           }}
         >
diff --git a/packages/desktop-client/src/components/common/Input.tsx b/packages/desktop-client/src/components/common/Input.tsx
index 2b09d772aa0..c55c6ac15ac 100644
--- a/packages/desktop-client/src/components/common/Input.tsx
+++ b/packages/desktop-client/src/components/common/Input.tsx
@@ -9,11 +9,12 @@ import { type HTMLPropsWithStyle } from '../../types/utils';
 
 export const defaultInputStyle = {
   outline: 0,
-  backgroundColor: 'white',
+  backgroundColor: theme.tableBackground,
+  color: theme.formInputText,
   margin: 0,
   padding: 5,
   borderRadius: 4,
-  border: '1px solid #d0d0d0',
+  border: '1px solid ' + theme.formInputBorder,
 };
 
 type InputProps = HTMLPropsWithStyle<HTMLInputElement> & {
diff --git a/packages/desktop-client/src/components/common/Menu.tsx b/packages/desktop-client/src/components/common/Menu.tsx
index 59ad018bf64..06d7d472c82 100644
--- a/packages/desktop-client/src/components/common/Menu.tsx
+++ b/packages/desktop-client/src/components/common/Menu.tsx
@@ -6,7 +6,7 @@ import {
   useState,
 } from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 
 import Text from './Text';
 import View from './View';
@@ -16,7 +16,11 @@ type KeybindingProps = {
 };
 
 function Keybinding({ keyName }: KeybindingProps) {
-  return <Text style={{ fontSize: 10, color: colors.n6 }}>{keyName}</Text>;
+  return (
+    <Text style={{ fontSize: 10, color: theme.menuKeybindingText }}>
+      {keyName}
+    </Text>
+  );
 }
 
 type MenuItem = {
@@ -106,7 +110,7 @@ export default function Menu({
         if (item === Menu.line) {
           return (
             <View key={idx} style={{ margin: '3px 0px' }}>
-              <View style={{ borderTop: '1px solid ' + colors.n10 }} />
+              <View style={{ borderTop: '1px solid ' + theme.menuBorder }} />
             </View>
           );
         } else if (item.type === Menu.label) {
@@ -114,7 +118,7 @@ export default function Menu({
             <Text
               key={item.name}
               style={{
-                color: colors.n6,
+                color: theme.altMenuItemTextHeader,
                 fontSize: 11,
                 lineHeight: '1em',
                 textTransform: 'uppercase',
@@ -145,10 +149,14 @@ export default function Menu({
                     : -3,
                 flexDirection: 'row',
                 alignItems: 'center',
+                color: theme.menuItemText,
               },
-              item.disabled && { color: colors.n7 },
+              item.disabled && { color: theme.buttonBareDisabledText },
               !item.disabled &&
-                hoveredIndex === idx && { backgroundColor: colors.n10 },
+                hoveredIndex === idx && {
+                  backgroundColor: theme.menuItemBackgroundHover,
+                  color: theme.menuItemTextHover,
+                },
             ]}
             onMouseEnter={() => setHoveredIndex(idx)}
             onMouseLeave={() => setHoveredIndex(null)}
diff --git a/packages/desktop-client/src/components/common/Modal.tsx b/packages/desktop-client/src/components/common/Modal.tsx
index 863c4208e9b..99515a20100 100644
--- a/packages/desktop-client/src/components/common/Modal.tsx
+++ b/packages/desktop-client/src/components/common/Modal.tsx
@@ -11,7 +11,7 @@ import hotkeys from 'hotkeys-js';
 
 import AnimatedLoading from '../../icons/AnimatedLoading';
 import Delete from '../../icons/v0/Delete';
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
 import tokens from '../../tokens';
 
 import Button from './Button';
@@ -124,7 +124,9 @@ const Modal = ({
             minWidth: '100%',
             minHeight: 0,
             borderRadius: 4,
-            backgroundColor: 'white',
+            //border: '1px solid ' + theme.modalBorder,
+            color: theme.pageText,
+            backgroundColor: theme.modalBackground,
             opacity: isHidden ? 0 : 1,
             [`@media (min-width: ${tokens.breakpoint_small})`]: {
               minWidth: tokens.breakpoint_small,
@@ -146,7 +148,6 @@ const Modal = ({
             {showTitle && (
               <View
                 style={{
-                  color: colors.n2,
                   flex: 1,
                   alignSelf: 'center',
                   textAlign: 'center',
@@ -193,7 +194,7 @@ const Modal = ({
                     style={{ padding: '10px 10px' }}
                     aria-label="Close"
                   >
-                    <Delete width={10} />
+                    <Delete width={10} style={{ color: 'inherit' }} />
                   </Button>
                 )}
               </View>
@@ -211,7 +212,7 @@ const Modal = ({
               left: 0,
               right: 0,
               bottom: 0,
-              backgroundColor: 'rgba(255, 255, 255, .6)',
+              backgroundColor: theme.pageBackground,
               alignItems: 'center',
               justifyContent: 'center',
               zIndex: 1000,
@@ -219,7 +220,7 @@ const Modal = ({
           >
             <AnimatedLoading
               style={{ width: 20, height: 20 }}
-              color={colors.n1}
+              color={theme.pageText}
             />
           </View>
         )}
diff --git a/packages/desktop-client/src/components/common/Select.tsx b/packages/desktop-client/src/components/common/Select.tsx
index e3d57c91a26..fb1b984d066 100644
--- a/packages/desktop-client/src/components/common/Select.tsx
+++ b/packages/desktop-client/src/components/common/Select.tsx
@@ -8,9 +8,10 @@ import {
 import { type CSSProperties, css } from 'glamor';
 
 import ExpandArrow from '../../icons/v0/ExpandArrow';
-import { colors } from '../../style';
+import { theme, styles } from '../../style';
 
 type SelectProps<Value extends string> = {
+  bare?: boolean;
   options: Array<[Value, string]>;
   value: Value;
   defaultLabel?: string;
@@ -37,6 +38,7 @@ type SelectProps<Value extends string> = {
  */
 
 export default function Select<Value extends string>({
+  bare,
   options,
   value,
   defaultLabel = '',
@@ -47,19 +49,38 @@ export default function Select<Value extends string>({
   disabledKeys = [],
 }: SelectProps<Value>) {
   const arrowSize = 7;
+  const checkHeight = !style
+    ? '18px'
+    : style.minHeight
+    ? style.minHeight
+    : !style[0]
+    ? '18px'
+    : style[0].minHeight ?? '18px';
   const targetOption = options.filter(option => option[0] === value);
   return (
     <ListboxInput
       value={value}
       onChange={onChange}
-      style={{ lineHeight: '1em', ...wrapperStyle }}
+      style={{
+        color: bare ? 'inherit' : theme.formInputText,
+        backgroundColor: bare ? 'transparent' : theme.cardBackground,
+        borderRadius: styles.menuBorderRadius,
+        border: bare ? 'none' : '1px solid ' + theme.formInputBorder,
+        lineHeight: '1em',
+        ...wrapperStyle,
+      }}
     >
       <ListboxButton
-        {...css([
-          { borderWidth: 0, padding: '2px 5px', borderRadius: 4 },
-          style,
-        ])}
-        arrow={<ExpandArrow style={{ width: arrowSize, height: arrowSize }} />}
+        {...css([{ borderWidth: 0, padding: 5, borderRadius: 4 }, style])}
+        arrow={
+          <ExpandArrow
+            style={{
+              width: arrowSize,
+              height: arrowSize,
+              color: 'inherit',
+            }}
+          />
+        }
       >
         <span
           style={{
@@ -68,14 +89,34 @@ export default function Select<Value extends string>({
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
             maxWidth: `calc(100% - ${arrowSize + 5}px)`,
-            minHeight: '18px',
             alignItems: 'center',
+            minHeight: checkHeight,
           }}
         >
           {targetOption.length !== 0 ? targetOption[0][1] : defaultLabel}
         </span>
       </ListboxButton>
-      <ListboxPopover style={{ zIndex: 10000, outline: 0, borderRadius: 4 }}>
+      <ListboxPopover
+        style={{
+          zIndex: 10000,
+          outline: 0,
+          borderRadius: styles.menuBorderRadius,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
+          boxShadow: styles.cardShadow,
+          border: '1px solid ' + theme.menuBorder,
+        }}
+        {...css({
+          '[data-reach-listbox-option]': {
+            background: theme.menuItemBackground,
+            color: theme.menuItemText,
+          },
+          '[data-reach-listbox-option][data-current-nav]': {
+            background: theme.menuItemBackgroundHover,
+            color: theme.menuItemTextHover,
+          },
+        })}
+      >
         {!line ? (
           <ListboxList style={{ maxHeight: 250, overflowY: 'auto' }}>
             {options.map(([value, label]) => (
@@ -103,7 +144,7 @@ export default function Select<Value extends string>({
               style={{
                 padding: '2px',
                 marginTop: 5,
-                borderTop: '1px solid ' + colors.n10,
+                borderTop: '1px solid ' + theme.menuBorder,
               }}
             />
             {options.slice(line, options.length).map(([value, label]) => (
diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.js b/packages/desktop-client/src/components/filters/FiltersMenu.js
index 3397be89c2c..f503c1032f9 100644
--- a/packages/desktop-client/src/components/filters/FiltersMenu.js
+++ b/packages/desktop-client/src/components/filters/FiltersMenu.js
@@ -25,7 +25,7 @@ import { titleFirst } from 'loot-core/src/shared/util';
 
 import DeleteIcon from '../../icons/v0/Delete';
 import SettingsSliderAlternate from '../../icons/v2/SettingsSliderAlternate';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Button from '../common/Button';
 import Menu from '../common/Menu';
 import Select from '../common/Select';
@@ -96,11 +96,14 @@ function OpButton({ op, selected, style, onClick }) {
     <Button
       type="bare"
       style={[
-        { backgroundColor: colors.n10, marginBottom: 5 },
+        { backgroundColor: theme.altbuttonMenuBackground, marginBottom: 5 },
         style,
         selected && {
-          color: 'white',
-          '&,:hover,:active': { backgroundColor: colors.b4 },
+          color: theme.buttonNormalSelectedText,
+          '&,:hover,:active': {
+            backgroundColor: theme.buttonNormalSelectedBackground,
+            color: theme.buttonNormalSelectedText,
+          },
         },
       ]}
       onClick={onClick}
@@ -170,47 +173,50 @@ function ConfigureField({
   return (
     <Tooltip
       position="bottom-left"
-      style={{ padding: 15 }}
+      style={{ padding: 15, color: theme.altmenuItemTextHeader }}
       width={275}
       onClose={() => dispatch({ type: 'close' })}
     >
       <FocusScope>
         <View style={{ marginBottom: 10 }}>
-          {field === 'amount' || field === 'date' ? (
-            <Select
-              options={
-                field === 'amount'
-                  ? [
-                      ['amount', 'Amount'],
-                      ['amount-inflow', 'Amount (inflow)'],
-                      ['amount-outflow', 'Amount (outflow)'],
-                    ]
-                  : field === 'date'
-                  ? [
-                      ['date', 'Date'],
-                      ['month', 'Month'],
-                      ['year', 'Year'],
-                    ]
-                  : null
-              }
-              value={subfield}
-              onChange={sub => {
-                setSubfield(sub);
-
-                if (sub === 'month' || sub === 'year') {
-                  dispatch({ type: 'set-op', op: 'is' });
+          <Stack direction="row" align="flex-start">
+            {field === 'amount' || field === 'date' ? (
+              <Select
+                options={
+                  field === 'amount'
+                    ? [
+                        ['amount', 'Amount'],
+                        ['amount-inflow', 'Amount (inflow)'],
+                        ['amount-outflow', 'Amount (outflow)'],
+                      ]
+                    : field === 'date'
+                    ? [
+                        ['date', 'Date'],
+                        ['month', 'Month'],
+                        ['year', 'Year'],
+                      ]
+                    : null
                 }
-              }}
-              style={{ borderWidth: 1 }}
-            />
-          ) : (
-            titleFirst(mapField(field))
-          )}
+                value={subfield}
+                onChange={sub => {
+                  setSubfield(sub);
+
+                  if (sub === 'month' || sub === 'year') {
+                    dispatch({ type: 'set-op', op: 'is' });
+                  }
+                }}
+                style={{ borderWidth: 1 }}
+              />
+            ) : (
+              titleFirst(mapField(field))
+            )}
+            <View style={{ flex: 1 }} />
+          </Stack>
         </View>
 
         <View
           style={{
-            color: colors.n4,
+            color: theme.pageTextLight,
             marginBottom: 10,
           }}
         >
@@ -494,7 +500,7 @@ function FilterExpression({
     <View
       style={[
         {
-          backgroundColor: colors.n9,
+          backgroundColor: theme.pillBackground,
           borderRadius: 4,
           flexDirection: 'row',
           alignItems: 'center',
@@ -512,13 +518,13 @@ function FilterExpression({
       >
         <div style={{ paddingBlock: 1, paddingLeft: 5, paddingRight: 2 }}>
           {customName ? (
-            <Text style={{ color: colors.p4 }}>{customName}</Text>
+            <Text style={{ color: theme.pageTextPositive }}>{customName}</Text>
           ) : (
             <>
-              <Text style={{ color: colors.p4 }}>
+              <Text style={{ color: theme.pageTextPositive }}>
                 {mapField(field, options)}
               </Text>{' '}
-              <Text style={{ color: colors.n3 }}>{friendlyOp(op, null)}</Text>{' '}
+              <Text>{friendlyOp(op, null)}</Text>{' '}
               <Value
                 value={value}
                 field={field}
diff --git a/packages/desktop-client/src/components/filters/SavedFilters.js b/packages/desktop-client/src/components/filters/SavedFilters.js
index 38b16ce506c..782ebcef8b9 100644
--- a/packages/desktop-client/src/components/filters/SavedFilters.js
+++ b/packages/desktop-client/src/components/filters/SavedFilters.js
@@ -3,7 +3,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { send, sendCatch } from 'loot-core/src/platform/client/fetch';
 
 import ExpandArrow from '../../icons/v0/ExpandArrow';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Button from '../common/Button';
 import Menu from '../common/Menu';
 import MenuTooltip from '../common/MenuTooltip';
@@ -219,7 +219,7 @@ function SavedFilterMenuButton({
         )}
         {err && (
           <Stack direction="row" align="center" style={{ padding: 10 }}>
-            <Text style={{ color: colors.r4 }}>{err}</Text>
+            <Text style={{ color: theme.errorText }}>{err}</Text>
           </Stack>
         )}
       </MenuTooltip>
@@ -264,7 +264,7 @@ function SavedFilterMenuButton({
 export function CondOpMenu({ conditionsOp, onCondOpChange, filters }) {
   return (
     filters.length > 1 && (
-      <Text style={{ color: colors.n4, marginTop: 11, marginRight: 5 }}>
+      <Text style={{ color: theme.pageText, marginTop: 11, marginRight: 5 }}>
         <FieldSelect
           style={{ display: 'inline-flex' }}
           fields={[
diff --git a/packages/desktop-client/src/components/forms.tsx b/packages/desktop-client/src/components/forms.tsx
index e60252b5f96..8bcf156102c 100644
--- a/packages/desktop-client/src/components/forms.tsx
+++ b/packages/desktop-client/src/components/forms.tsx
@@ -2,7 +2,7 @@ import React, { type ReactNode, type HTMLProps } from 'react';
 
 import { css, type CSSProperties } from 'glamor';
 
-import { colors } from '../style';
+import { theme } from '../style';
 
 import Text from './common/Text';
 import View from './common/View';
@@ -19,7 +19,7 @@ export const SectionLabel = ({ title, style }: SectionLabelProps) => {
         {
           fontWeight: 500,
           textTransform: 'uppercase',
-          color: colors.b3,
+          color: theme.altFormLabelText,
           marginBottom: 5,
           lineHeight: '1em',
         },
@@ -40,7 +40,9 @@ type FormLabelProps = {
 
 export const FormLabel = ({ style, title, id, htmlFor }: FormLabelProps) => {
   return (
-    <Text style={[{ fontSize: 13, marginBottom: 3, color: colors.n3 }, style]}>
+    <Text
+      style={[{ fontSize: 13, marginBottom: 3, color: theme.tableText }, style]}
+    >
       <label htmlFor={htmlFor} id={id}>
         {title}
       </label>
@@ -78,20 +80,20 @@ export const Checkbox = (props: CheckboxProps) => {
             height: 15,
             appearance: 'none',
             outline: 0,
-            border: '1px solid #d0d0d0',
+            border: '1px solid ' + theme.formInputBorder,
             borderRadius: 4,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            color: 'white',
-            backgroundColor: 'white',
+            color: theme.tableBackground,
+            backgroundColor: theme.tableBackground,
             ':checked': {
-              border: '1px solid ' + colors.b6,
-              backgroundColor: colors.b6,
+              border: '1px solid ' + theme.altformInputBorderSelected,
+              backgroundColor: theme.tableTextEditingBackground,
               '::after': {
                 display: 'block',
                 background:
-                  colors.b6 +
+                  theme.tableTextEditingBackground +
                   // eslint-disable-next-line rulesdir/typography
                   ' url(\'data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>\') 9px 9px',
                 width: 9,
@@ -106,14 +108,14 @@ export const Checkbox = (props: CheckboxProps) => {
                 bottom: -5,
                 left: -5,
                 right: -5,
-                border: '2px solid ' + colors.b5,
+                border: '2px solid ' + theme.altformInputBorderSelected,
                 borderRadius: 6,
                 content: ' ',
               },
             },
           },
         ],
-        props.style,
+        props.styles,
       )}
     />
   );
diff --git a/packages/desktop-client/src/components/modals/EditRule.js b/packages/desktop-client/src/components/modals/EditRule.js
index fba46b0c34f..644d2024759 100644
--- a/packages/desktop-client/src/components/modals/EditRule.js
+++ b/packages/desktop-client/src/components/modals/EditRule.js
@@ -29,7 +29,7 @@ import useSelected, { SelectedProvider } from '../../hooks/useSelected';
 import AddIcon from '../../icons/v0/Add';
 import SubtractIcon from '../../icons/v0/Subtract';
 import InformationOutline from '../../icons/v1/InformationOutline';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Button from '../common/Button';
 import Modal from '../common/Modal';
 import Select from '../common/Select';
@@ -78,12 +78,12 @@ function getTransactionFields(conditions, actions) {
 
 export function FieldSelect({ fields, style, value, onChange }) {
   return (
-    <View style={style}>
+    <View style={[{ color: theme.pageTextPositive }, style]}>
       <Select
+        bare
         options={fields}
         value={value}
         onChange={value => onChange('field', value)}
-        style={{ color: colors.p4 }}
       />
     </View>
   );
@@ -93,6 +93,7 @@ export function OpSelect({
   ops,
   type,
   style,
+  wrapperStyle,
   value,
   formatOp = friendlyOp,
   onChange,
@@ -110,11 +111,13 @@ export function OpSelect({
 
   return (
     <Select
+      bare
       options={ops.map(op => [op, formatOp(op, type)])}
       value={value}
       onChange={value => onChange('op', value)}
       line={line}
-      style={style}
+      style={[{ minHeight: '1px' }, ...style]}
+      wrapperStyle={wrapperStyle}
     />
   );
 }
@@ -129,7 +132,7 @@ function EditorButtons({ onAdd, onDelete, style }) {
           style={{ padding: 7 }}
           aria-label="Delete entry"
         >
-          <SubtractIcon style={{ width: 8, height: 8 }} />
+          <SubtractIcon style={{ width: 8, height: 8, color: 'inherit' }} />
         </Button>
       )}
       {onAdd && (
@@ -139,7 +142,7 @@ function EditorButtons({ onAdd, onDelete, style }) {
           style={{ padding: 7 }}
           aria-label="Add entry"
         >
-          <AddIcon style={{ width: 10, height: 10 }} />
+          <AddIcon style={{ width: 10, height: 10, color: 'inherit' }} />
         </Button>
       )}
     </>
@@ -152,7 +155,7 @@ function FieldError({ type }) {
       style={{
         fontSize: 12,
         textAlign: 'center',
-        color: colors.r5,
+        color: theme.errorText,
         marginBottom: 5,
       }}
     >
@@ -277,7 +280,11 @@ function ScheduleDescription({ id }) {
           }}
         >
           Payee:{' '}
-          <DisplayId type="payees" id={schedule._payee} noneColor={colors.n5} />
+          <DisplayId
+            type="payees"
+            id={schedule._payee}
+            noneColor={theme.altpageTextSubdued}
+          />
         </Text>
         <Text style={{ margin: '0 5px' }}> — </Text>
         <Text style={{ flexShrink: 0 }}>
@@ -334,7 +341,12 @@ function ActionEditor({ ops, action, editorStyle, onChange, onDelete, onAdd }) {
         </>
       ) : op === 'link-schedule' ? (
         <>
-          <View style={{ padding: '5px 10px', color: colors.p4 }}>
+          <View
+            style={{
+              padding: '5px 10px',
+              color: theme.pageTextPositive,
+            }}
+          >
             {friendlyOp(op)}
           </View>
           <ScheduleDescription id={value || null} />
@@ -361,7 +373,7 @@ function StageInfo() {
         onMouseLeave={() => setOpen(false)}
       >
         <InformationOutline
-          style={{ width: 11, height: 11, color: colors.n4 }}
+          style={{ width: 11, height: 11, color: theme.pageTextLight }}
         />
       </View>
       {open && (
@@ -369,7 +381,7 @@ function StageInfo() {
           position="bottom-left"
           style={{
             padding: 10,
-            color: colors.n4,
+            color: theme.pageTextLight,
             maxWidth: 450,
             lineHeight: 1.5,
           }}
@@ -390,8 +402,8 @@ function StageButton({ selected, children, style, onSelect }) {
       style={[
         { fontSize: 'inherit' },
         selected && {
-          backgroundColor: colors.b9,
-          ':hover': { backgroundColor: colors.b9 },
+          backgroundColor: theme.pillBackgroundSelected,
+          ':hover': { backgroundColor: theme.pillBackgroundSelected },
         },
         style,
       ]}
@@ -743,7 +755,8 @@ export default function EditRule({
   }
 
   let editorStyle = {
-    backgroundColor: colors.n10,
+    color: theme.altPillText,
+    backgroundColor: theme.altPillBackground,
     borderRadius: 4,
   };
 
@@ -764,6 +777,7 @@ export default function EditRule({
             flexShrink: 0,
             flexBasis: 'auto',
             overflow: 'hidden',
+            color: theme.pageTextLight,
           }}
         >
           <View
@@ -774,9 +788,7 @@ export default function EditRule({
               padding: '0 20px',
             }}
           >
-            <Text style={{ color: colors.n4, marginRight: 15 }}>
-              Stage of rule:
-            </Text>
+            <Text style={{ marginRight: 15 }}>Stage of rule:</Text>
 
             <Stack direction="row" align="center" spacing={1}>
               <StageButton
@@ -805,7 +817,7 @@ export default function EditRule({
           <View
             innerRef={scrollableEl}
             style={{
-              borderBottom: '1px solid ' + colors.border,
+              borderBottom: '1px solid ' + theme.tableBorder,
               padding: 20,
               overflow: 'auto',
               maxHeight: 'calc(100% - 300px)',
@@ -813,7 +825,7 @@ export default function EditRule({
           >
             <View style={{ flexShrink: 0 }}>
               <View style={{ marginBottom: 30 }}>
-                <Text style={{ color: colors.n4, marginBottom: 15 }}>
+                <Text style={{ marginBottom: 15 }}>
                   If
                   <FieldSelect
                     data-testid="conditions-op"
@@ -837,7 +849,7 @@ export default function EditRule({
                 />
               </View>
 
-              <Text style={{ color: colors.n4, marginBottom: 15 }}>
+              <Text style={{ marginBottom: 15 }}>
                 Then apply these actions:
               </Text>
               <View style={{ flex: 1 }}>
@@ -879,7 +891,7 @@ export default function EditRule({
                   marginBottom: 12,
                 }}
               >
-                <Text style={{ color: colors.n4, marginBottom: 0 }}>
+                <Text style={{ color: theme.pageTextLight, marginBottom: 0 }}>
                   This rule applies to these transactions:
                 </Text>
 
@@ -895,7 +907,7 @@ export default function EditRule({
               <SimpleTransactionsTable
                 transactions={transactions}
                 fields={getTransactionFields(conditions, actions)}
-                style={{ border: '1px solid ' + colors.border }}
+                style={{ border: '1px solid ' + theme.tableBorder }}
               />
 
               <Stack
diff --git a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
index 89e9ea370a2..83c80ca6425 100644
--- a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
+++ b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
@@ -7,7 +7,7 @@ import { getRecurringDescription } from 'loot-core/src/shared/schedules';
 
 import AddIcon from '../../icons/v0/Add';
 import SubtractIcon from '../../icons/v0/Subtract';
-import { colors } from '../../style';
+import { colors, theme } from '../../style';
 import Button from '../common/Button';
 import Input from '../common/Input';
 import Select from '../common/Select';
@@ -208,10 +208,7 @@ function MonthlyPatterns({ config, dispatch }) {
             }
             disabledKeys={['-']}
             wrapperStyle={{ flex: 1, marginRight: 10 }}
-            style={{
-              borderWidth: 1,
-              width: '100%',
-            }}
+            style={{ minHeight: '1px', width: '100%' }}
           />
           <Select
             options={[
@@ -223,7 +220,7 @@ function MonthlyPatterns({ config, dispatch }) {
             onChange={value => updateRecurrence(recurrence, 'type', value)}
             disabledKeys={['-']}
             wrapperStyle={{ flex: 1, marginRight: 10 }}
-            style={{ borderWidth: 1, width: '100%' }}
+            style={{ minHeight: '1px', width: '100%' }}
           />
           <Button
             type="bare"
@@ -325,14 +322,21 @@ function RecurringScheduleTooltip({ config: currentConfig, onClose, onSave }) {
           defaultValue={config.interval || 1}
         />
         <Select
+          bare
           options={FREQUENCY_OPTIONS.map(opt => [opt.id, opt.name])}
           value={config.frequency}
           onChange={value => updateField('frequency', value)}
-          style={{ borderWidth: 1, height: 27.5 }}
+          style={{ border: '1px solid ' + theme.formInputBorder, height: 27.5 }}
         />
         {config.frequency === 'monthly' &&
         (config.patterns == null || config.patterns.length === 0) ? (
-          <Button onClick={() => dispatch({ type: 'add-recurrence' })}>
+          <Button
+            style={{
+              backgroundColor: theme.tableBackground,
+              ':hover': { backgroundColor: theme.tableBackground },
+            }}
+            onClick={() => dispatch({ type: 'add-recurrence' })}
+          >
             Add specific days
           </Button>
         ) : null}
diff --git a/packages/desktop-client/src/components/sort.js b/packages/desktop-client/src/components/sort.js
index be4fa3d242d..768cb855f63 100644
--- a/packages/desktop-client/src/components/sort.js
+++ b/packages/desktop-client/src/components/sort.js
@@ -9,7 +9,7 @@ import React, {
 } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 
-import { colors } from '../style';
+import { theme } from '../style';
 
 import View from './common/View';
 
@@ -123,7 +123,7 @@ export function DropHighlight({ pos, offset = {} }) {
           right: 2,
           borderRadius: 3,
           height: 3,
-          background: `linear-gradient(90deg, ${colors.b4} 0%, ${colors.b5} 100%)`,
+          background: theme.pageTextLink,
           zIndex: 10000,
           pointerEvents: 'none',
         },
diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
index b8d7a458782..d6ee64c4d17 100644
--- a/packages/desktop-client/src/components/table.tsx
+++ b/packages/desktop-client/src/components/table.tsx
@@ -28,7 +28,7 @@ import AnimatedLoading from '../icons/AnimatedLoading';
 import DeleteIcon from '../icons/v0/Delete';
 import ExpandArrow from '../icons/v0/ExpandArrow';
 import Checkmark from '../icons/v1/Checkmark';
-import { styles, colors } from '../style';
+import { styles, theme } from '../style';
 
 import Button from './common/Button';
 import Input from './common/Input';
@@ -48,7 +48,6 @@ import useSheetValue from './spreadsheet/useSheetValue';
 import { Tooltip, IntersectionBoundary } from './tooltips';
 
 export const ROW_HEIGHT = 32;
-const TABLE_BACKGROUND_COLOR = colors.n11;
 
 function fireBlur(onBlur, e) {
   if (document.hasFocus()) {
@@ -63,8 +62,8 @@ function fireBlur(onBlur, e) {
 }
 
 const CellContext = createContext({
-  backgroundColor: 'white',
-  borderColor: colors.n9,
+  backgroundColor: theme.tableBackground,
+  borderColor: theme.tableBorder,
 });
 
 type CellProviderProps = {
@@ -96,26 +95,10 @@ type FieldProps = ComponentProps<typeof View> & {
   contentStyle?: CSSProperties;
 };
 export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
-  {
-    width,
-    name,
-    borderColor: oldBorderColor,
-    truncate = true,
-    children,
-    style,
-    contentStyle,
-    ...props
-  },
+  { width, name, truncate = true, children, style, contentStyle, ...props },
   ref,
 ) {
   let { backgroundColor, borderColor } = useContext(CellContext);
-
-  // TODO: Get rid of this. Go through and remove all the places where
-  // the border color is manually passed in.
-  if (oldBorderColor) {
-    borderColor = oldBorderColor;
-  }
-
   return (
     <View
       innerRef={ref}
@@ -228,6 +211,8 @@ export function Cell({
   // the border color is manually passed in.
   if (oldBorderColor) {
     borderColor = oldBorderColor;
+  } else {
+    borderColor = theme.tableBorder;
   }
 
   const widthStyle = width === 'flex' ? { flex: 1, flexBasis: 0 } : { width };
@@ -338,8 +323,8 @@ type RowProps = ComponentProps<typeof View> & {
   highlighted?: boolean;
 };
 export function Row({
-  backgroundColor = 'white',
-  borderColor = colors.border,
+  backgroundColor = theme.tableBackground,
+  borderColor = theme.tableBorder,
   inset = 0,
   collapsed,
   focused,
@@ -378,8 +363,10 @@ export function Row({
 
   return (
     <CellProvider
-      backgroundColor={shouldHighlight ? colors.y9 : backgroundColor}
-      borderColor={shouldHighlight ? colors.y8 : borderColor}
+      backgroundColor={
+        shouldHighlight ? theme.tableRowBackgroundHighlight : backgroundColor
+      }
+      borderColor={shouldHighlight ? theme.tableBorderSelected : borderColor}
     >
       <View
         innerRef={rowRef}
@@ -408,14 +395,13 @@ export function Row({
 }
 
 const inputCellStyle = {
-  backgroundColor: 'white',
   padding: '5px 3px',
   margin: '0 1px',
 };
 
 const readonlyInputStyle = {
   backgroundColor: 'transparent',
-  '::selection': { backgroundColor: '#d9d9d9' },
+  '::selection': { backgroundColor: theme.formInputTextReadOnlySelection },
 };
 
 type InputValueProps = ComponentProps<typeof Input> & {
@@ -605,6 +591,8 @@ export function DeleteCell({ onDelete, style, ...props }: DeleteCellProps) {
 
 type CellButtonProps = {
   style?: CSSProperties;
+  primary?: boolean;
+  bare?: boolean;
   disabled?: boolean;
   clickBehavior?: string;
   onSelect?: (e) => void;
@@ -612,7 +600,19 @@ type CellButtonProps = {
   children: ReactNode;
 };
 export const CellButton = forwardRef<HTMLDivElement, CellButtonProps>(
-  ({ style, disabled, clickBehavior, onSelect, onEdit, children }, ref) => {
+  (
+    {
+      style,
+      primary,
+      bare,
+      disabled,
+      clickBehavior,
+      onSelect,
+      onEdit,
+      children,
+    },
+    ref,
+  ) => {
     // This represents a cell that acts like a button: it's clickable,
     // focusable, etc. The reason we don't use a button is because the
     // full behavior is undesirable: we really don't want stuff like
@@ -645,10 +645,34 @@ export const CellButton = forwardRef<HTMLDivElement, CellButtonProps>(
             alignItems: 'center',
             cursor: 'default',
             transition: 'box-shadow .15s',
-            ':focus': {
-              outline: 0,
-              boxShadow: `0 0 0 3px white, 0 0 0 5px ${colors.b5}`,
-            },
+            backgroundColor: bare
+              ? 'transparent'
+              : disabled // always use disabled before primary since we can have a disabled primary button
+              ? theme.buttonNormalDisabledBackground
+              : primary
+              ? theme.buttonPrimaryBackground
+              : theme.buttonNormalBackground,
+            border: bare
+              ? 'none'
+              : '1px solid ' +
+                (disabled
+                  ? theme.buttonNormalDisabledBorder
+                  : primary
+                  ? theme.buttonPrimaryBorder
+                  : theme.buttonNormalBorder),
+            color: bare
+              ? 'inherit'
+              : disabled
+              ? theme.buttonNormalDisabledText
+              : primary
+              ? theme.buttonPrimaryText
+              : theme.buttonNormalText,
+            ':focus': bare
+              ? null
+              : {
+                  outline: 0,
+                  boxShadow: `1px 1px 2px ${theme.buttonNormalShadow}`,
+                },
           },
           style,
         ]}
@@ -679,7 +703,6 @@ type SelectCellProps = Omit<ComponentProps<typeof Cell>, 'children'> & {
 export function SelectCell({
   focused,
   selected,
-  partial,
   style,
   onSelect,
   onEdit,
@@ -700,26 +723,24 @@ export function SelectCell({
     >
       {() => (
         <CellButton
-          style={[
-            {
-              width: 12,
-              height: 12,
-              border: '1px solid ' + colors.n8,
-              borderRadius: 3,
-              justifyContent: 'center',
-              alignItems: 'center',
-
-              ':focus': {
-                border: '1px solid ' + colors.b5,
-                boxShadow: '0 1px 2px ' + colors.b5,
-              },
-            },
-            selected && {
-              backgroundColor: partial ? colors.b9 : colors.b5,
-              borderColor: partial ? colors.b9 : colors.b5,
-              color: 'white',
+          style={{
+            width: 12,
+            height: 12,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 3,
+            border: selected
+              ? '1px solid ' + theme.altformInputBorderSelected
+              : '1px solid ' + theme.formInputBorder,
+            color: theme.tableBackground,
+            backgroundColor: selected
+              ? theme.tableTextEditingBackground
+              : theme.tableBackground,
+            ':focus': {
+              border: '1px solid ' + theme.altformInputBorderSelected,
+              boxShadow: '0 1px 2px ' + theme.altformInputShadowSelected,
             },
-          ]}
+          }}
           onEdit={onEdit}
           onSelect={onSelect}
           clickBehavior="none"
@@ -817,26 +838,22 @@ export function TableHeader({
 }: TableHeaderProps) {
   return (
     <View
-      style={
-        version === 'v2' && {
-          borderRadius: '6px 6px 0 0',
-          overflow: 'hidden',
-          flexShrink: 0,
-        }
-      }
+      style={{
+        borderRadius: '6px 6px 0 0',
+        overflow: 'hidden',
+        flexShrink: 0,
+      }}
     >
       <Row
-        backgroundColor="white"
-        borderColor={colors.border}
         collapsed={true}
         {...rowProps}
-        style={[
-          { zIndex: 200 },
-          version === 'v2'
-            ? { color: colors.n4, fontWeight: 500 }
-            : { color: colors.n4 },
-          rowProps.style,
-        ]}
+        style={{
+          color: theme.tableHeaderText,
+          backgroundColor: theme.tableHeaderBackground,
+          zIndex: 200,
+          fontWeight: 500,
+          ...rowProps.style,
+        }}
       >
         {headers
           ? headers.map(header => {
@@ -870,10 +887,14 @@ export function SelectedItemsButton({ name, keyHandlers, items, onSelect }) {
 
       <Button
         type="bare"
-        style={{ color: colors.b3 }}
+        style={{ color: theme.pageTextPositive }}
         onClick={() => setMenuOpen(true)}
       >
-        <ExpandArrow width={8} height={8} style={{ marginRight: 5 }} />
+        <ExpandArrow
+          width={8}
+          height={8}
+          style={{ marginRight: 5, color: theme.pageText }}
+        />
         {selectedItems.size} {name}
       </Button>
 
@@ -881,7 +902,7 @@ export function SelectedItemsButton({ name, keyHandlers, items, onSelect }) {
         <Tooltip
           position="bottom-right"
           width={200}
-          style={{ padding: 0 }}
+          style={{ padding: 0, backgroundColor: 'transparent' }}
           onClose={() => setMenuOpen(false)}
         >
           <Menu
@@ -962,7 +983,7 @@ export const Table = forwardRef<TableHandleRef, TableProps>(
       contentHeader,
       loading,
       rowHeight = ROW_HEIGHT,
-      backgroundColor = TABLE_BACKGROUND_COLOR,
+      backgroundColor = theme.tableHeaderBackground,
       renderItem,
       renderEmpty,
       getItemKey,
@@ -1133,7 +1154,7 @@ export const Table = forwardRef<TableHandleRef, TableProps>(
             justifyContent: 'center',
             alignItems: 'center',
             fontStyle: 'italic',
-            color: colors.n6,
+            color: theme.tableText,
             flex: 1,
           }}
         >
@@ -1154,7 +1175,7 @@ export const Table = forwardRef<TableHandleRef, TableProps>(
             },
           ]}
         >
-          <AnimatedLoading width={25} color={colors.n1} />
+          <AnimatedLoading width={25} color={theme.tableText} />
         </View>
       );
     }
@@ -1177,7 +1198,6 @@ export const Table = forwardRef<TableHandleRef, TableProps>(
       >
         {headers && (
           <TableHeader
-            version={version}
             height={rowHeight}
             {...(Array.isArray(headers) ? { headers } : { children: headers })}
           />
@@ -1218,7 +1238,6 @@ export const Table = forwardRef<TableHandleRef, TableProps>(
                             ? getScrollOffset(height, initialScrollTo.current)
                             : 0
                         }
-                        version={version}
                         animated={animated}
                         overscanCount={5}
                         onItemsRendered={onItemsRendered}
diff --git a/packages/desktop-client/src/components/tooltips.js b/packages/desktop-client/src/components/tooltips.js
index 83488b45ccd..059558b2b74 100644
--- a/packages/desktop-client/src/components/tooltips.js
+++ b/packages/desktop-client/src/components/tooltips.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 
 import { css } from 'glamor';
 
-import { styles } from '../style';
+import { styles, theme } from '../style';
 
 export const IntersectionBoundary = createContext();
 
@@ -299,7 +299,8 @@ export class Tooltip extends Component {
       width,
       ...styles.shadowLarge,
       borderRadius: 4,
-      backgroundColor: 'white',
+      backgroundColor: theme.menuBackground,
+      color: theme.menuItemText,
       // opacity: 0,
       // transition: 'transform .1s, opacity .1s',
       // transitionTimingFunction: 'ease-out'
diff --git a/packages/desktop-client/src/components/transactions/SimpleTransactionsTable.js b/packages/desktop-client/src/components/transactions/SimpleTransactionsTable.js
index d7db23f5a56..c171270bfa2 100644
--- a/packages/desktop-client/src/components/transactions/SimpleTransactionsTable.js
+++ b/packages/desktop-client/src/components/transactions/SimpleTransactionsTable.js
@@ -15,7 +15,7 @@ import { integerToCurrency } from 'loot-core/src/shared/util';
 
 import { useSelectedItems, useSelectedDispatch } from '../../hooks/useSelected';
 import ArrowsSynchronize from '../../icons/v2/ArrowsSynchronize';
-import { styles } from '../../style';
+import { theme, styles } from '../../style';
 import { Table, Row, Field, Cell, SelectCell } from '../table';
 import DisplayId from '../util/DisplayId';
 
@@ -47,7 +47,7 @@ const TransactionRow = memo(function TransactionRow({
   let dispatchSelected = useSelectedDispatch();
 
   return (
-    <Row>
+    <Row style={{ color: theme.tableText }}>
       <SelectCell
         exposed={true}
         focused={false}
diff --git a/packages/desktop-client/src/components/transactions/TransactionList.js b/packages/desktop-client/src/components/transactions/TransactionList.js
index 96c4445b012..908d6f025e4 100644
--- a/packages/desktop-client/src/components/transactions/TransactionList.js
+++ b/packages/desktop-client/src/components/transactions/TransactionList.js
@@ -11,6 +11,7 @@ import {
 } from 'loot-core/src/shared/transactions';
 import { getChangedValues, applyChanges } from 'loot-core/src/shared/util';
 
+import { theme } from '../../style';
 import { usePushModal } from '../../util/router-tools';
 
 import { TransactionTable } from './TransactionsTable';
@@ -198,7 +199,7 @@ export default function TransactionList({
       onAddSplit={onAddSplit}
       onManagePayees={onManagePayees}
       onCreatePayee={onCreatePayee}
-      style={{ backgroundColor: 'white' }}
+      style={{ backgroundColor: theme.tableBackground }}
       onNavigateToTransferAccount={onNavigateToTransferAccount}
       onNavigateToSchedule={onNavigateToSchedule}
       onSort={onSort}
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
index 7c901b5c235..12a6f45fa73 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 { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
 import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
 import CategoryAutocomplete from '../autocomplete/CategorySelect';
 import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
@@ -266,12 +266,11 @@ const TransactionHeader = memo(
 
     return (
       <Row
-        borderColor={colors.n9}
-        backgroundColor="white"
         style={{
-          color: colors.n4,
           fontWeight: 300,
           zIndex: 200,
+          color: theme.tableHeaderText,
+          backgroundColor: theme.tableBackground,
         }}
       >
         <SelectCell
@@ -418,19 +417,6 @@ function StatusCell({
   let isClearedField = status === 'cleared' || status == null;
   let statusProps = getStatusProps(status);
 
-  let props = {
-    color:
-      status === 'cleared'
-        ? colors.g5
-        : status === 'missed'
-        ? colors.r6
-        : status === 'due'
-        ? colors.y5
-        : selected
-        ? colors.b7
-        : colors.n7,
-  };
-
   function onSelect() {
     if (isClearedField) {
       onUpdate('cleared', !(status === 'cleared'));
@@ -449,11 +435,12 @@ function StatusCell({
         style={[
           {
             padding: 3,
+            backgroundColor: 'transparent',
             border: '1px solid transparent',
             borderRadius: 50,
             ':focus': {
-              border: '1px solid ' + props.color,
-              boxShadow: `0 1px 2px ${props.color}`,
+              border: '1px solid ' + theme.formInputBorderSelected,
+              boxShadow: '0 1px 2px ' + theme.formInputBorderSelected,
             },
             cursor: isClearedField ? 'pointer' : 'default',
           },
@@ -467,7 +454,7 @@ function StatusCell({
           style: {
             width: 13,
             height: 13,
-            color: props.color,
+            color: statusProps.color,
             marginTop: status === 'due' ? -1 : 0,
           },
         })}
@@ -499,7 +486,7 @@ function HeaderCell({
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-            color: colors.n4,
+            color: theme.tableHeaderText,
             fontWeight: 300,
             marginLeft: marginLeft,
             marginRight: marginRight,
@@ -550,7 +537,7 @@ function PayeeCell({
       name="payee"
       textAlign="flex"
       value={payeeId}
-      valueStyle={[valueStyle, inherited && { color: colors.n8 }]}
+      valueStyle={[valueStyle, inherited && { color: theme.tableTextInactive }]}
       exposed={focused}
       onExpose={name => !isPreview && onEdit(id, name)}
       onUpdate={async value => {
@@ -684,7 +671,6 @@ const Transaction = memo(function Transaction(props) {
   let {
     transaction: originalTransaction,
     editing,
-    backgroundColor = 'white',
     showAccount,
     showBalance,
     showCleared,
@@ -812,7 +798,6 @@ const Transaction = memo(function Transaction(props) {
   }
 
   let isChild = transaction.is_child;
-  let borderColor = selected ? colors.b8 : colors.border;
   let isBudgetTransfer = transferAcct && transferAcct.offbudget === 0;
   let isOffBudget = account && account.offbudget === 1;
 
@@ -820,48 +805,56 @@ const Transaction = memo(function Transaction(props) {
   let backgroundFocus = hovered || focusedField === 'select';
   let amountStyle = hideFraction ? { letterSpacing: -0.5 } : null;
 
+  let statusProps = getStatusProps(notes);
+
   return (
     <Row
-      borderColor={borderColor}
-      backgroundColor={
-        selected
-          ? colors.selected
-          : backgroundFocus
-          ? colors.hover
-          : isPreview
-          ? '#fcfcfc'
-          : backgroundColor
-      }
       highlighted={highlighted}
       style={[
+        {
+          backgroundColor: selected
+            ? theme.tableRowBackgroundHighlight
+            : backgroundFocus
+            ? theme.tableRowBackgroundHover
+            : theme.tableBackground,
+        },
+        highlighted || selected
+          ? { color: theme.tableRowBackgroundHighlightText }
+          : { color: theme.tableText },
         style,
-        isPreview && { color: colors.n5, fontStyle: 'italic' },
+        isPreview && {
+          color: theme.tableTextInactive,
+          fontStyle: 'italic',
+        },
         _unmatched && { opacity: 0.5 },
       ]}
       onMouseEnter={() => onHover && onHover(transaction.id)}
     >
       {isChild && (
         <Field
-          borderColor="transparent"
+          /* Checkmark blank placeholder for Child transaction */
           width={110}
           style={{
             width: 110,
-            backgroundColor: colors.n11,
-            borderBottomWidth: 0,
+            backgroundColor: theme.tableRowBackgroundHover,
+            border: 0, // known z-order issue, bottom border for parent transaction hidden
           }}
         />
       )}
+
       {isChild && showAccount && (
         <Field
-          borderColor="transparent"
+          /* Account blank placeholder for Child transaction */
           style={{
             flex: 1,
-            backgroundColor: colors.n11,
-            opacity: 0,
+            backgroundColor: theme.tableRowBackgroundHover,
+            border: 0,
           }}
         />
       )}
 
+      {/* Checkmark - for Child transaction
+      between normal Date and Payee or Account and Payee if needed */}
       {isTemporaryId(transaction.id) ? (
         isChild ? (
           <DeleteCell
@@ -874,6 +867,7 @@ const Transaction = memo(function Transaction(props) {
         )
       ) : (
         <SelectCell
+          /* Checkmark field for non-child transaction */
           exposed={hovered || selected || editing}
           focused={focusedField === 'select'}
           onSelect={e => {
@@ -884,14 +878,14 @@ const Transaction = memo(function Transaction(props) {
           style={[isChild && { borderLeftWidth: 1 }]}
           value={
             matched && (
-              <Hyperlink2 style={{ width: 13, height: 13, color: colors.n7 }} />
+              <Hyperlink2 style={{ width: 13, height: 13, color: 'inherit' }} />
             )
           }
         />
       )}
-
       {!isChild && (
         <CustomCell
+          /* Date field for non-child transaction */
           name="date"
           width={110}
           textAlign="flex"
@@ -929,6 +923,7 @@ const Transaction = memo(function Transaction(props) {
 
       {!isChild && showAccount && (
         <CustomCell
+          /* Account field for non-child transaction */
           name="account"
           width="flex"
           textAlign="flex"
@@ -975,6 +970,7 @@ const Transaction = memo(function Transaction(props) {
       )}
       {(() => (
         <PayeeCell
+          /* Payee field for all transactions */
           id={id}
           payeeId={payeeId}
           accountId={accountId}
@@ -998,6 +994,7 @@ const Transaction = memo(function Transaction(props) {
       ))()}
 
       {isPreview ? (
+        /* Notes field for all transactions */
         <Cell name="notes" width="flex" />
       ) : (
         <InputCell
@@ -1017,26 +1014,13 @@ const Transaction = memo(function Transaction(props) {
       )}
 
       {isPreview ? (
+        // Category field for preview transactions
         <Cell width="flex" style={{ alignItems: 'flex-start' }} exposed={true}>
           {() => (
             <View
               style={{
-                color:
-                  notes === 'missed'
-                    ? colors.r6
-                    : notes === 'due'
-                    ? colors.y4
-                    : selected
-                    ? colors.b5
-                    : colors.n6,
-                backgroundColor:
-                  notes === 'missed'
-                    ? colors.r10
-                    : notes === 'due'
-                    ? colors.y9
-                    : selected
-                    ? colors.b8
-                    : colors.n10,
+                color: statusProps.color,
+                backgroundColor: statusProps.backgroundColor,
                 margin: '0 5px',
                 padding: '3px 7px',
                 borderRadius: 4,
@@ -1048,6 +1032,7 @@ const Transaction = memo(function Transaction(props) {
         </Cell>
       ) : isParent ? (
         <Cell
+          /* Category field (Split button) for parent transactions */
           name="category"
           width="flex"
           focused={focusedField === 'category'}
@@ -1055,14 +1040,13 @@ const Transaction = memo(function Transaction(props) {
           plain
         >
           <CellButton
+            bare
             style={{
               alignSelf: 'flex-start',
-              color: colors.n6,
               borderRadius: 4,
-              transition: 'none',
-              '&:hover': {
-                backgroundColor: 'rgba(100, 100, 100, .15)',
-                color: colors.n5,
+              border: '1px solid transparent', // so it doesn't shift on hover
+              ':hover': {
+                border: '1px solid ' + theme.buttonNormalBorder,
               },
             }}
             disabled={isTemporaryId(transaction.id)}
@@ -1082,6 +1066,7 @@ const Transaction = memo(function Transaction(props) {
               {isParent && (
                 <CheveronDown
                   style={{
+                    color: 'inherit',
                     width: 14,
                     height: 14,
                     transition: 'transform .08s',
@@ -1097,6 +1082,8 @@ const Transaction = memo(function Transaction(props) {
         </Cell>
       ) : isBudgetTransfer || isOffBudget || isPreview ? (
         <InputCell
+          /* Category field for transfer and off-budget transactions
+     (NOT preview, it is covered first) */
           name="category"
           width="flex"
           exposed={focusedField === 'category'}
@@ -1112,11 +1099,7 @@ const Transaction = memo(function Transaction(props) {
               : ''
           }
           valueStyle={valueStyle}
-          style={{
-            fontStyle: 'italic',
-            color: '#c0c0c0',
-            fontWeight: 300,
-          }}
+          style={{ fontStyle: 'italic', fontWeight: 300 }}
           inputProps={{
             readOnly: true,
             style: { fontStyle: 'italic' },
@@ -1124,6 +1107,7 @@ const Transaction = memo(function Transaction(props) {
         />
       ) : (
         <CustomCell
+          /* Category field for normal and child transactions */
           name="category"
           width="flex"
           textAlign="flex"
@@ -1143,9 +1127,10 @@ const Transaction = memo(function Transaction(props) {
           valueStyle={
             !categoryId
               ? {
+                  // uncategorized transaction
                   fontStyle: 'italic',
                   fontWeight: 300,
-                  color: colors.p8,
+                  color: theme.formInputTextHighlight,
                 }
               : valueStyle
           }
@@ -1182,6 +1167,7 @@ const Transaction = memo(function Transaction(props) {
       )}
 
       <InputCell
+        /* Debit field for all transactions */
         type="input"
         width={90}
         name="debit"
@@ -1203,6 +1189,7 @@ const Transaction = memo(function Transaction(props) {
       />
 
       <InputCell
+        /* Credit field for all transactions */
         type="input"
         width={85}
         name="credit"
@@ -1225,9 +1212,12 @@ const Transaction = memo(function Transaction(props) {
 
       {showBalance && (
         <Cell
+          /* Balance field for all transactions */
           name="balance"
           value={balance == null || isChild ? '' : integerToCurrency(balance)}
-          valueStyle={{ color: balance < 0 ? colors.r4 : colors.g4 }}
+          valueStyle={{
+            color: balance < 0 ? theme.errorText : theme.noticeText,
+          }}
           style={[styles.tnum, amountStyle]}
           width={88}
           textAlign="right"
@@ -1237,6 +1227,7 @@ const Transaction = memo(function Transaction(props) {
 
       {showCleared && (
         <StatusCell
+          /* Icon field for all transactions */
           id={id}
           focused={focusedField === 'cleared'}
           selected={selected}
@@ -1352,9 +1343,9 @@ function NewTransaction({
   return (
     <View
       style={{
-        borderBottom: '1px solid #ebebeb',
+        borderBottom: '1px solid ' + theme.tableBorderHover,
         paddingBottom: 6,
-        backgroundColor: 'white',
+        backgroundColor: theme.tableBackground,
       }}
       data-testid="new-transaction"
       onKeyDown={e => {
@@ -1569,7 +1560,13 @@ function TransactionTableInner({
   return (
     <View
       innerRef={containerRef}
-      style={[{ flex: 1, cursor: 'default' }, props.style]}
+      style={[
+        {
+          flex: 1,
+          cursor: 'default',
+        },
+        props.style,
+      ]}
     >
       <View>
         <TransactionHeader
@@ -1650,7 +1647,7 @@ function TransactionTableInner({
               left: 0,
               right: 0,
               height: 20,
-              backgroundColor: 'red',
+              backgroundColor: theme.errorText,
               boxShadow: '0 0 6px rgba(0, 0, 0, .20)',
             }}
           />
diff --git a/packages/desktop-client/src/style/styles.ts b/packages/desktop-client/src/style/styles.ts
index 3355656908a..0aa951ef22b 100644
--- a/packages/desktop-client/src/style/styles.ts
+++ b/packages/desktop-client/src/style/styles.ts
@@ -1,12 +1,23 @@
+import type { CSSProperties } from 'glamor';
 import { keyframes } from 'glamor';
 
 import * as Platform from 'loot-core/src/client/platform';
 
 import tokens from '../tokens';
 
-import * as colors from './colors';
-
 export const styles = {
+  incomeHeaderHeight: 70,
+  cardShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+  monthRightPadding: 5,
+  menuBorderRadius: 4,
+  altMenuMaxHeight: 250,
+  altMenuText: {
+    fontSize: 13,
+  },
+  altMenuHeaderText: {
+    fontSize: 13,
+    fontWeight: 700,
+  },
   veryLargeText: {
     fontSize: 30,
     fontWeight: 600,
@@ -22,9 +33,6 @@ export const styles = {
   },
   smallText: {
     fontSize: 13,
-    [`@media (min-width: ${tokens.breakpoint_small})`]: {
-      // lineHeight: 21 // TODO: This seems like trouble, but what's the right value?
-    },
   },
   verySmallText: {
     fontSize: 13,
@@ -39,16 +47,6 @@ export const styles = {
       paddingTop: 36,
     },
   },
-  pageHeader: {
-    fontSize: 25,
-    borderBottomWidth: 5,
-    borderStyle: 'solid',
-    display: 'inline',
-    flex: 0,
-    marginTop: 40,
-    marginBottom: 20,
-    paddingBottom: 5,
-  },
   pageContent: {
     paddingLeft: 2,
     paddingRight: 2,
@@ -78,26 +76,11 @@ export const styles = {
     fontFeatureSettings: '"tnum"',
   },
   notFixed: { fontFeatureSettings: '' },
-  header: {
-    headerStyle: {
-      backgroundColor: 'white',
-      borderBottomWidth: 1,
-      borderBottomColor: colors.n9,
-      elevation: 0,
-    },
-    headerTintColor: colors.n1,
-    headerTitleStyle: {
-      color: colors.n1,
-      fontSize: 15,
-      fontWeight: 600,
-    },
-    headerBackTitle: null,
-  },
   text: {
     fontSize: 16,
     // lineHeight: 22.4 // TODO: This seems like trouble, but what's the right value?
   },
-  textColor: colors.n1,
+
   delayedFadeIn: {
     animationName: keyframes({
       '0%': { opacity: 0 },
@@ -108,13 +91,17 @@ export const styles = {
     animationDelay: '0.5s',
   },
   // Dynamically set
-  lightScrollbar: undefined,
-  darkScrollbar: undefined,
-  scrollbarWidth: undefined,
+  lightScrollbar: null as CSSProperties | null,
+  darkScrollbar: null as CSSProperties | null,
+  scrollbarWidth: null as number | null,
 };
 
 let hiddenScrollbars = false;
 
+// need both styles defined for primary and secondary colors
+// e.g. transaction table and sidebar
+// lightScrollbar => primary
+// darkScrollbar => secondary
 function onScrollbarChange() {
   styles.lightScrollbar = !hiddenScrollbars && {
     '& ::-webkit-scrollbar': {
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 9f26952e550..426b63f0ccc 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -8,8 +8,9 @@ export const pageBackgroundLineTop = colorPalette.purple400;
 export const pageBackgroundLineMid = colorPalette.navy900;
 export const pageBackgroundLineBottom = colorPalette.navy150;
 export const pageText = colorPalette.navy150;
+export const pageTextLight = pageText;
 export const pageTextSubdued = colorPalette.navy500;
-export const pageTextPositive = colorPalette.purple400;
+export const pageTextPositive = colorPalette.purple200;
 export const pageTextLink = colorPalette.purple400;
 export const modalBackground = colorPalette.gray800;
 export const modalBorder = colorPalette.navy600;
@@ -52,9 +53,10 @@ export const menuItemBackgroundHover = colorPalette.navy500;
 export const menuItemText = colorPalette.navy100;
 export const menuItemTextHover = colorPalette.navy50;
 export const menuItemTextSelected = colorPalette.navy200;
-export const menuItemTextHeader = colorPalette.purple400;
+export const menuItemTextHeader = colorPalette.purple300;
 export const menuBorder = colorPalette.navy800;
 export const menuBorderHover = colorPalette.purple400;
+export const menuKeybindingText = colorPalette.navy500;
 export const altMenuBackground = colorPalette.navy700;
 export const altMenuItemBackground = colorPalette.navy700;
 export const altMenuItemBackgroundHover = colorPalette.navy600;
@@ -99,6 +101,10 @@ export const buttonNormalBackgroundHover = colorPalette.navy600;
 export const buttonNormalBorder = colorPalette.navy300;
 export const buttonNormalShadow = 'rgba(0, 0, 0, 0.4)';
 
+export const altbuttonMenuBackground = buttonNormalBackground;
+export const buttonNormalSelectedText = colorPalette.white;
+export const buttonNormalSelectedBackground = colorPalette.purple600;
+
 export const buttonNormalDisabledText = colorPalette.navy500;
 export const buttonNormalDisabledBackground = colorPalette.navy800;
 export const buttonNormalDisabledBorder = colorPalette.navy500;
@@ -134,8 +140,10 @@ export const formInputTextPlaceholderSelected = colorPalette.navy100;
 export const formInputTextSelection = colorPalette.navy800;
 export const formInputShadowSelected = colorPalette.purple200;
 export const formInputTextHighlight = colorPalette.purple400;
+
 export const pillBackground = colorPalette.navy600;
 export const pillText = colorPalette.navy200;
+export const pillTextHighlighted = colorPalette.purple500;
 export const pillBorder = colorPalette.navy700;
 export const pillBackgroundSelected = colorPalette.purple600;
 export const pillTextSelected = colorPalette.navy150;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index 9752e6591fc..ae839db164a 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -8,8 +8,10 @@ export const pageBackgroundLineTop = colorPalette.white;
 export const pageBackgroundLineMid = colorPalette.navy100;
 export const pageBackgroundLineBottom = colorPalette.blue150;
 export const pageText = '#272630';
+export const pageTextLight = colorPalette.navy600;
 export const pageTextSubdued = colorPalette.navy300;
-export const pageTextPositive = colorPalette.purple500;
+export const altpageTextSubdued = colorPalette.navy500;
+export const pageTextPositive = colorPalette.purple600;
 export const pageTextLink = colorPalette.blue600;
 export const modalBackground = colorPalette.white;
 export const modalBorder = colorPalette.white;
@@ -17,20 +19,21 @@ export const cardBackground = colorPalette.white;
 export const cardBorder = colorPalette.purple500;
 export const cardShadow = colorPalette.navy700;
 export const tableBackground = colorPalette.white;
-export const tableRowBackgroundHover = colorPalette.blue100;
+export const tableRowBackgroundHover = colorPalette.navy50;
 export const tableText = colorPalette.navy700;
+export const altTableText = colorPalette.navy400;
 export const tableTextSelected = colorPalette.navy700;
 export const tableTextHover = colorPalette.navy900;
 export const tableTextEditing = colorPalette.navy50;
-export const tableTextEditingBackground = colorPalette.purple500;
-export const tableTextInactive = colorPalette.navy300;
-export const tableHeaderText = colorPalette.navy500;
+export const tableTextEditingBackground = colorPalette.blue500;
+export const tableTextInactive = colorPalette.navy200;
+export const tableHeaderText = colorPalette.navy600;
 export const tableHeaderBackground = colorPalette.navy50;
-export const tableBorder = colorPalette.navy150;
+export const tableBorder = colorPalette.navy100;
 export const tableBorderSelected = colorPalette.purple500;
 export const tableBorderHover = colorPalette.purple400;
 export const tableBorderSeparator = colorPalette.navy400;
-export const tableRowBackgroundHighlight = colorPalette.purple100;
+export const tableRowBackgroundHighlight = colorPalette.blue150;
 export const tableRowBackgroundHighlightText = colorPalette.navy700;
 export const tableRowHeaderBackground = colorPalette.navy50;
 export const tableRowHeaderText = colorPalette.navy800;
@@ -46,22 +49,23 @@ export const sidebarItemTextSelected = colorPalette.purple300;
 export const sidebarItemTextHover = colorPalette.navy50;
 export const tooltipBackground = colorPalette.navy50;
 export const tooltipBorder = colorPalette.navy50;
-export const menuBackground = colorPalette.navy50;
+export const menuBackground = colorPalette.white;
 export const menuItemBackground = colorPalette.navy50;
-export const menuItemBackgroundHover = colorPalette.navy150;
-export const menuItemText = colorPalette.navy800;
-export const menuItemTextHover = colorPalette.navy800;
-export const menuItemTextSelected = colorPalette.navy800;
+export const menuItemBackgroundHover = colorPalette.navy100;
+export const menuItemText = colorPalette.navy900;
+export const menuItemTextHover = menuItemText;
+export const menuItemTextSelected = menuItemText;
 export const menuItemTextHeader = colorPalette.purple600;
 export const menuBorder = colorPalette.navy100;
 export const menuBorderHover = colorPalette.purple100;
+export const menuKeybindingText = colorPalette.navy400;
 export const altMenuBackground = colorPalette.blue800;
 export const altMenuItemBackground = colorPalette.blue800;
 export const altMenuItemBackgroundHover = colorPalette.blue700;
 export const altMenuItemText = colorPalette.navy100;
 export const altMenuItemTextHover = colorPalette.navy50;
 export const altMenuItemTextSelected = colorPalette.purple300;
-export const altMenuItemTextHeader = colorPalette.purple300;
+export const altMenuItemTextHeader = colorPalette.navy400;
 export const altMenuBorder = colorPalette.blue700;
 export const altMenuBorderHover = colorPalette.purple300;
 export const mobileNavBackground = colorPalette.white;
@@ -99,7 +103,11 @@ export const buttonNormalBackgroundHover = buttonNormalBackground;
 export const buttonNormalBorder = colorPalette.navy150;
 export const buttonNormalShadow = 'rgba(0, 0, 0, 0.2)';
 
-export const buttonNormalDisabledText = colorPalette.navy400;
+export const altbuttonMenuBackground = colorPalette.navy100;
+export const buttonNormalSelectedText = colorPalette.white;
+export const buttonNormalSelectedBackground = colorPalette.blue600;
+
+export const buttonNormalDisabledText = colorPalette.navy300;
 export const buttonNormalDisabledBackground = buttonNormalBackground;
 export const buttonNormalDisabledBorder = buttonNormalBorder;
 
@@ -112,7 +120,7 @@ export const buttonBareDisabledText = buttonNormalDisabledText;
 export const buttonBareDisabledBackground = buttonBareBackground;
 
 export const noticeBackground = colorPalette.green50;
-export const noticeText = colorPalette.green500;
+export const noticeText = colorPalette.green600;
 export const noticeAccent = colorPalette.green200;
 export const warningBackground = colorPalette.orange200;
 export const warningText = colorPalette.orange800;
@@ -121,22 +129,29 @@ export const errorBackground = colorPalette.red50;
 export const errorText = colorPalette.red500;
 export const errorAccent = colorPalette.red200;
 export const formLabelText = colorPalette.blue500;
+export const altFormLabelText = colorPalette.blue700;
 export const formInputBackground = colorPalette.navy50;
 export const formInputBackgroundSelected = colorPalette.white;
 export const formInputBackgroundSelection = colorPalette.purple500;
-export const formInputBorder = colorPalette.navy300;
+export const formInputBorder = colorPalette.navy150;
 export const formInputTextReadOnlySelection = colorPalette.navy50;
 export const formInputBorderSelected = colorPalette.purple500;
-export const formInputText = colorPalette.navy700;
+export const altformInputBorderSelected = colorPalette.blue500;
+export const formInputText = colorPalette.navy900;
 export const formInputTextSelected = colorPalette.navy50;
 export const formInputTextPlaceholder = colorPalette.navy300;
 export const formInputTextPlaceholderSelected = colorPalette.navy200;
 export const formInputTextSelection = colorPalette.navy100;
 export const formInputShadowSelected = colorPalette.purple300;
-export const formInputTextHighlight = colorPalette.purple500;
+export const altformInputShadowSelected = colorPalette.blue300;
+export const formInputTextHighlight = colorPalette.purple200;
+
 export const pillBackground = colorPalette.navy150;
 export const pillText = colorPalette.navy800;
+export const pillTextHighlighted = colorPalette.purple600;
 export const pillBorder = colorPalette.navy150;
-export const pillBackgroundSelected = colorPalette.purple150;
-export const pillTextSelected = colorPalette.navy700;
+export const pillBackgroundSelected = colorPalette.blue150;
+export const pillTextSelected = colorPalette.blue900;
 export const pillBorderSelected = colorPalette.purple500;
+export const altPillBackground = colorPalette.navy100;
+export const altPillText = colorPalette.navy900;
diff --git a/upcoming-release-notes/1436.md b/upcoming-release-notes/1436.md
new file mode 100644
index 00000000000..8220b328fb4
--- /dev/null
+++ b/upcoming-release-notes/1436.md
@@ -0,0 +1,5 @@
+---
+category: Enhancements
+authors: [biohzrddd, carkom]
+---
+Phase one of dark theme, to include filters/rules/transaction tables
\ No newline at end of file