github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-20 22:28:08 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

[AI] Refactor ThemeInstaller to handle pasted CSS more gracefully (#7236)

Browse Source 
* [AI] Add baseTheme and overrideCss support to custom theme system

Add baseTheme field to InstalledTheme allowing users to choose which
built-in theme (light/dark/midnight) serves as the base for custom
themes. Add overrideCss field for layering additional CSS overrides
on top of a catalog theme's CSS.

ThemeStyle now respects the baseTheme field when rendering base
variables. CustomThemeStyle renders both cssContent and overrideCss
layers.

https://claude.ai/code/session_01PPAkAQB4xfeFCQbmNwvn2k

* [AI] Add base theme selection and CSS override layering for custom themes

- Add baseTheme field to CatalogTheme and InstalledTheme types, allowing
  catalog themes to declare which built-in theme (light/dark/midnight) they
  are based on
- Add overrideCss field to InstalledTheme for layering additional CSS
  overrides on top of a catalog theme
- Update ThemeStyle to render the correct base theme colors when a custom
  theme specifies a baseTheme
- Update CustomThemeStyle to render both cssContent and overrideCss layers
- Update ThemeInstaller UI: catalog selection and free-text CSS now coexist
  so users can pick a catalog theme (e.g. Matrix) and apply extra overrides
- Add baseTheme to all entries in customThemeCatalog.json
- Dynamic label: shows "Additional CSS overrides:" when a catalog theme is
  selected, "or paste CSS directly:" otherwise

https://claude.ai/code/session_01PPAkAQB4xfeFCQbmNwvn2k

* [AI] Remove baseTheme from catalog; derive base from mode instead

Base theme is now automatically determined from the catalog theme's
mode field: light mode themes use "light" as base, dark mode themes
use "dark" as base. No separate baseTheme field needed in catalog.

https://claude.ai/code/session_01PPAkAQB4xfeFCQbmNwvn2k

* Refactor ThemeInstaller to handle pasted CSS more gracefully

* Enhance ThemeInstaller and CustomThemeStyle to support CSS validation for both content and overrides. Refactor pasted CSS handling for improved clarity and efficiency.

* Implement validateAndCombineThemeCss function to streamline CSS validation and combination for light and dark themes in CustomThemeStyle. Refactor existing CSS handling to improve clarity and efficiency.

* Add cachedCatalogCss state to ThemeInstaller for improved CSS handling

* Update ThemeInstaller tests to ensure pasted CSS is preserved when a catalog theme is selected and modify onInstall behavior to correctly handle empty CSS content. Refactor test cases for clarity and accuracy.

* Enhance ThemeInstaller to support dynamic baseTheme selection based on catalog theme or user preference. Refactor CSS installation logic to prioritize selected catalog themes and improve handling of pasted CSS. Update dependencies in the installTheme function for better clarity and functionality.

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Matiss Janis Aboltins
2026-03-19 18:48:02 +00:00
committed by GitHub
parent 0793eb5927
commit f5a72448bd
5 changed files with 200 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/desktop-client/src/components/settings/ThemeInstaller.test.tsx
View File

@@ -157,7 +157,7 @@ describe('ThemeInstaller', () => {
});
});
it('clears pasted CSS when a catalog theme is selected', async () => {
it('preserves pasted CSS when a catalog theme is selected', async () => {
const user = userEvent.setup();
render(
<ThemeInstaller onInstall={mockOnInstall} onClose={mockOnClose} />,
@@ -173,7 +173,7 @@ describe('ThemeInstaller', () => {
expect(textArea).toHaveValue(cssText);
await user.click(screen.getByRole('button', { name: 'Demo Theme' }));
expect(textArea).toHaveValue('');
expect(textArea).toHaveValue(cssText);
});
it('clears error when a catalog theme is selected', async () => {
@@ -347,7 +347,7 @@ describe('ThemeInstaller', () => {
expect.objectContaining({
name: 'Custom Theme',
repo: '',
cssContent: mockValidCss,
overrideCss: mockValidCss,
}),
);
});
@@ -372,21 +372,28 @@ describe('ThemeInstaller', () => {
expect(validateThemeCss).toHaveBeenCalledWith(cssWithWhitespace.trim());
});
it('does not call onInstall when Apply is clicked with empty CSS', async () => {
it('calls onInstall with empty cssContent when Apply is clicked with empty CSS', async () => {
const user = userEvent.setup();
render(
<ThemeInstaller onInstall={mockOnInstall} onClose={mockOnClose} />,
);
const applyButton = screen.getByText('Apply');
expect(applyButton).toBeDisabled();
expect(applyButton).not.toBeDisabled();
await user.click(applyButton);
expect(mockOnInstall).not.toHaveBeenCalled();
await waitFor(() => {
expect(mockOnInstall).toHaveBeenCalledTimes(1);
expect(mockOnInstall).toHaveBeenCalledWith(
expect.objectContaining({
cssContent: '',
}),
);
});
});
it('does not call onInstall when Apply is clicked with whitespace-only CSS', async () => {
it('calls onInstall with empty cssContent when Apply is clicked with whitespace-only CSS', async () => {
const user = userEvent.setup();
render(
<ThemeInstaller onInstall={mockOnInstall} onClose={mockOnClose} />,
@@ -399,9 +406,18 @@ describe('ThemeInstaller', () => {
await user.paste(' ');
const applyButton = screen.getByText('Apply');
expect(applyButton).toBeDisabled();
expect(applyButton).not.toBeDisabled();
await user.click(applyButton);
await waitFor(() => {
expect(mockOnInstall).toHaveBeenCalledTimes(1);
expect(mockOnInstall).toHaveBeenCalledWith(
expect.objectContaining({
cssContent: '',
}),
);
});
});
it('populates text box with installed custom theme CSS when reopening', () => {

75
packages/desktop-client/src/components/settings/ThemeInstaller.tsx
View File

@@ -52,6 +52,7 @@ export function ThemeInstaller({
useState<CatalogTheme | null>(null);
const [erroringTheme, setErroringTheme] = useState<CatalogTheme | null>(null);
const [pastedCss, setPastedCss] = useState('');
const [cachedCatalogCss, setCachedCatalogCss] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -62,10 +63,17 @@ export function ThemeInstaller({
error: catalogError,
} = useThemeCatalog();
// Initialize pastedCss with installed custom theme CSS if it exists
// Initialize state from installed theme
useEffect(() => {
// If there's an installed theme with empty repo (custom pasted CSS), restore it
if (installedTheme && !installedTheme.repo) {
if (!installedTheme) return;
if (installedTheme.repo) {
// Catalog theme installed — restore overrideCss into text area if present
if (installedTheme.overrideCss) {
setPastedCss(installedTheme.overrideCss);
}
} else {
// Custom pasted CSS — restore into text area
setPastedCss(installedTheme.cssContent);
}
}, [installedTheme]);
@@ -105,6 +113,8 @@ export function ThemeInstaller({
id: string;
errorMessage: string;
catalogTheme?: CatalogTheme | null;
baseTheme?: 'light' | 'dark' | 'midnight';
overrideCss?: string;
}) => {
setError(null);
setErroringTheme(null);
@@ -113,15 +123,26 @@ export function ThemeInstaller({
try {
const css =
typeof options.css === 'string' ? options.css : await options.css;
const validatedCss = validateThemeCss(css);
const validatedCss = css ? validateThemeCss(css) : '';
const installedTheme: InstalledTheme = {
const newTheme: InstalledTheme = {
id: options.id,
name: options.name,
repo: options.repo,
cssContent: validatedCss,
baseTheme: options.catalogTheme
? options.catalogTheme.mode === 'dark'
? 'dark'
: 'light'
: options.baseTheme,
};
onInstall(installedTheme);
if (options.overrideCss) {
newTheme.overrideCss = validateThemeCss(options.overrideCss);
}
if (options.catalogTheme) {
setCachedCatalogCss(validatedCss);
}
onInstall(newTheme);
// Only set selectedCatalogTheme on success if it's a catalog theme
if (options.catalogTheme) {
setSelectedCatalogTheme(options.catalogTheme);
@@ -142,7 +163,6 @@ export function ThemeInstaller({
const handleCatalogThemeClick = useCallback(
async (theme: CatalogTheme) => {
setPastedCss('');
setSelectedCatalogTheme(theme);
const normalizedRepo = normalizeGitHubRepo(theme.repo);
@@ -153,29 +173,50 @@ export function ThemeInstaller({
id: generateThemeId(normalizedRepo),
errorMessage: t('Failed to load theme'),
catalogTheme: theme,
overrideCss: pastedCss.trim() || undefined,
});
},
[installTheme, t],
[installTheme, pastedCss, t],
);
const handlePastedCssChange = useCallback((value: string) => {
setPastedCss(value);
setSelectedCatalogTheme(null);
setErroringTheme(null);
setError(null);
}, []);
const handleInstallPastedCss = useCallback(() => {
if (!pastedCss.trim()) return;
// Determine the base catalog CSS: prefer the in-session selection,
// fall back to the previously installed catalog theme
const hasCatalog = selectedCatalogTheme || installedTheme?.repo;
const baseCss = selectedCatalogTheme
? cachedCatalogCss
: (installedTheme?.cssContent ?? '');
const repo = selectedCatalogTheme
? normalizeGitHubRepo(selectedCatalogTheme.repo)
: (installedTheme?.repo ?? '');
void installTheme({
css: pastedCss.trim(),
name: t('Custom Theme'),
repo: '',
id: generateThemeId(`pasted-${Date.now()}`),
css: hasCatalog ? baseCss : '',
name:
selectedCatalogTheme?.name ?? installedTheme?.name ?? t('Custom Theme'),
repo,
id: repo
? generateThemeId(repo)
: generateThemeId(`pasted-${Date.now()}`),
errorMessage: t('Failed to validate theme CSS'),
catalogTheme: selectedCatalogTheme,
baseTheme: installedTheme?.baseTheme,
overrideCss: pastedCss.trim() || undefined,
});
}, [pastedCss, installTheme, t]);
}, [
pastedCss,
selectedCatalogTheme,
cachedCatalogCss,
installedTheme,
installTheme,
t,
]);
return (
<View
@@ -402,7 +443,7 @@ export function ThemeInstaller({
}}
>
<Text style={{ marginBottom: 8, color: themeStyle.pageTextSubdued }}>
<Trans>or paste CSS directly:</Trans>
<Trans>Additional CSS overrides:</Trans>
</Text>
<TextArea
value={pastedCss}
@@ -425,7 +466,7 @@ export function ThemeInstaller({
<Button
variant="normal"
onPress={handleInstallPastedCss}
isDisabled={!pastedCss.trim() || isLoading}
isDisabled={isLoading}
>
<Trans>Apply</Trans>
</Button>

36
packages/desktop-client/src/style/customThemes.ts
View File

@@ -2,6 +2,9 @@
* Custom theme utilities: fetch, validation, and storage helpers.
*/
export const BASE_THEME_OPTIONS = ['light', 'dark', 'midnight'] as const;
export type BaseTheme = (typeof BASE_THEME_OPTIONS)[number];
export type CatalogTheme = {
name: string;
repo: string;
@@ -14,6 +17,8 @@ export type InstalledTheme = {
name: string;
repo: string;
cssContent: string; // CSS content stored when theme is installed (required)
baseTheme?: BaseTheme; // Which built-in theme to use as base (defaults to contextual theme)
overrideCss?: string; // Additional free-text CSS overrides on top of cssContent
};
/**
@@ -271,6 +276,21 @@ export function validateThemeCss(css: string): string {
return css.trim();
}
/**
* Validate and concatenate cssContent and overrideCss into a single CSS string.
* Returns empty string if neither is present.
*/
export function validateAndCombineThemeCss(
cssContent?: string,
overrideCss?: string,
): string {
const parts = [
cssContent && validateThemeCss(cssContent),
overrideCss && validateThemeCss(overrideCss),
].filter(Boolean);
return parts.join('\n');
}
/**
* Generate a unique ID for a theme based on its repo URL or direct CSS URL.
*/
@@ -303,12 +323,24 @@ export function parseInstalledTheme(
typeof parsed.repo === 'string' &&
typeof parsed.cssContent === 'string'
) {
return {
const result: InstalledTheme = {
id: parsed.id,
name: parsed.name,
repo: parsed.repo,
cssContent: parsed.cssContent,
} satisfies InstalledTheme;
};
if (
typeof parsed.baseTheme === 'string' &&
BASE_THEME_OPTIONS.includes(
parsed.baseTheme as (typeof BASE_THEME_OPTIONS)[number],
)
) {
result.baseTheme = parsed.baseTheme as BaseTheme;
}
if (typeof parsed.overrideCss === 'string' && parsed.overrideCss) {
result.overrideCss = parsed.overrideCss;
}
return result;
}
return null;
} catch {

103
packages/desktop-client/src/style/theme.tsx
View File

@@ -2,7 +2,11 @@ import { useEffect, useMemo, useState } from 'react';
import type { DarkTheme, Theme } from 'loot-core/types/prefs';
import { parseInstalledTheme, validateThemeCss } from './customThemes';
import {
parseInstalledTheme,
validateAndCombineThemeCss,
} from './customThemes';
import type { BaseTheme } from './customThemes';
import * as darkTheme from './themes/dark';
import * as lightTheme from './themes/light';
import * as midnightTheme from './themes/midnight';
@@ -39,22 +43,47 @@ export function usePreferredDarkTheme() {
return [darkTheme, setDarkTheme] as const;
}
function getBaseThemeColors(baseTheme: BaseTheme) {
return themes[baseTheme]?.colors;
}
export function ThemeStyle() {
const [activeTheme] = useTheme();
const [darkThemePreference] = usePreferredDarkTheme();
const customThemesEnabled = useFeatureFlag('customThemes');
const [installedCustomLightThemeJson] = useGlobalPref(
'installedCustomLightTheme',
);
const [installedCustomDarkThemeJson] = useGlobalPref(
'installedCustomDarkTheme',
);
const [themeColors, setThemeColors] = useState<
typeof lightTheme | typeof darkTheme | typeof midnightTheme | undefined
>(undefined);
useEffect(() => {
if (activeTheme === 'auto') {
const darkTheme = themes[darkThemePreference];
const installedLight = customThemesEnabled
? parseInstalledTheme(installedCustomLightThemeJson)
: null;
const installedDark = customThemesEnabled
? parseInstalledTheme(installedCustomDarkThemeJson)
: null;
const lightColors =
(installedLight?.baseTheme &&
getBaseThemeColors(installedLight.baseTheme)) ||
themes['light'].colors;
const darkColors =
(installedDark?.baseTheme &&
getBaseThemeColors(installedDark.baseTheme)) ||
themes[darkThemePreference].colors;
function darkThemeMediaQueryListener(event: MediaQueryListEvent) {
if (event.matches) {
setThemeColors(darkTheme.colors);
setThemeColors(darkColors);
} else {
setThemeColors(themes['light'].colors);
setThemeColors(lightColors);
}
}
const darkThemeMediaQuery = window.matchMedia(
@@ -67,9 +96,9 @@ export function ThemeStyle() {
);
if (darkThemeMediaQuery.matches) {
setThemeColors(darkTheme.colors);
setThemeColors(darkColors);
} else {
setThemeColors(themes['light'].colors);
setThemeColors(lightColors);
}
return () => {
@@ -79,9 +108,25 @@ export function ThemeStyle() {
);
};
} else {
setThemeColors(themes[activeTheme as ThemeKey]?.colors);
const installedTheme = customThemesEnabled
? parseInstalledTheme(installedCustomLightThemeJson)
: null;
if (installedTheme?.baseTheme) {
setThemeColors(
getBaseThemeColors(installedTheme.baseTheme) ??
themes[activeTheme as ThemeKey]?.colors,
);
} else {
setThemeColors(themes[activeTheme as ThemeKey]?.colors);
}
}
}, [activeTheme, darkThemePreference]);
}, [
activeTheme,
darkThemePreference,
customThemesEnabled,
installedCustomLightThemeJson,
installedCustomDarkThemeJson,
]);
if (!themeColors) return null;
@@ -117,36 +162,44 @@ export function CustomThemeStyle() {
let css = '';
if (lightTheme?.cssContent) {
try {
const validated = validateThemeCss(lightTheme.cssContent);
css += `@media (prefers-color-scheme: light) { ${validated} }\n`;
} catch (error) {
console.error('Invalid custom light theme CSS', { error });
try {
const lightCss = validateAndCombineThemeCss(
lightTheme?.cssContent,
lightTheme?.overrideCss,
);
if (lightCss) {
css += `@media (prefers-color-scheme: light) { ${lightCss} }\n`;
}
} catch (error) {
console.error('Invalid custom light theme CSS', { error });
}
if (darkTheme?.cssContent) {
try {
const validated = validateThemeCss(darkTheme.cssContent);
css += `@media (prefers-color-scheme: dark) { ${validated} }\n`;
} catch (error) {
console.error('Invalid custom dark theme CSS', { error });
try {
const darkCss = validateAndCombineThemeCss(
darkTheme?.cssContent,
darkTheme?.overrideCss,
);
if (darkCss) {
css += `@media (prefers-color-scheme: dark) { ${darkCss} }\n`;
}
} catch (error) {
console.error('Invalid custom dark theme CSS', { error });
}
return css || null;
}
const installedTheme = parseInstalledTheme(installedCustomLightThemeJson);
const { cssContent } = installedTheme ?? {};
if (!cssContent) return null;
try {
return validateThemeCss(cssContent);
return (
validateAndCombineThemeCss(
installedTheme?.cssContent,
installedTheme?.overrideCss,
) || null
);
} catch (error) {
console.error('Invalid custom theme CSS', { error, cssContent });
console.error('Invalid custom theme CSS', { error });
return null;
}
}, [

6
upcoming-release-notes/7236.md Normal file
View File

@@ -0,0 +1,6 @@
---
category: Enhancements
authors: [MatissJanis]
---
Custom Themes: allow adding custom overrides to themes via the textarea box