Matiss Janis Aboltins f5a72448bd [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 <noreply@anthropic.com>
2026-03-19 18:48:02 +00:00
2025-10-08 23:21:37 +01:00
2025-10-18 23:58:27 +01:00
2025-10-08 23:21:37 +01:00
2025-08-12 22:10:10 +01:00
2025-10-18 23:58:27 +01:00

Actualbudget

Getting Started

Actual is a local-first personal finance tool. It is 100% free and open-source, written in NodeJS, it has a synchronization element so that all your changes can move between devices without any heavy lifting.

If you are interested in contributing, or want to know how development works, see our contributing document we would love to have you.

Want to say thanks? Click the at the top of the page.

Installation

There are four ways to deploy Actual:

  1. One-click deployment via PikaPods (~1.40 $/month) - recommended for non-technical users
  2. Managed hosting via Fly.io (~1.50 $/month)
  3. Self-hosted by using a Docker image
  4. Local-only apps - downloadable Windows, Mac and Linux apps you can run on your device

Learn more in the installation instructions docs.

Ready to Start Budgeting?

Read about Envelope budgeting to know more about the idea behind Actual Budget.

Are you new to budgeting or want to start fresh?

Check out the community's Starting Fresh guide so you can quickly get up and running!

Are you migrating from other budgeting apps?

Check out the community's Migration guide to start jumping on the Actual Budget train!

Documentation

We have a wide range of documentation on how to use Actual, this is all available in our Community Documentation, this includes topics on Budgeting, Account Management, Tips & Tricks and some documentation for developers.

Contributing

Actual is a community driven product. Learn more about contributing to Actual.

Code structure

The Actual app is split up into a few packages:

  • loot-core - The core application that runs on any platform
  • desktop-client - The desktop UI
  • desktop-electron - The desktop app

More information on the project structure is available in our community documentation.

Feature Requests

Current feature requests can be seen here. Vote for your favorite requests by reacting 👍 to the top comment of the request.

To add new feature requests, open a new Issue of the "Feature Request" type.

Translation

Make Actual Budget accessible to more people by helping with the Internationalization of Actual. We are using a crowd sourcing tool to manage the translations, see our Weblate Project. Weblate proudly supports open-source software projects through their Libre plan.

Translation status

Repo Activity

Alt

Sponsors

Thanks to our wonderful sponsors who make Actual Budget possible!

Deploys by Netlify

Description
No description provided
Readme 989 MiB
Latest
2026-03-02 19:23:12 -06:00
Languages
TypeScript 90.2%
JavaScript 9.2%
Shell 0.2%
Dockerfile 0.1%
CSS 0.1%