Add theme mode filtering to custom theme catalog (#7194)

* [AI] Add mode field to custom theme catalog for dark/light filtering

Each catalog theme now has a `mode: 'dark' | 'light'` field. When
installing a custom theme in auto mode, the ThemeInstaller filters the
catalog to only show themes matching the selected mode (light or dark).

https://claude.ai/code/session_01PtSEMRv3SpAEtdGzvYxzpa

* Add release notes for PR #7194

* Change category from Features to Enhancements

* [AI] Rename filter parameter to avoid shadowing useTranslation t()

Rename `t` to `catalogTheme` in the catalogItems filter to avoid
shadowing the `t` translation function from useTranslation().

https://claude.ai/code/session_01PtSEMRv3SpAEtdGzvYxzpa

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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

@@ -38,12 +38,14 @@ type ThemeInstallerProps = {
   onInstall: (theme: InstalledTheme) => void;
   onClose: () => void;
   installedTheme?: InstalledTheme | null;
+  mode?: 'light' | 'dark';
 };
 
 export function ThemeInstaller({
   onInstall,
   onClose,
   installedTheme,
+  mode,
 }: ThemeInstallerProps) {
   const { t } = useTranslation();
   const [selectedCatalogTheme, setSelectedCatalogTheme] =
@@ -246,9 +248,9 @@ export function ThemeInstaller({
                   return null;
                 }
 
-                const catalogItems = [...(catalog ?? [])].sort((a, b) =>
-                  a.name.localeCompare(b.name),
-                );
+                const catalogItems = [...(catalog ?? [])]
+                  .filter(catalogTheme => !mode || catalogTheme.mode === mode)
+                  .sort((a, b) => a.name.localeCompare(b.name));
                 const itemsPerRow = getItemsPerRow(width);
                 const rows: CatalogTheme[][] = [];
                 for (let i = 0; i < catalogItems.length; i += itemsPerRow) {

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

@@ -285,6 +285,11 @@ export function ThemeSettings() {
                   ? installedCustomDarkTheme
                   : installedCustomLightTheme
               }
+              mode={
+                showInstaller === 'light' || showInstaller === 'dark'
+                  ? showInstaller
+                  : undefined
+              }
             />
           )}
         </View>

packages/desktop-client/src/data/customThemeCatalog.json

@@ -2,42 +2,106 @@
   {
     "name": "Demo Theme",
     "repo": "actualbudget/demo-theme",
-    "colors": ["#f5f1e8", "#5a4a38", "#b8956a", "#4a3f2e", "#fffef9", "#d4b896"]
+    "colors": [
+      "#f5f1e8",
+      "#5a4a38",
+      "#b8956a",
+      "#4a3f2e",
+      "#fffef9",
+      "#d4b896"
+    ],
+    "mode": "light"
   },
   {
     "name": "Shades of Coffee",
     "repo": "Juulz/shades-of-coffee",
-    "colors": ["#e2d8cf", "#1a0c00", "#cfb3ff", "#f5f2ef", "#604b39", "#c29670"]
+    "colors": [
+      "#e2d8cf",
+      "#1a0c00",
+      "#cfb3ff",
+      "#f5f2ef",
+      "#604b39",
+      "#c29670"
+    ],
+    "mode": "light"
   },
   {
     "name": "Miami Beach",
     "repo": "Juulz/miami-beach",
-    "colors": ["#d095ca", "#5e2a91", "#c5ece4", "#24b2a0", "#f9deb8", "#1e9484"]
+    "colors": [
+      "#d095ca",
+      "#5e2a91",
+      "#c5ece4",
+      "#24b2a0",
+      "#f9deb8",
+      "#1e9484"
+    ],
+    "mode": "light"
   },
   {
     "name": "Simple Dark",
     "repo": "Juulz/simple-dark",
-    "colors": ["#222222", "#063446", "#14aeeb", "#434343", "#edbe5e", "#d9e2ec"]
+    "colors": [
+      "#222222",
+      "#063446",
+      "#14aeeb",
+      "#434343",
+      "#edbe5e",
+      "#d9e2ec"
+    ],
+    "mode": "dark"
   },
   {
     "name": "Matrix",
     "repo": "MatissJanis/actualbudget-matrix-theme",
-    "colors": ["#000000", "#001a00", "#00ff41", "#004400", "#39ff14", "#00ff00"]
+    "colors": [
+      "#000000",
+      "#001a00",
+      "#00ff41",
+      "#004400",
+      "#39ff14",
+      "#00ff00"
+    ],
+    "mode": "dark"
   },
   {
     "name": "Black Gold",
     "repo": "MikesGlitch/actual-black-gold-theme",
-    "colors": ["#141520", "#242733", "#373B4A", "#E8ECF0", "#FFD700", "#8F7A20"]
+    "colors": [
+      "#141520",
+      "#242733",
+      "#373B4A",
+      "#E8ECF0",
+      "#FFD700",
+      "#8F7A20"
+    ],
+    "mode": "dark"
   },
   {
     "name": "Color-blind (Dark)",
     "repo": "Juulz/okabe-ito",
-    "colors": ["#222222", "#141520", "#e69f00", "#56b4e9", "#b88115", "#00304d"]
+    "colors": [
+      "#222222",
+      "#141520",
+      "#e69f00",
+      "#56b4e9",
+      "#b88115",
+      "#00304d"
+    ],
+    "mode": "dark"
   },
   {
     "name": "Theme from 1970",
     "repo": "Juulz/1970-theme",
-    "colors": ["#f2f2f2", "#61591f", "#a92da3", "#4d2d19", "#f4ebe7", "#dad18b"]
+    "colors": [
+      "#f2f2f2",
+      "#61591f",
+      "#a92da3",
+      "#4d2d19",
+      "#f4ebe7",
+      "#dad18b"
+    ],
+    "mode": "light"
   },
   {
     "name": "Shades of Gray (light)",
@@ -49,37 +113,86 @@
       "hsl(0, 0%, 80%)",
       "#99ffff",
       "hsl(0, 0%, 35%)"
-    ]
+    ],
+    "mode": "light"
   },
   {
     "name": "Catppuccin Latte",
     "repo": "noahjalex/catppuccin-latte-actual",
-    "colors": ["#eff1f5", "#dce0e8", "#ccd0da", "#8839ef", "#1e66f5", "#4c4f69"]
+    "colors": [
+      "#eff1f5",
+      "#dce0e8",
+      "#ccd0da",
+      "#8839ef",
+      "#1e66f5",
+      "#4c4f69"
+    ],
+    "mode": "light"
   },
   {
     "name": "Catppuccin Frappé",
     "repo": "noahjalex/catppuccin-frappe-actual",
-    "colors": ["#303446", "#232634", "#414559", "#ca9ee6", "#8caaee", "#c6d0f5"]
+    "colors": [
+      "#303446",
+      "#232634",
+      "#414559",
+      "#ca9ee6",
+      "#8caaee",
+      "#c6d0f5"
+    ],
+    "mode": "dark"
   },
   {
     "name": "Catppuccin Macchiato",
     "repo": "noahjalex/catppuccin-macchiato-actual",
-    "colors": ["#24273a", "#181926", "#363a4f", "#c6a0f6", "#8aadf4", "#cad3f5"]
+    "colors": [
+      "#24273a",
+      "#181926",
+      "#363a4f",
+      "#c6a0f6",
+      "#8aadf4",
+      "#cad3f5"
+    ],
+    "mode": "dark"
   },
   {
     "name": "Catppuccin Mocha",
     "repo": "noahjalex/catppuccin-mocha-actual",
-    "colors": ["#1e1e2e", "#11111b", "#313244", "#cba6f7", "#89b4fa", "#cdd6f4"]
+    "colors": [
+      "#1e1e2e",
+      "#11111b",
+      "#313244",
+      "#cba6f7",
+      "#89b4fa",
+      "#cdd6f4"
+    ],
+    "mode": "dark"
   },
   {
     "name": "You Need A Dark Mode",
     "repo": "distantvapor/you-need-a-dark-mode",
-    "colors": ["#121212", "#1E1E1E", "#00B3C4", "#006A84", "#D4D4D4", "#333333"]
+    "colors": [
+      "#121212",
+      "#1E1E1E",
+      "#00B3C4",
+      "#006A84",
+      "#D4D4D4",
+      "#333333"
+    ],
+    "mode": "dark"
   },
   {
     "name": "Butterfly",
     "repo": "samekh248/actual-butterfly-theme",
-    "colors": ["#12110F", "#22201D", "#F35B16", "#3D261C", "#E5E7EB", "#1B8366"]
+    "colors": [
+      "#12110F",
+      "#22201D",
+      "#F35B16",
+      "#3D261C",
+      "#E5E7EB",
+      "#1B8366"
+    ],
+    "mode": "dark"
   },
   {
     "name": "High-contrast (Light)",
@@ -91,11 +204,20 @@
       "#fff",
       "hsl(0, 0%, 90%)",
       "hsl(90, 100%, 17%)"
-    ]
+    ],
+    "mode": "light"
   },
   {
     "name": "Notion Dark Mode",
     "repo": "vcruzdesigns/Notion-Dark-Mode",
-    "colors": ["#4584d9", "#191919", "#202020", "#2c2c2c", "#383838", "#f0efed"]
+    "colors": [
+      "#4584d9",
+      "#191919",
+      "#202020",
+      "#2c2c2c",
+      "#383838",
+      "#f0efed"
+    ],
+    "mode": "dark"
   }
 ]

packages/desktop-client/src/style/customThemes.ts

@@ -6,6 +6,7 @@ export type CatalogTheme = {
   name: string;
   repo: string;
   colors?: string[];
+  mode: 'dark' | 'light';
 };
 
 export type InstalledTheme = {