Add theming to charts and hence allowing custom themes on charts#6909
Merged
matt-fidd merged 5 commits intoactualbudget:masterfrom Feb 17, 2026
Merged
Add theming to charts and hence allowing custom themes on charts#6909matt-fidd merged 5 commits intoactualbudget:masterfrom
matt-fidd merged 5 commits intoactualbudget:masterfrom
Conversation
actual-github-bot
bot
changed the title
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
👋 Hello contributor! We would love to review your PR! Before we can do that, please make sure:
We do this to reduce the TOIL the core contributor team has to go through for each PR and to allow for speedy reviews and merges. For more information, please see our Contributing Guide. |
Contributor
📝 WalkthroughWalkthroughReplaces explicit chart color arrays with a CSS-variable-based qualitative palette and adds nine new qualitative color tokens across the base palette and all theme files; chart-theme removes other explicit scales (including grayscale) and now references CSS variables. Adds a release note entry. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
|
🧠 Learnings used✅ Actions performedReview triggered.
|
actual-github-bot
bot
changed the title
Member
|
Looking at the codebase quickly, unless I'm mistaken only the qualitative colours are actually used. Maybe it's time to strip out the ones we don't use and rename qualitative to something more obvious for custom themers. |
Contributor
Author
Hi Matt, Qualitative are the ones currently used. I believe that the usage of the heat map is at least quite useful for future use cases. I am happy to remove the rest if that is ok with you. I agree that once theming is there the other palettes are useless. |
Member
I'd rather just keep the ones in use, we shouldn't just keep bloat around in case it's useful in the future. Would you be able to strip out the unused ones and just keep the qualitative ones please? |
✅ Deploy Preview for actualbudget-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for actualbudget-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
Author
Hi Matt, Done. Please check. |
matt-fidd
reviewed
Feb 14, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This package contains modified files that add theme-aware chart colors to Actual Budget. Charts will now automatically respond to theme changes (Light, Dark, Midnight, and custom themes). Chart use colors defined in the centralized palette system. Main chart colors are defined once in
palette.tsand referenced by all themes. Chart-theme is updated use the CSS global variables to provide the color scheme to the different chart component allowing the full app to follow one theme.How it works
--color-chartQual1)The main palette include definition for the following color shades and the main themes exports the same colors from the palette. Custom themes can modify those colors to display different chart colors.
chartQual1throughchartQual9Edit ** Removed below color scale because they are unused.
chartGray1throughchartGray4chartHeat1throughchartHeat5chartWarm1throughchartWarm5chartCool1throughchartCool5chartRed1throughchartRed5chartBlue1throughchartBlue5chartGreen1throughchartGreen5Example for testing add the below additional variables to any custom theme.
Bundle Stats
View detailed bundle stats
desktop-client
Total
Changeset
src/style/palette.tssrc/style/themes/development.tssrc/style/themes/dark.tssrc/style/themes/light.tssrc/style/themes/midnight.tssrc/components/reports/chart-theme.tsView detailed bundle breakdown
Added
No assets were added
Removed
No assets were removed
Bigger
Smaller
No assets were smaller
Unchanged
loot-core
Total
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
api
Total
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