add dev theme to list (#1469)

packages/desktop-client/src/style/theme.tsx

 import { useSelector } from 'react-redux';
 
+import { isNonProductionEnvironment } from 'loot-core/src/shared/environment';
 import type { Theme } from 'loot-core/src/types/prefs';
 
 import * as darkTheme from './themes/dark';
+import * as developmentTheme from './themes/development';
 import * as lightTheme from './themes/light';
 
 const themes = {
   light: lightTheme,
   dark: darkTheme,
+  ...(isNonProductionEnvironment() && { development: developmentTheme }),
 };
 
 export const themeNames = Object.keys(themes) as Theme[];

packages/desktop-client/src/style/themes/development.ts

+import * as colorPalette from '../palette';
+
+export const pageBackground = colorPalette.blue600;
+export const pageBackgroundModalActive = colorPalette.blue700;
+export const pageBackgroundTopLeft = colorPalette.green300;
+export const pageBackgroundBottomRight = colorPalette.red600;
+export const pageBackgroundLineTop = colorPalette.navy50;
+export const pageBackgroundLineMid = colorPalette.green500;
+export const pageBackgroundLineBottom = colorPalette.orange200;
+export const pageText = colorPalette.blue300;
+export const pageTextSubdued = colorPalette.blue500;
+export const pageTextPositive = colorPalette.blue50;
+export const pageTextLink = colorPalette.blue400;
+export const modalBackground = colorPalette.navy900;
+export const modalBorder = colorPalette.navy200;
+export const cardBackground = colorPalette.purple700;
+export const cardBorder = colorPalette.purple400;
+export const cardShadow = colorPalette.purple100;
+export const tableBackground = colorPalette.red900;
+export const tableRowBackgroundHover = colorPalette.red800;
+export const tableText = colorPalette.red200;
+export const tableTextSelected = colorPalette.red150;
+export const tableTextHover = colorPalette.red400;
+export const tableTextEditing = colorPalette.black;
+export const tableTextEditingBackground = colorPalette.red200;
+export const tableTextInactive = colorPalette.red500;
+export const tableHeaderText = colorPalette.red700;
+export const tableHeaderBackground = colorPalette.red300;
+export const tableBorder = colorPalette.red200;
+export const tableBorderSelected = colorPalette.purple400;
+export const tableBorderHover = colorPalette.purple300;
+export const tableBorderSeparator = colorPalette.navy400;
+export const tableRowBackgroundHighlight = colorPalette.red700;
+export const tableRowBackgroundHighlightText = colorPalette.red200;
+export const tableRowHeaderBackground = colorPalette.red100;
+export const tableRowHeaderText = colorPalette.red700;
+export const sidebarBackground = colorPalette.orange800;
+export const sidebarItemBackground = colorPalette.orange700;
+export const sidebarItemBackgroundSelected = colorPalette.orange900;
+export const sidebarItemBackgroundHover = colorPalette.orange500;
+export const sidebarItemAccent = colorPalette.orange200;
+export const sidebarItemAccentSelected = colorPalette.orange400;
+export const sidebarItemAccentHover = colorPalette.orange200;
+export const sidebarItemText = colorPalette.orange200;
+export const sidebarItemTextSelected = colorPalette.orange400;
+export const sidebarItemTextHover = colorPalette.orange150;
+export const tooltipBackground = colorPalette.white;
+export const tooltipBorder = colorPalette.black;
+export const menuBackground = colorPalette.green800;
+export const menuItemBackground = colorPalette.green700;
+export const menuItemBackgroundHover = colorPalette.green500;
+export const menuItemText = colorPalette.green200;
+export const menuItemTextHover = colorPalette.green50;
+export const menuItemTextSelected = colorPalette.green500;
+export const menuItemTextHeader = colorPalette.green300;
+export const menuBorder = colorPalette.green500;
+export const menuBorderHover = colorPalette.green900;
+export const altMenuBackground = colorPalette.navy700;
+export const altMenuItemBackground = colorPalette.navy700;
+export const altMenuItemBackgroundHover = colorPalette.navy600;
+export const altMenuItemText = colorPalette.navy150;
+export const altMenuItemTextHover = colorPalette.navy150;
+export const altMenuItemTextSelected = colorPalette.navy150;
+export const altMenuItemTextHeader = colorPalette.purple500;
+export const altMenuBorder = colorPalette.navy200;
+export const altMenuBorderHover = colorPalette.purple400;
+export const buttonAltMenuText = colorPalette.navy150;
+export const buttonAltMenuTextHover = colorPalette.navy100;
+export const buttonAltMenuTextSelected = colorPalette.navy100;
+export const buttonAltMenuBackground = colorPalette.navy800;
+export const buttonAltMenuBackgroundHover = colorPalette.navy600;
+export const buttonAltMenuBorder = colorPalette.navy600;
+export const buttonPositiveText = colorPalette.purple200;
+export const buttonPositiveTextHover = colorPalette.purple50;
+export const buttonPositiveTextSelected = colorPalette.purple600;
+export const buttonPositiveBackground = colorPalette.purple400;
+export const buttonPositiveBackgroundHover = colorPalette.purple800;
+export const buttonPositiveBorder = colorPalette.purple700;
+export const buttonNeutralText = colorPalette.navy50;
+export const buttonNeutralTextHover = colorPalette.navy200;
+export const buttonNeutralBackground = colorPalette.navy400;
+export const buttonNeutralBackgroundHover = colorPalette.navy500;
+export const buttonNeutralBorder = colorPalette.navy800;
+export const buttonDisabledText = colorPalette.navy500;
+export const buttonDisabledBackground = colorPalette.navy800;
+export const buttonDisabledBorder = colorPalette.navy500;
+export const buttonShadow = colorPalette.navy700;
+export const noticeBackground = colorPalette.green800;
+export const noticeText = colorPalette.green300;
+export const noticeAccent = colorPalette.green500;
+export const warningBackground = colorPalette.orange800;
+export const warningText = colorPalette.orange200;
+export const warningAccent = colorPalette.orange500;
+export const errorBackground = colorPalette.red800;
+export const errorText = colorPalette.red200;
+export const errorAccent = colorPalette.red500;
+export const formLabelText = colorPalette.purple200;
+export const formInputBackground = colorPalette.purple700;
+export const formInputBackgroundSelected = colorPalette.purple400;
+export const formInputBackgroundSelection = colorPalette.purple400;
+export const formInputBorder = colorPalette.purple600;
+export const formInputTextReadOnlySelection = colorPalette.purple800;
+export const formInputBorderSelected = colorPalette.purple100;
+export const formInputText = colorPalette.purple150;
+export const formInputTextSelected = colorPalette.purple800;
+export const formInputTextPlaceholder = colorPalette.navy150;
+export const formInputTextSelection = colorPalette.navy800;
+export const formInputShadowSelected = colorPalette.purple400;
+export const formInputTextHighlight = colorPalette.purple400;
+export const pillBackground = colorPalette.green800;
+export const pillText = colorPalette.green600;
+export const pillBorder = colorPalette.green200;
+export const pillBackgroundSelected = colorPalette.green100;
+export const pillTextSelected = colorPalette.green700;
+export const pillBorderSelected = colorPalette.green900;

upcoming-release-notes/1469.md

+---
+category: Maintenance
+authors: [carkom, biohzrddd]
+---
+
+add development theme to list of theme options
\ No newline at end of file