mirror of
https://github.com/actualbudget/actual.git
synced 2026-03-21 06:58:47 -05:00
f5a72448bd
* [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>
Actual on the web
E2E tests
E2E (end-to-end) tests use Playwright. Running them requires an Actual server to be running either locally or on a remote server.
Functional
Running against the local server:
# Start the development server
yarn start
# Run against the local server (localhost:3001)
yarn e2e
Running against a remote server:
E2E_START_URL=http://my-remote-server.com yarn e2e
Visual regression
Visual regression tests (also known as screenshot tests) check that the visual appearance of the product has not regressed. Each environment has slightly different colors, fonts etc. Mac differs from Windows which differs from Linux. In order to have a stable test environment for visual comparisons - you must use a standartised docker container. This ensures that the tests are always ran in a consistent environment.
Prerequisites:
- Docker installed
Running against the local server
First start a dev instance:
HTTPS=true yarn start
or using the dev container:
HTTPS=true docker compose up --build
Note the network IP address and port the dev instance is listening on.
Next, navigate to the root of your project folder, run the standardized docker container, and launch the visual regression tests from within it.
Run via yarn:
# By default, this connects to https://localhost:3001
yarn vrt:docker
# To use a different ip and port:
yarn vrt:docker --e2e-start-url https://ip:port
# To update snapshots, use the following command:
yarn vrt:docker --e2e-start-url https://ip:port --update-snapshots
Run manually:
# Run docker container
docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.58.2-jammy /bin/bash
# If you receive an error such as "docker: invalid reference format", please instead use the following command:
docker run --rm --network host -v ${pwd}:/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.58.2-jammy /bin/bash
# Once inside the docker container, run the VRT tests: important - they MUST be ran against a HTTPS server.
# Use the ip and port noted earlier
E2E_START_URL=https://ip:port yarn vrt
# To update snapshots, use the following command:
E2E_START_URL=https://ip:port yarn vrt --update-snapshots
Running against a remote server
You can also run the tests against a remote server by passing the URL:
Run in standardized docker container:
E2E_START_URL=https://my-remote-server.com yarn vrt:docker
# Or pass in server URL as argument
yarn vrt:docker --e2e-start-url https://my-remote-server.com
Run locally:
E2E_START_URL=https://my-remote-server.com yarn vrt