diff --git a/packages/desktop-client/src/components/settings/ThemeInstaller.tsx b/packages/desktop-client/src/components/settings/ThemeInstaller.tsx index 3943459377..ef92b2e252 100644 --- a/packages/desktop-client/src/components/settings/ThemeInstaller.tsx +++ b/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) { diff --git a/packages/desktop-client/src/components/settings/Themes.tsx b/packages/desktop-client/src/components/settings/Themes.tsx index a3c283368b..1b2e369841 100644 --- a/packages/desktop-client/src/components/settings/Themes.tsx +++ b/packages/desktop-client/src/components/settings/Themes.tsx @@ -285,6 +285,11 @@ export function ThemeSettings() { ? installedCustomDarkTheme : installedCustomLightTheme } + mode={ + showInstaller === 'light' || showInstaller === 'dark' + ? showInstaller + : undefined + } /> )} diff --git a/packages/desktop-client/src/data/customThemeCatalog.json b/packages/desktop-client/src/data/customThemeCatalog.json index e170480375..559e90bc19 100644 --- a/packages/desktop-client/src/data/customThemeCatalog.json +++ b/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" } ] diff --git a/packages/desktop-client/src/style/customThemes.ts b/packages/desktop-client/src/style/customThemes.ts index a19d1dad36..0fdfd0fae0 100644 --- a/packages/desktop-client/src/style/customThemes.ts +++ b/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 = { diff --git a/upcoming-release-notes/7194.md b/upcoming-release-notes/7194.md new file mode 100644 index 0000000000..4604228d32 --- /dev/null +++ b/upcoming-release-notes/7194.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [MatissJanis] +--- + +Add light/dark mode specificity to custom themes