From f5a72448bd7d3bfd2b8e337f76903d2546a8416c Mon Sep 17 00:00:00 2001 From: Matiss Janis Aboltins Date: Thu, 19 Mar 2026 18:48:02 +0000 Subject: [PATCH] [AI] Refactor ThemeInstaller to handle pasted CSS more gracefully (#7236) * [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 --- .../settings/ThemeInstaller.test.tsx | 32 ++++-- .../components/settings/ThemeInstaller.tsx | 75 ++++++++++--- .../desktop-client/src/style/customThemes.ts | 36 +++++- packages/desktop-client/src/style/theme.tsx | 103 +++++++++++++----- upcoming-release-notes/7236.md | 6 + 5 files changed, 200 insertions(+), 52 deletions(-) create mode 100644 upcoming-release-notes/7236.md diff --git a/packages/desktop-client/src/components/settings/ThemeInstaller.test.tsx b/packages/desktop-client/src/components/settings/ThemeInstaller.test.tsx index 1af0bb02d9..60f6d279eb 100644 --- a/packages/desktop-client/src/components/settings/ThemeInstaller.test.tsx +++ b/packages/desktop-client/src/components/settings/ThemeInstaller.test.tsx @@ -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( , @@ -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( , ); 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( , @@ -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', () => { diff --git a/packages/desktop-client/src/components/settings/ThemeInstaller.tsx b/packages/desktop-client/src/components/settings/ThemeInstaller.tsx index ef92b2e252..651d6f8bc6 100644 --- a/packages/desktop-client/src/components/settings/ThemeInstaller.tsx +++ b/packages/desktop-client/src/components/settings/ThemeInstaller.tsx @@ -52,6 +52,7 @@ export function ThemeInstaller({ useState(null); const [erroringTheme, setErroringTheme] = useState(null); const [pastedCss, setPastedCss] = useState(''); + const [cachedCatalogCss, setCachedCatalogCss] = useState(''); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(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 ( - or paste CSS directly: + Additional CSS overrides: