Dark Theme Reports/Settings (#1512)

.eslintrc.js

@@ -240,35 +240,15 @@ module.exports = {
         './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.*',
-        './packages/desktop-client/src/components/common/Card.*',
-        './packages/desktop-client/src/components/common/Label.*',
-        './packages/desktop-client/src/components/common/View.*',
         './packages/desktop-client/src/components/common/ExternalLink.*',
         './packages/desktop-client/src/components/modals/BudgetSummary.*',
         './packages/desktop-client/src/components/payees/index.*',
-        './packages/desktop-client/src/components/reports/CashFlow.*',
-        './packages/desktop-client/src/components/reports/Change.*',
-        './packages/desktop-client/src/components/reports/DateRange.*',
-        './packages/desktop-client/src/components/reports/Header.*',
-        './packages/desktop-client/src/components/reports/NetWorth.*',
-        './packages/desktop-client/src/components/reports/Overview.*',
-        './packages/desktop-client/src/components/reports/Tooltip.*',
-        './packages/desktop-client/src/components/reports/chart-theme.*',
-        './packages/desktop-client/src/components/reports/graphs/CashFlowGraph.*',
-        './packages/desktop-client/src/components/reports/graphs/NetWorthGraph.*',
-        './packages/desktop-client/src/components/settings/Encryption.*',
-        './packages/desktop-client/src/components/settings/Experimental.*',
-        './packages/desktop-client/src/components/settings/FixSplits.*',
-        './packages/desktop-client/src/components/settings/Format.*',
-        './packages/desktop-client/src/components/settings/Global.*',
-        './packages/desktop-client/src/components/settings/UI.*',
-        './packages/desktop-client/src/components/settings/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/components/budget/report/BudgetSummary.tsx

@@ -15,7 +15,7 @@ import useFeatureFlag from '../../../hooks/useFeatureFlag';
 import DotsHorizontalTriple from '../../../icons/v1/DotsHorizontalTriple';
 import ArrowButtonDown1 from '../../../icons/v2/ArrowButtonDown1';
 import ArrowButtonUp1 from '../../../icons/v2/ArrowButtonUp1';
-import { colors, type CSSProperties, styles } from '../../../style';
+import { theme, type CSSProperties, styles } from '../../../style';
 import AlignedText from '../../common/AlignedText';
 import Button from '../../common/Button';
 import HoverTarget from '../../common/HoverTarget';
@@ -30,7 +30,6 @@ import NamespaceContext from '../../spreadsheet/NamespaceContext';
 import useFormat from '../../spreadsheet/useFormat';
 import useSheetValue from '../../spreadsheet/useSheetValue';
 import { Tooltip } from '../../tooltips';
-import { MONTH_BOX_SHADOW } from '../constants';
 import { makeAmountFullStyle } from '../util';
 
 import { useReport } from './ReportContext';
@@ -100,8 +99,8 @@ function IncomeProgress({ current, target }: IncomeProgressProps) {
   return (
     <PieProgress
       progress={frac}
-      color={over ? colors.r7 : colors.g5}
-      backgroundColor={over ? colors.r10 : colors.n10}
+      color={over ? theme.errorText : theme.noticeText}
+      backgroundColor={over ? theme.errorBackground : theme.pageBackground}
       style={{ width: 20, height: 20 }}
     />
   );
@@ -133,8 +132,8 @@ function ExpenseProgress({ current, target }: ExpenseProgressProps) {
   return (
     <PieProgress
       progress={frac}
-      color={over ? colors.r7 : colors.g5}
-      backgroundColor={over ? colors.r10 : colors.n10}
+      color={over ? theme.errorText : theme.noticeText}
+      backgroundColor={over ? theme.errorBackground : theme.pageBackground}
       style={{ width: 20, height: 20 }}
     />
   );
@@ -168,12 +167,12 @@ function BudgetTotal({
 
       <View style={{ marginLeft: 10 }}>
         <View>
-          <Text style={{ color: colors.n4 }}>{title}</Text>
+          <Text style={{ color: theme.pageTextLight }}>{title}</Text>
         </View>
 
         <Text>
           <CellValue binding={current} type="financial" />
-          <Text style={{ color: colors.n6, fontStyle: 'italic' }}>
+          <Text style={{ color: theme.pageTextSubdued, fontStyle: 'italic' }}>
             {' of '}
             <CellValue
               binding={target}
@@ -231,9 +230,9 @@ function Saved({ projected, style }: SavedProps) {
   return (
     <View style={{ alignItems: 'center', fontSize: 14, ...style }}>
       {projected ? (
-        <Text style={{ color: colors.n4 }}>Projected Savings:</Text>
+        <Text style={{ color: theme.pageTextLight }}>Projected Savings:</Text>
       ) : (
-        <View style={{ color: colors.n4 }}>
+        <View style={{ color: theme.pageTextLight }}>
           {isNegative ? 'Overspent:' : 'Saved:'}
         </View>
       )}
@@ -280,7 +279,11 @@ function Saved({ projected, style }: SavedProps) {
           className={`${css([
             {
               fontSize: 25,
-              color: projected ? colors.y3 : isNegative ? colors.r4 : colors.p5,
+              color: projected
+                ? theme.alt2WarningText
+                : isNegative
+                ? theme.alt2ErrorText
+                : theme.altUpcomingText,
             },
           ])}`}
         >
@@ -320,8 +323,8 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
   return (
     <View
       style={{
-        backgroundColor: 'white',
-        boxShadow: MONTH_BOX_SHADOW,
+        backgroundColor: theme.tableBackground,
+        boxShadow: styles.cardShadow,
         borderRadius: 6,
         marginLeft: 0,
         marginRight: 0,
@@ -362,7 +365,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
                 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.pageTextSubdued, margin: 1 }}
               />
             </Button>
           </View>
@@ -397,7 +400,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
                 width={15}
                 height={15}
                 tooltipPosition="bottom-right"
-                defaultColor={colors.n6}
+                defaultColor={theme.pageTextSubdued} // notes page color
               />
             </View>
             <View style={{ userSelect: 'none' }}>
@@ -405,7 +408,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
                 <DotsHorizontalTriple
                   width={15}
                   height={15}
-                  style={{ color: colors.n5 }}
+                  style={{ color: theme.altpageTextSubdued }}
                 />
               </Button>
               {menuOpen && (
@@ -452,7 +455,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
             spacing={2}
             style={{
               alignSelf: 'center',
-              backgroundColor: colors.n11,
+              backgroundColor: theme.tableRowHeaderBackground,
               borderRadius: 4,
               padding: '10px 15px',
               marginTop: 13,
@@ -469,8 +472,8 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
               alignItems: 'center',
               padding: '10px 20px',
               justifyContent: 'space-between',
-              backgroundColor: colors.n11,
-              borderTop: '1px solid ' + colors.n10,
+              backgroundColor: theme.tableRowHeaderBackground,
+              borderTop: '1px solid ' + theme.tableRowHeaderText,
             }}
           >
             <Saved projected={month >= currentMonth} />

packages/desktop-client/src/components/budget/report/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 Button from '../../common/Button';
 import Menu from '../../common/Menu';
 import Text from '../../common/Text';
@@ -17,7 +17,6 @@ import useSheetValue from '../../spreadsheet/useSheetValue';
 import { Field, SheetCell } from '../../table';
 import { Tooltip, useTooltip } from '../../tooltips';
 import BalanceWithCarryover from '../BalanceWithCarryover';
-import { MONTH_RIGHT_PADDING } from '../constants';
 import { makeAmountGrey } from '../util';
 
 export { BudgetSummary } from './BudgetSummary';
@@ -27,7 +26,6 @@ let headerLabelStyle: CSSProperties = {
   padding: '0 5px',
   textAlign: 'right',
 };
-
 export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
   const format = useFormat();
   return (
@@ -35,36 +33,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.pageTextLight }}>Budgeted</Text>
         <CellValue
           binding={reportBudget.totalBudgetedExpense}
           type="financial"
-          style={{ color: colors.n4, fontWeight: 600 }}
+          style={{ color: theme.pageTextLight, 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.pageTextLight }}>Spent</Text>
         <CellValue
           binding={reportBudget.totalSpent}
           type="financial"
-          style={{ color: colors.n4, fontWeight: 600 }}
+          style={{ color: theme.pageTextLight, fontWeight: 600 }}
         />
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Balance</Text>
+        <Text style={{ color: theme.pageTextLight }}>Balance</Text>
         <CellValue
           binding={reportBudget.totalLeftover}
           type="financial"
-          style={{ color: colors.n4, fontWeight: 600 }}
+          style={{ color: theme.pageTextLight, fontWeight: 600 }}
         />
       </View>
     </View>
@@ -76,15 +74,15 @@ export function IncomeHeaderMonth() {
     <View
       style={{
         flexDirection: 'row',
-        marginRight: MONTH_RIGHT_PADDING,
+        marginRight: styles.monthRightPadding,
         paddingBottom: 5,
       }}
     >
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Budgeted</Text>
+        <Text style={{ color: theme.pageTextLight }}>Budgeted</Text>
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: colors.n4 }}>Received</Text>
+        <Text style={{ color: theme.pageTextLight }}>Received</Text>
       </View>
     </View>
   );
@@ -125,7 +123,7 @@ export const GroupMonth = memo(function GroupMonth({ group }: GroupMonthProps) {
           textAlign="right"
           style={{
             fontWeight: 600,
-            paddingRight: MONTH_RIGHT_PADDING,
+            paddingRight: styles.monthRightPadding,
             ...styles.tnum,
           }}
           valueProps={{
@@ -133,7 +131,7 @@ export const GroupMonth = memo(function GroupMonth({ group }: GroupMonthProps) {
             type: 'financial',
             privacyFilter: {
               style: {
-                paddingRight: MONTH_RIGHT_PADDING,
+                paddingRight: styles.monthRightPadding,
               },
             },
           }}
@@ -309,8 +307,8 @@ export const CategoryMonth = memo(function CategoryMonth({
             padding: '0 4px',
             borderRadius: 4,
             ':hover': {
-              boxShadow: 'inset 0 0 0 1px ' + colors.n7,
-              backgroundColor: 'white',
+              boxShadow: 'inset 0 0 0 1px ' + theme.mobileAccountShadow,
+              backgroundColor: theme.tableBackground,
             },
           }}
           valueProps={{
@@ -363,7 +361,7 @@ export const CategoryMonth = memo(function CategoryMonth({
         <Field
           name="balance"
           width="flex"
-          style={{ paddingRight: MONTH_RIGHT_PADDING, textAlign: 'right' }}
+          style={{ paddingRight: styles.monthRightPadding, textAlign: 'right' }}
         >
           <span {...(category.is_income ? {} : balanceTooltip.getOpenEvents())}>
             <BalanceWithCarryover

packages/desktop-client/src/components/common/Card.tsx

 import { type ComponentProps, forwardRef } from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 
 import View from './View';
 
@@ -17,8 +17,8 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
           marginLeft: 5,
           marginRight: 5,
           borderRadius: 6,
-          backgroundColor: 'white',
-          borderColor: colors.p3,
+          backgroundColor: theme.cardBackground,
+          borderColor: theme.cardBorder,
           boxShadow: '0 1px 2px #9594A8',
           ...props.style,
         }}

packages/desktop-client/src/components/common/Label.tsx

 import { type ReactNode } from 'react';
 
-import { type CSSProperties, colors, styles } from '../../style';
+import { type CSSProperties, theme, styles } from '../../style';
 
 import Text from './Text';
 
@@ -14,7 +14,7 @@ export default function Label({ title, style }: LabelProps) {
     <Text
       style={{
         ...styles.text,
-        color: colors.n2,
+        color: theme.tableRowHeaderText,
         textAlign: 'right',
         fontSize: 12,
         marginBottom: 2,

packages/desktop-client/src/components/reports/CashFlow.js

@@ -7,7 +7,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
 import useFilters from '../../hooks/useFilters';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
 import AlignedText from '../common/AlignedText';
 import Block from '../common/Block';
 import Paragraph from '../common/Paragraph';
@@ -113,7 +113,7 @@ function CashFlow() {
 
       <View
         style={{
-          backgroundColor: 'white',
+          backgroundColor: theme.tableBackground,
           padding: 30,
           paddingTop: 0,
           overflow: 'auto',
@@ -125,7 +125,7 @@ function CashFlow() {
             paddingRight: 20,
             flexShrink: 0,
             alignItems: 'flex-end',
-            color: colors.n3,
+            color: theme.pageText,
           }}
         >
           <AlignedText

packages/desktop-client/src/components/reports/Change.js

@@ -2,13 +2,16 @@ import React from 'react';
 
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
 import Block from '../common/Block';
 
 function Change({ amount }) {
   return (
     <Block
-      style={{ ...styles.smallText, color: amount < 0 ? colors.r5 : colors.g5 }}
+      style={{
+        ...styles.smallText,
+        color: amount < 0 ? theme.errorText : theme.noticeText,
+      }}
     >
       {amount >= 0 ? '+' : ''}
       {integerToCurrency(amount)}

packages/desktop-client/src/components/reports/DateRange.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import * as d from 'date-fns';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Block from '../common/Block';
 
 function DateRange({ start, end }) {
@@ -26,7 +26,7 @@ function DateRange({ start, end }) {
     content = d.format(end, 'MMMM yyyy');
   }
 
-  return <Block style={{ color: colors.n6 }}>{content}</Block>;
+  return <Block style={{ color: theme.pageTextSubdued }}>{content}</Block>;
 }
 
 export default DateRange;

packages/desktop-client/src/components/reports/Header.js

@@ -97,7 +97,6 @@ function Header({
           }}
         >
           <Select
-            style={{ backgroundColor: 'white' }}
             onChange={newValue =>
               onChangeDates(...validateStart(allMonths, newValue, end))
             }
@@ -107,7 +106,6 @@ function Header({
           />
           <View>to</View>
           <Select
-            style={{ backgroundColor: 'white' }}
             onChange={newValue =>
               onChangeDates(...validateEnd(allMonths, start, newValue))
             }

packages/desktop-client/src/components/reports/NetWorth.js

@@ -8,7 +8,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
 import useFilters from '../../hooks/useFilters';
-import { styles } from '../../style';
+import { theme, styles } from '../../style';
 import Paragraph from '../common/Paragraph';
 import View from '../common/View';
 import PrivacyFilter from '../PrivacyFilter';
@@ -101,7 +101,7 @@ export default function NetWorth() {
 
       <View
         style={{
-          backgroundColor: 'white',
+          backgroundColor: theme.tableBackground,
           padding: 30,
           paddingTop: 0,
           overflow: 'auto',

packages/desktop-client/src/components/reports/Overview.js

@@ -9,14 +9,14 @@ import { integerToCurrency } from 'loot-core/src/shared/util';
 import useCategories from '../../hooks/useCategories';
 import useFeatureFlag from '../../hooks/useFeatureFlag';
 import AnimatedLoading from '../../icons/AnimatedLoading';
-import { colors, styles } from '../../style';
+import { theme, styles } from '../../style';
 import AnchorLink from '../common/AnchorLink';
 import Block from '../common/Block';
 import View from '../common/View';
 import PrivacyFilter from '../PrivacyFilter';
 
 import Change from './Change';
-import theme from './chart-theme';
+import { chartTheme } from './chart-theme';
 import Container from './Container';
 import DateRange from './DateRange';
 import { simpleCashFlow } from './graphs/cash-flow-spreadsheet';
@@ -33,7 +33,7 @@ function Card({ flex, to, style, children }) {
   const content = (
     <View
       style={{
-        backgroundColor: 'white',
+        backgroundColor: theme.tableBackground,
         borderRadius: 2,
         height: 200,
         boxShadow: '0 2px 6px rgba(0, 0, 0, .15)',
@@ -122,7 +122,7 @@ function NetWorthCard({ accounts }) {
               <PrivacyFilter activationFilters={[!isCardHovered]}>
                 <Change
                   amount={data.totalChange}
-                  style={{ color: colors.n6, fontWeight: 300 }}
+                  style={{ color: theme.altTableText, fontWeight: 300 }}
                 />
               </PrivacyFilter>
             </View>
@@ -181,7 +181,7 @@ function CashFlowCard() {
               <PrivacyFilter activationFilters={[!isCardHovered]}>
                 <Change
                   amount={income - expense}
-                  style={{ color: colors.n6, fontWeight: 300 }}
+                  style={{ color: theme.altTableText, fontWeight: 300 }}
                 />
               </PrivacyFilter>
             </View>
@@ -192,10 +192,10 @@ function CashFlowCard() {
           <Container style={{ height: 'auto', flex: 1 }}>
             {(width, height, portalHost) => (
               <VictoryGroup
-                colorScale={[theme.colors.blue, theme.colors.red]}
+                colorScale={[chartTheme.colors.blue, chartTheme.colors.red]}
                 width={100}
                 height={height}
-                theme={theme}
+                theme={chartTheme}
                 domain={{
                   x: [0, 100],
                   y: [0, Math.max(income, expense, 100)],
@@ -260,7 +260,6 @@ function CashFlowCard() {
                         </View>
                       ),
                       labelPosition: 'right',
-                      fill: theme.colors.red,
                     },
                   ]}
                   labels={d => d.premadeLabel}

packages/desktop-client/src/components/reports/Tooltip.js

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import { css, before } from 'glamor';
 import { VictoryTooltip } from 'victory';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 
 class Tooltip extends Component {
   static defaultEvents = VictoryTooltip.defaultEvents;
@@ -57,8 +57,8 @@ class Tooltip extends Component {
             borderRadius: 2,
             boxShadow: light ? 'none' : '0 1px 6px rgba(0, 0, 0, .20)',
             // TODO: Transparent background
-            backgroundColor: light ? 'transparent' : colors.n1,
-            color: light ? 'inherit' : 'white',
+            backgroundColor: light ? 'transparent' : theme.alt2MenuBackground,
+            color: light ? 'inherit' : theme.alt2MenuItemText,
             padding: 10,
           },
           !light &&
@@ -68,7 +68,7 @@ class Tooltip extends Component {
               borderTop: '7px solid transparent',
               borderBottom: '7px solid transparent',
               [position === 'right' ? 'borderRight' : 'borderLeft']:
-                '7px solid ' + colors.n1,
+                '7px solid ' + theme.alt2MenuBackground,
               [position === 'right' ? 'left' : 'right']: -6,
               top: 'calc(50% - 7px)',
               // eslint-disable-next-line rulesdir/typography

packages/desktop-client/src/components/reports/chart-theme.js

-import { colors } from '../../style';
+import { theme } from '../../style';
 
 let colorFades = {
   blueFadeStart: 'rgba(229, 245, 255, 1)',
@@ -18,7 +18,7 @@ const baseLabelStyles = {
   fontFamily: sansSerif,
   fontSize,
   letterSpacing,
-  fill: colors.n1,
+  fill: theme.reportsLabel,
   stroke: 'transparent',
 };
 
@@ -41,17 +41,17 @@ const axisBaseStyles = {
   tickLabels: baseLabelStyles,
 };
 
-const theme = {
+export const chartTheme = {
   colors: {
     ...colorFades,
-    red: colors.r7,
-    blue: colors.b6,
+    red: theme.reportsRed,
+    blue: theme.reportsBlue,
   },
   area: {
     style: {
       labels: baseLabelStyles,
       data: {
-        stroke: colors.b6,
+        stroke: theme.reportsBlue,
         strokeWidth: 2,
         strokeLinejoin: 'round',
         strokeLinecap: 'round',
@@ -82,7 +82,7 @@ const theme = {
   bar: {
     style: {
       labels: baseLabelStyles,
-      data: { fill: colors.b6, stroke: 'none' },
+      data: { fill: theme.reportsBlue, stroke: 'none' },
     },
   },
   line: {
@@ -90,7 +90,7 @@ const theme = {
       labels: baseLabelStyles,
       data: {
         fill: 'none',
-        stroke: colors.b6,
+        stroke: theme.reportsBlue,
         strokeWidth: 2,
         strokeLinejoin: 'round',
         strokeLinecap: 'round',
@@ -111,4 +111,3 @@ const theme = {
     },
   },
 };
-export default theme;

packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx

@@ -10,8 +10,8 @@ import {
   VictoryGroup,
 } from 'victory';
 
-import { colors } from '../../../style';
-import theme from '../chart-theme';
+import { theme } from '../../../style';
+import { chartTheme } from '../chart-theme';
 import Container from '../Container';
 import Tooltip from '../Tooltip';
 
@@ -26,7 +26,7 @@ function CashFlowGraph({ graphData, isConcise }: CashFlowGraphProps) {
         graphData && (
           <VictoryChart
             scale={{ x: 'time', y: 'linear' }}
-            theme={theme}
+            theme={chartTheme}
             domainPadding={10}
             width={width}
             height={height}
@@ -35,10 +35,7 @@ function CashFlowGraph({ graphData, isConcise }: CashFlowGraphProps) {
             }
           >
             <VictoryGroup>
-              <VictoryBar
-                data={graphData.expenses}
-                style={{ data: { fill: theme.colors.red } }}
-              />
+              <VictoryBar data={graphData.expenses} />
               <VictoryBar data={graphData.income} />
             </VictoryGroup>
             <VictoryLine
@@ -46,7 +43,7 @@ function CashFlowGraph({ graphData, isConcise }: CashFlowGraphProps) {
               labelComponent={<Tooltip portalHost={portalHost} />}
               labels={x => x.premadeLabel}
               style={{
-                data: { stroke: colors.n5 },
+                data: { stroke: theme.altpageTextSubdued },
               }}
             />
             <VictoryAxis

packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx

@@ -3,7 +3,7 @@ import type { CSSProperties } from 'react';
 import * as d from 'date-fns';
 import { VictoryAxis, VictoryBar, VictoryChart, VictoryStack } from 'victory';
 
-import theme from '../chart-theme';
+import { chartTheme } from '../chart-theme';
 import Container from '../Container';
 import Tooltip from '../Tooltip';
 
@@ -38,7 +38,7 @@ function CategorySpendingGraph({
       {(width, height, portalHost) => (
         <VictoryChart
           scale={{ x: 'time', y: 'linear' }}
-          theme={theme}
+          theme={chartTheme}
           width={width}
           height={height}
         >

packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx

@@ -11,7 +11,7 @@ import {
 } from 'victory';
 
 import { type CSSProperties } from '../../../style';
-import theme from '../chart-theme';
+import { chartTheme } from '../chart-theme';
 import Container from '../Container';
 import Tooltip from '../Tooltip';
 
@@ -36,7 +36,7 @@ function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
         graphData && (
           <Chart
             scale={{ x: 'time', y: 'linear' }}
-            theme={theme}
+            theme={chartTheme}
             domainPadding={{ x: 0, y: 10 }}
             width={width}
             height={height}
@@ -78,7 +78,7 @@ function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
                   data: {
                     clipPath: 'url(#negative)',
                     fill: 'url(#negative-gradient)',
-                    stroke: theme.colors.red,
+                    stroke: chartTheme.colors.red,
                     strokeLinejoin: 'round',
                   },
                 }}
@@ -93,7 +93,7 @@ function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
             />
             {!compact && (
               <VictoryAxis
-                style={{ ticks: { stroke: 'red' } }}
+                style={{ ticks: { stroke: chartTheme.colors.red } }}
                 // eslint-disable-next-line rulesdir/typography
                 tickFormat={x => d.format(x, "MMM ''yy")}
                 tickValues={graphData.data.map(item => item.x)}

packages/desktop-client/src/components/reports/graphs/common.tsx

 import * as d from 'date-fns';
 
-import theme from '../chart-theme';
+import { chartTheme } from '../chart-theme';
 
 type AreaProps = {
   start: string;
@@ -47,8 +47,8 @@ export function Area({ start, end, scale, range }: AreaProps) {
           x2={0}
           y2={zero}
         >
-          <stop offset="0%" stopColor={theme.colors.blueFadeStart} />
-          <stop offset="100%" stopColor={theme.colors.blueFadeEnd} />
+          <stop offset="0%" stopColor={chartTheme.colors.blueFadeStart} />
+          <stop offset="100%" stopColor={chartTheme.colors.blueFadeEnd} />
         </linearGradient>
         <linearGradient
           id="negative-gradient"
@@ -58,8 +58,8 @@ export function Area({ start, end, scale, range }: AreaProps) {
           x2={0}
           y2={range.y[0]}
         >
-          <stop offset="0%" stopColor={theme.colors.redFadeEnd} />
-          <stop offset="100%" stopColor={theme.colors.redFadeStart} />
+          <stop offset="0%" stopColor={chartTheme.colors.redFadeEnd} />
+          <stop offset="100%" stopColor={chartTheme.colors.redFadeStart} />
         </linearGradient>
       </defs>
     </svg>

packages/desktop-client/src/components/settings/Encryption.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 
 import { useActions } from '../../hooks/useActions';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Button from '../common/Button';
 import ExternalLink from '../common/ExternalLink';
 import Text from '../common/Text';
@@ -26,7 +26,7 @@ export default function EncryptionSettings() {
       primaryAction={<Button onClick={onChangeKey}>Generate new key</Button>}
     >
       <Text>
-        <Text style={{ color: colors.g4, fontWeight: 600 }}>
+        <Text style={{ color: theme.noticeText, fontWeight: 600 }}>
           End-to-end Encryption is turned on.
         </Text>{' '}
         Your data is encrypted with a key that only you have before sending it

packages/desktop-client/src/components/settings/Experimental.tsx

@@ -5,7 +5,7 @@ import type { FeatureFlag } from 'loot-core/src/types/prefs';
 
 import { useActions } from '../../hooks/useActions';
 import useFeatureFlag from '../../hooks/useFeatureFlag';
-import { colors, useTheme } from '../../style';
+import { theme, useTheme } from '../../style';
 import LinkButton from '../common/LinkButton';
 import Text from '../common/Text';
 import View from '../common/View';
@@ -41,10 +41,19 @@ function FeatureToggle({
         }}
         disabled={disableToggle}
       />
-      <View style={{ color: disableToggle ? colors.n5 : 'inherit' }}>
+      <View
+        style={{ color: disableToggle ? theme.pageTextSubdued : 'inherit' }}
+      >
         {children}
         {disableToggle && (
-          <Text style={{ color: colors.r3, fontWeight: 500 }}>{error}</Text>
+          <Text
+            style={{
+              color: theme.errorText,
+              fontWeight: 500,
+            }}
+          >
+            {error}
+          </Text>
         )}
       </View>
     </label>
@@ -111,7 +120,7 @@ export default function ExperimentalFeatures() {
             style={{
               flexShrink: 0,
               alignSelf: 'flex-start',
-              color: colors.p4,
+              color: theme.pageTextPositive,
             }}
           >
             I understand the risks, show experimental features

packages/desktop-client/src/components/settings/FixSplits.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { type Handlers } from 'loot-core/src/types/handlers';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import { ButtonWithLoading } from '../common/Button';
 import Paragraph from '../common/Paragraph';
 import Text from '../common/Text';
@@ -39,7 +39,7 @@ function renderResults(results: Results) {
   return (
     <Paragraph
       style={{
-        color: colors.g3,
+        color: theme.alt3NoticeText,
         marginBottom: 0,
         marginLeft: '1em',
         textAlign: 'right',