[PR #7145] [MERGED] [AI] Custom Themes - ability to define separate light/dark theme #21327

Closed
opened 2026-04-14 22:01:35 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/7145
Author: @MatissJanis
Created: 3/6/2026
Status: Merged
Merged: 3/11/2026
Merged by: @MatissJanis

Base: masterHead: ai/custom-theme-dual-prefs


📝 Commits (7)

  • 95badf1 [AI] Consolidate custom theme prefs and improve auto-mode UX
  • dd6f276 Add release notes for PR #7145
  • 13fcc40 Change category from Features to Enhancement
  • b2267b8 Update VRT screenshots
  • aae8335 Merge branch 'master' into ai/custom-theme-dual-prefs
  • 0f6d1be Merge branch 'ai/custom-theme-dual-prefs' of github.com:actualbudget/actual into ai/custom-theme-dual-prefs
  • c2f6ecf Enhance ThemeSettings and UI components by adding maxWidth styling for better responsiveness. This change ensures that buttons and columns adapt to the full width of their containers.

📊 Changes

8 files changed (+230 additions, -62 deletions)

View changed files

📝 packages/desktop-client/e2e/settings.mobile.test.ts-snapshots/Mobile-Settings-checks-that-settings-page-can-be-opened-4-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/settings.test.ts-snapshots/Settings-checks-the-page-visuals-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/src/components/settings/Themes.tsx (+157 -45)
📝 packages/desktop-client/src/components/settings/UI.tsx (+3 -1)
📝 packages/desktop-client/src/style/theme.tsx (+47 -10)
📝 packages/loot-core/src/server/preferences/app.ts (+13 -4)
📝 packages/loot-core/src/types/prefs.ts (+4 -2)
upcoming-release-notes/7145.md (+6 -0)

📄 Description

Description

Allow setting a different light/dark theme w/ custom themes.

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

Testing

  1. Enable custom themes
  2. Use "system default" theme
  3. Notice the "light" and "dark" selector now has a "custom theme" option
  4. Set them

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 27 14.91 MB → 14.92 MB (+3.84 kB) +0.03%
loot-core 1 5.83 MB → 5.83 MB (+378 B) +0.01%
api 1 4.44 MB → 4.44 MB (+342 B) +0.01%
View detailed bundle stats

desktop-client

Total

Files count Total bundle size % Changed
27 14.91 MB → 14.92 MB (+3.84 kB) +0.03%
Changeset
File Δ Size
src/components/settings/Themes.tsx 📈 +3.26 kB (+94.61%) 3.44 kB → 6.7 kB
src/style/theme.tsx 📈 +576 B (+12.24%) 4.6 kB → 5.16 kB
src/components/settings/UI.tsx 📈 +21 B (+0.56%) 3.65 kB → 3.67 kB
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger

Asset File Size % Changed
static/js/index.js 9.56 MB → 9.57 MB (+3.84 kB) +0.04%

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
static/js/indexeddb-main-thread-worker-e59fee74.js 12.94 kB 0%
static/js/workbox-window.prod.es5.js 5.64 kB 0%
static/js/ca.js 187.93 kB 0%
static/js/da.js 106.2 kB 0%
static/js/de.js 179.89 kB 0%
static/js/en-GB.js 7.18 kB 0%
static/js/en.js 170.86 kB 0%
static/js/es.js 174.37 kB 0%
static/js/fr.js 179.41 kB 0%
static/js/it.js 170.98 kB 0%
static/js/nb-NO.js 156.8 kB 0%
static/js/nl.js 113.06 kB 0%
static/js/pl.js 89.65 kB 0%
static/js/pt-BR.js 182.89 kB 0%
static/js/th.js 181.58 kB 0%
static/js/uk.js 215.35 kB 0%
static/js/resize-observer.js 18.37 kB 0%
static/js/BackgroundImage.js 120.54 kB 0%
static/js/ReportRouter.js 1.16 MB 0%
static/js/narrow.js 638.11 kB 0%
static/js/TransactionList.js 106.48 kB 0%
static/js/wide.js 164.15 kB 0%
static/js/AppliedFilters.js 9.71 kB 0%
static/js/usePayeeRuleCounts.js 11.57 kB 0%
static/js/useTransactionBatchActions.js 13.23 kB 0%
static/js/FormulaEditor.js 1.04 MB 0%

loot-core

Total

Files count Total bundle size % Changed
1 5.83 MB → 5.83 MB (+378 B) +0.01%
Changeset
File Δ Size
home/runner/work/actual/actual/packages/loot-core/src/server/preferences/app.ts 📈 +378 B (+6.63%) 5.57 kB → 5.94 kB
View detailed bundle breakdown

Added

Asset File Size % Changed
kcab.worker.L2qhXNWs.js 0 B → 5.83 MB (+5.83 MB) -

Removed

Asset File Size % Changed
kcab.worker.BJdSX9Vk.js 5.83 MB → 0 B (-5.83 MB) -100%

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged
No assets were unchanged


api

Total

Files count Total bundle size % Changed
1 4.44 MB → 4.44 MB (+342 B) +0.01%
Changeset
File Δ Size
src/server/preferences/app.ts 📈 +342 B (+6.83%) 4.89 kB → 5.22 kB
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger

Asset File Size % Changed
bundle.api.js 4.44 MB → 4.44 MB (+342 B) +0.01%

Smaller
No assets were smaller

Unchanged
No assets were unchanged


🔄 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/7145 **Author:** [@MatissJanis](https://github.com/MatissJanis) **Created:** 3/6/2026 **Status:** ✅ Merged **Merged:** 3/11/2026 **Merged by:** [@MatissJanis](https://github.com/MatissJanis) **Base:** `master` ← **Head:** `ai/custom-theme-dual-prefs` --- ### 📝 Commits (7) - [`95badf1`](https://github.com/actualbudget/actual/commit/95badf1608a3ffa7d09a148ab0f16301869b16e6) [AI] Consolidate custom theme prefs and improve auto-mode UX - [`dd6f276`](https://github.com/actualbudget/actual/commit/dd6f27607e97caf8557e8a327f92670c4f903640) Add release notes for PR #7145 - [`13fcc40`](https://github.com/actualbudget/actual/commit/13fcc408fa9c8f99cf7e1a53e72c20d47223023b) Change category from Features to Enhancement - [`b2267b8`](https://github.com/actualbudget/actual/commit/b2267b8b0d017dc612e59adb52b750ce688a7d3f) Update VRT screenshots - [`aae8335`](https://github.com/actualbudget/actual/commit/aae8335fcfff0e823ae9cd4cd4c06028ff4e9c72) Merge branch 'master' into ai/custom-theme-dual-prefs - [`0f6d1be`](https://github.com/actualbudget/actual/commit/0f6d1be4c03b86c44343a5fd08f9d1f9c89efe06) Merge branch 'ai/custom-theme-dual-prefs' of github.com:actualbudget/actual into ai/custom-theme-dual-prefs - [`c2f6ecf`](https://github.com/actualbudget/actual/commit/c2f6ecf3f4bea27ddc6d24b6ddeda9c08a1d2541) Enhance ThemeSettings and UI components by adding maxWidth styling for better responsiveness. This change ensures that buttons and columns adapt to the full width of their containers. ### 📊 Changes **8 files changed** (+230 additions, -62 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/e2e/settings.mobile.test.ts-snapshots/Mobile-Settings-checks-that-settings-page-can-be-opened-4-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/settings.test.ts-snapshots/Settings-checks-the-page-visuals-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/src/components/settings/Themes.tsx` (+157 -45) 📝 `packages/desktop-client/src/components/settings/UI.tsx` (+3 -1) 📝 `packages/desktop-client/src/style/theme.tsx` (+47 -10) 📝 `packages/loot-core/src/server/preferences/app.ts` (+13 -4) 📝 `packages/loot-core/src/types/prefs.ts` (+4 -2) ➕ `upcoming-release-notes/7145.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?--> Allow setting a different light/dark theme w/ custom themes. ## 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? --> 1. Enable custom themes 2. Use "system default" theme 3. Notice the "light" and "dark" selector now has a "custom theme" option 4. Set them ## 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 | 27 | 14.91 MB → 14.92 MB (+3.84 kB) | +0.03% loot-core | 1 | 5.83 MB → 5.83 MB (+378 B) | +0.01% api | 1 | 4.44 MB → 4.44 MB (+342 B) | +0.01% <details> <summary>View detailed bundle stats</summary> #### desktop-client **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 27 | 14.91 MB → 14.92 MB (+3.84 kB) | +0.03% <details> <summary>Changeset</summary> File | Δ | Size ---- | - | ---- `src/components/settings/Themes.tsx` | 📈 +3.26 kB (+94.61%) | 3.44 kB → 6.7 kB `src/style/theme.tsx` | 📈 +576 B (+12.24%) | 4.6 kB → 5.16 kB `src/components/settings/UI.tsx` | 📈 +21 B (+0.56%) | 3.65 kB → 3.67 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 | 9.56 MB → 9.57 MB (+3.84 kB) | +0.04% **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- static/js/indexeddb-main-thread-worker-e59fee74.js | 12.94 kB | 0% static/js/workbox-window.prod.es5.js | 5.64 kB | 0% static/js/ca.js | 187.93 kB | 0% static/js/da.js | 106.2 kB | 0% static/js/de.js | 179.89 kB | 0% static/js/en-GB.js | 7.18 kB | 0% static/js/en.js | 170.86 kB | 0% static/js/es.js | 174.37 kB | 0% static/js/fr.js | 179.41 kB | 0% static/js/it.js | 170.98 kB | 0% static/js/nb-NO.js | 156.8 kB | 0% static/js/nl.js | 113.06 kB | 0% static/js/pl.js | 89.65 kB | 0% static/js/pt-BR.js | 182.89 kB | 0% static/js/th.js | 181.58 kB | 0% static/js/uk.js | 215.35 kB | 0% static/js/resize-observer.js | 18.37 kB | 0% static/js/BackgroundImage.js | 120.54 kB | 0% static/js/ReportRouter.js | 1.16 MB | 0% static/js/narrow.js | 638.11 kB | 0% static/js/TransactionList.js | 106.48 kB | 0% static/js/wide.js | 164.15 kB | 0% static/js/AppliedFilters.js | 9.71 kB | 0% static/js/usePayeeRuleCounts.js | 11.57 kB | 0% static/js/useTransactionBatchActions.js | 13.23 kB | 0% static/js/FormulaEditor.js | 1.04 MB | 0% </div> </details> --- #### loot-core **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 5.83 MB → 5.83 MB (+378 B) | +0.01% <details> <summary>Changeset</summary> File | Δ | Size ---- | - | ---- `home/runner/work/actual/actual/packages/loot-core/src/server/preferences/app.ts` | 📈 +378 B (+6.63%) | 5.57 kB → 5.94 kB </details> <details> <summary>View detailed bundle breakdown</summary> <div> **Added** Asset | File Size | % Changed ----- | --------- | --------- kcab.worker.L2qhXNWs.js | 0 B → 5.83 MB (+5.83 MB) | - **Removed** Asset | File Size | % Changed ----- | --------- | --------- kcab.worker.BJdSX9Vk.js | 5.83 MB → 0 B (-5.83 MB) | -100% **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** No assets were unchanged </div> </details> --- #### api **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 4.44 MB → 4.44 MB (+342 B) | +0.01% <details> <summary>Changeset</summary> File | Δ | Size ---- | - | ---- `src/server/preferences/app.ts` | 📈 +342 B (+6.83%) | 4.89 kB → 5.22 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 ----- | --------- | --------- bundle.api.js | 4.44 MB → 4.44 MB (+342 B) | +0.01% **Smaller** No assets were smaller **Unchanged** No assets were unchanged </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-14 22:01:35 -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#21327