[PR #7236] [MERGED] [AI] Refactor ThemeInstaller to handle pasted CSS more gracefully #37223

Closed
opened 2026-04-21 00:02:58 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/7236
Author: @MatissJanis
Created: 3/18/2026
Status: Merged
Merged: 3/19/2026
Merged by: @MatissJanis

Base: masterHead: claude/custom-theme-base-selection-ZAc0g


📝 Commits (9)

  • 4ccc2d0 [AI] Add baseTheme and overrideCss support to custom theme system
  • 9812984 [AI] Add base theme selection and CSS override layering for custom themes
  • df02547 [AI] Remove baseTheme from catalog; derive base from mode instead
  • 9cb1d49 Refactor ThemeInstaller to handle pasted CSS more gracefully
  • 7aff9ed Enhance ThemeInstaller and CustomThemeStyle to support CSS validation for both content and overrides. Refactor pasted CSS handling for improved clarity and efficiency.
  • b7ac875 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.
  • 4a75051 Add cachedCatalogCss state to ThemeInstaller for improved CSS handling
  • 7f89ff4 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.
  • d19adf9 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.

📊 Changes

5 files changed (+200 additions, -52 deletions)

View changed files

📝 packages/desktop-client/src/components/settings/ThemeInstaller.test.tsx (+24 -8)
📝 packages/desktop-client/src/components/settings/ThemeInstaller.tsx (+58 -17)
📝 packages/desktop-client/src/style/customThemes.ts (+34 -2)
📝 packages/desktop-client/src/style/theme.tsx (+78 -25)
upcoming-release-notes/7236.md (+6 -0)

📄 Description

Description

Changed the textbox in custom themes to allow defining custom overrides that are applied ON TOP of the selected theme (instead of on top of the default theme). This allows tweaking even a custom theme to your own preferences.

https://github.com/actualbudget/actual/issues/6607

Testing

Enable custom themes;
Select a custom theme;
Provide an extra override

Checklist

  • Release notes added (see link above)
  • No obvious regressions in affected areas
  • Self-review has been performed - I understand what each change in the code does and why it is needed

Bundle Stats

Bundle Files count Total bundle size % Changed
desktop-client 26 12.42 MB → 11.98 MB (-444.67 kB) -3.50%
loot-core 1 4.83 MB 0%
api 4 4.06 MB 0%
cli 1 7.88 MB 0%
View detailed bundle stats

desktop-client

Total

Files count Total bundle size % Changed
26 12.42 MB → 11.98 MB (-444.67 kB) -3.50%
Changeset
File Δ Size
src/style/theme.tsx 📈 +1.28 kB (+28.05%) 4.57 kB → 5.85 kB
src/components/settings/ThemeInstaller.tsx 📈 +1023 B (+9.95%) 10.04 kB → 11.04 kB
src/style/customThemes.ts 📈 +534 B (+9.71%) 5.37 kB → 5.89 kB
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger

Asset File Size % Changed
static/js/index.js 3.22 MB → 3.22 MB (+1023 B) +0.03%

Smaller

Asset File Size % Changed
static/js/theme.js 476.35 kB → 30.68 kB (-445.67 kB) -93.56%

Unchanged

Asset File Size % Changed
static/js/BackgroundImage.js 119.98 kB 0%
static/js/FormulaEditor.js 846.44 kB 0%
static/js/ReportRouter.js 1021.25 kB 0%
static/js/TransactionList.js 81.29 kB 0%
static/js/ca.js 185.62 kB 0%
static/js/da.js 104.66 kB 0%
static/js/de.js 177.63 kB 0%
static/js/en-GB.js 7.16 kB 0%
static/js/en.js 169.27 kB 0%
static/js/es.js 172.13 kB 0%
static/js/fr.js 177.63 kB 0%
static/js/indexeddb-main-thread-worker-e59fee74.js 13.46 kB 0%
static/js/it.js 168.97 kB 0%
static/js/narrow.js 353.47 kB 0%
static/js/nb-NO.js 154.72 kB 0%
static/js/nl.js 111.58 kB 0%
static/js/pl.js 88.34 kB 0%
static/js/pt-BR.js 180.55 kB 0%
static/js/resize-observer.js 18.03 kB 0%
static/js/th.js 179.94 kB 0%
static/js/uk.js 213.14 kB 0%
static/js/useTransactionBatchActions.js 4.29 MB 0%
static/js/wide.js 418 B 0%
static/js/workbox-window.prod.es5.js 7.28 kB 0%

loot-core

Total

Files count Total bundle size % Changed
1 4.83 MB 0%
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
kcab.worker.Dmj0rSrb.js 4.83 MB 0%

api

Total

Files count Total bundle size % Changed
4 4.06 MB 0%
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
index.js 3.84 MB 0%
from-Bl-Hslp4.js 167.73 kB 0%
multipart-parser-BnDysoMr.js 8.1 kB 0%
src-iMkUmuwR.js 43.64 kB 0%

cli

Total

Files count Total bundle size % Changed
1 7.88 MB 0%
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
cli.js 7.88 MB 0%

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/7236 **Author:** [@MatissJanis](https://github.com/MatissJanis) **Created:** 3/18/2026 **Status:** ✅ Merged **Merged:** 3/19/2026 **Merged by:** [@MatissJanis](https://github.com/MatissJanis) **Base:** `master` ← **Head:** `claude/custom-theme-base-selection-ZAc0g` --- ### 📝 Commits (9) - [`4ccc2d0`](https://github.com/actualbudget/actual/commit/4ccc2d06444280cccbb9c9cc6e326b83a960b8bd) [AI] Add baseTheme and overrideCss support to custom theme system - [`9812984`](https://github.com/actualbudget/actual/commit/98129843b6c422563036eff752b87a25c87e2f27) [AI] Add base theme selection and CSS override layering for custom themes - [`df02547`](https://github.com/actualbudget/actual/commit/df0254713d5243e56eb1e5252153b9f95378671d) [AI] Remove baseTheme from catalog; derive base from mode instead - [`9cb1d49`](https://github.com/actualbudget/actual/commit/9cb1d4905e18b6c889c10d2773b36895423b5708) Refactor ThemeInstaller to handle pasted CSS more gracefully - [`7aff9ed`](https://github.com/actualbudget/actual/commit/7aff9ed75260b7cd0ebfdec723e9c182bcdc90c5) Enhance ThemeInstaller and CustomThemeStyle to support CSS validation for both content and overrides. Refactor pasted CSS handling for improved clarity and efficiency. - [`b7ac875`](https://github.com/actualbudget/actual/commit/b7ac8757d99288ee7f69dbba001567d94bf2b1da) 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. - [`4a75051`](https://github.com/actualbudget/actual/commit/4a750515a1d5cf7b225a16edfbe6f4d2e4c6ed61) Add cachedCatalogCss state to ThemeInstaller for improved CSS handling - [`7f89ff4`](https://github.com/actualbudget/actual/commit/7f89ff40606d335ba71dd85079e6c7af88442ea1) 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. - [`d19adf9`](https://github.com/actualbudget/actual/commit/d19adf91751eda840ffd9dd1cedbf40ceb59101f) 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. ### 📊 Changes **5 files changed** (+200 additions, -52 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/src/components/settings/ThemeInstaller.test.tsx` (+24 -8) 📝 `packages/desktop-client/src/components/settings/ThemeInstaller.tsx` (+58 -17) 📝 `packages/desktop-client/src/style/customThemes.ts` (+34 -2) 📝 `packages/desktop-client/src/style/theme.tsx` (+78 -25) ➕ `upcoming-release-notes/7236.md` (+6 -0) </details> ### 📄 Description <!-- Thank you for submitting a pull request! Make sure to follow the instructions to write release notes for your PR — it should only take a minute or two: https://github.com/actualbudget/docs#writing-good-release-notes. Try running yarn generate:release-notes *before* pushing your PR for an interactive experience. --> ## Description <!-- What does this PR do? Why is it needed? Please give context on the "why\?": why do we need this change? What problem is it solving for you?--> Changed the textbox in custom themes to allow defining custom overrides that are applied ON TOP of the selected theme (instead of on top of the default theme). This allows tweaking even a custom theme to your own preferences. ## Related issue(s) <!-- e.g. Fixes #123, Relates to #456 --> https://github.com/actualbudget/actual/issues/6607 ## Testing <!-- What did you test? How can we reproduce the issue you are fixing or how can we test the feature you built? --> Enable custom themes; Select a custom theme; Provide an extra override ## Checklist - [x] Release notes added (see link above) - [x] No obvious regressions in affected areas - [x] Self-review has been performed - I understand what each change in the code does and why it is needed <!--- actual-bot-sections ---> <!--- bundlestats-action-comment key:combined start ---> ### Bundle Stats Bundle | Files count | Total bundle size | % Changed ------ | ----------- | ----------------- | --------- desktop-client | 26 | 12.42 MB → 11.98 MB (-444.67 kB) | -3.50% loot-core | 1 | 4.83 MB | 0% api | 4 | 4.06 MB | 0% cli | 1 | 7.88 MB | 0% <details> <summary>View detailed bundle stats</summary> #### desktop-client **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 26 | 12.42 MB → 11.98 MB (-444.67 kB) | -3.50% <details> <summary>Changeset</summary> File | Δ | Size ---- | - | ---- `src/style/theme.tsx` | 📈 +1.28 kB (+28.05%) | 4.57 kB → 5.85 kB `src/components/settings/ThemeInstaller.tsx` | 📈 +1023 B (+9.95%) | 10.04 kB → 11.04 kB `src/style/customThemes.ts` | 📈 +534 B (+9.71%) | 5.37 kB → 5.89 kB </details> <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** Asset | File Size | % Changed ----- | --------- | --------- static/js/index.js | 3.22 MB → 3.22 MB (+1023 B) | +0.03% **Smaller** Asset | File Size | % Changed ----- | --------- | --------- static/js/theme.js | 476.35 kB → 30.68 kB (-445.67 kB) | -93.56% **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- static/js/BackgroundImage.js | 119.98 kB | 0% static/js/FormulaEditor.js | 846.44 kB | 0% static/js/ReportRouter.js | 1021.25 kB | 0% static/js/TransactionList.js | 81.29 kB | 0% static/js/ca.js | 185.62 kB | 0% static/js/da.js | 104.66 kB | 0% static/js/de.js | 177.63 kB | 0% static/js/en-GB.js | 7.16 kB | 0% static/js/en.js | 169.27 kB | 0% static/js/es.js | 172.13 kB | 0% static/js/fr.js | 177.63 kB | 0% static/js/indexeddb-main-thread-worker-e59fee74.js | 13.46 kB | 0% static/js/it.js | 168.97 kB | 0% static/js/narrow.js | 353.47 kB | 0% static/js/nb-NO.js | 154.72 kB | 0% static/js/nl.js | 111.58 kB | 0% static/js/pl.js | 88.34 kB | 0% static/js/pt-BR.js | 180.55 kB | 0% static/js/resize-observer.js | 18.03 kB | 0% static/js/th.js | 179.94 kB | 0% static/js/uk.js | 213.14 kB | 0% static/js/useTransactionBatchActions.js | 4.29 MB | 0% static/js/wide.js | 418 B | 0% static/js/workbox-window.prod.es5.js | 7.28 kB | 0% </div> </details> --- #### loot-core **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 4.83 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- kcab.worker.Dmj0rSrb.js | 4.83 MB | 0% </div> </details> --- #### api **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 4 | 4.06 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- index.js | 3.84 MB | 0% from-Bl-Hslp4.js | 167.73 kB | 0% multipart-parser-BnDysoMr.js | 8.1 kB | 0% src-iMkUmuwR.js | 43.64 kB | 0% </div> </details> --- #### cli **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 7.88 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- cli.js | 7.88 MB | 0% </div> </details> </details> <!--- bundlestats-action-comment key:combined end ---> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-21 00:02:58 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#37223