[Feedback] Custom themes #2796

Open
opened 2026-02-28 20:28:23 -06:00 by GiteaMirror · 19 comments
Owner

Originally created by @MatissJanis on GitHub (Jan 8, 2026).

TODO

  • fetch theme catalog json directly from github via an async fetch call (to allow us to quickly remove themes in case it becomes buggy or else) - #6681
  • surface error message if theme validation fails - #6689
  • update demo theme screenshot
  • can we somehow automate capturing screenshots? so they have consistent data etc.
  • replace screenshots with color palette - #6722
  • add a few more themes
  • allow defining "mode" for the theme - is it "overrides" only? In which case: what should be the "base theme" (light? dark?). Or is the theme a "full" one? In which case there should not be any default variables. Need to think more about this.
  • inheritance in custom themes? Allow using CSS variables? Something to think about - #7018
  • housekeeping: reduce amount of variables; standartisation; etc
Originally created by @MatissJanis on GitHub (Jan 8, 2026). TODO - [x] fetch theme catalog json directly from github via an async fetch call (to allow us to quickly remove themes in case it becomes buggy or else) - #6681 - [x] surface error message if theme validation fails - #6689 - [x] update demo theme screenshot - [x] ~can we somehow automate capturing screenshots? so they have consistent data etc.~ - [x] replace screenshots with color palette - #6722 - [x] add a few more themes - [ ] allow defining "mode" for the theme - is it "overrides" only? In which case: what should be the "base theme" (light? dark?). Or is the theme a "full" one? In which case there should not be any default variables. Need to think more about this. - [x] inheritance in custom themes? Allow using CSS variables? Something to think about - #7018 - [ ] housekeeping: reduce amount of variables; standartisation; etc
GiteaMirror added the feedback label 2026-02-28 20:28:23 -06:00
Author
Owner

@Juulz commented on GitHub (Jan 15, 2026):

Update: added to PR #6696

Here's a new dark theme. Juulz/simple-dark

It is based on the Discourse theme Sam's Simple Dark. Here it is in my guild forum:

Image

Here's my take:

Image

PS - The three themes I have written are complete - not just overrides (although I did build them that way). They could be copy-pasted as a base.

@Juulz commented on GitHub (Jan 15, 2026): Update: added to PR #6696 Here's a new dark theme. [Juulz/simple-dark](https://github.com/Juulz/simple-dark) It is based on the Discourse theme Sam's Simple Dark. Here it is in my guild forum: <img width="1247" height="345" alt="Image" src="https://github.com/user-attachments/assets/526979b0-d636-453e-ac18-fb31911d4cff" /> Here's my take: <img width="1819" height="1042" alt="Image" src="https://github.com/user-attachments/assets/29caeb95-e8ff-452d-8be0-ecca661727f3" /> PS - The three themes I have written are complete - not just overrides (although I did build them that way). They could be copy-pasted as a base.
Author
Owner

@Juulz commented on GitHub (Jan 18, 2026):

Next up, another light theme with a 1970s palette.

I also added --color-sidebarBudgetName to all my themes.

@Juulz commented on GitHub (Jan 18, 2026): Next up, another light theme with a 1970s palette. I also added `--color-sidebarBudgetName` to all my themes.
Author
Owner

@MikesGlitch commented on GitHub (Jan 18, 2026):

Feedback:

  • I think the screenshots are too small to show anything meaningful - I can barely see them. What if we supported a larger image and allow it to be expanded/opened via an image viewer modal (or some such)?

  • Edge currently has broken images due to Content Security Policy directive issues. I wonder if this will affect people running on Docker/pikapods etc.

Image
@MikesGlitch commented on GitHub (Jan 18, 2026): Feedback: - I think the screenshots are too small to show anything meaningful - I can barely see them. What if we supported a larger image and allow it to be expanded/opened via an image viewer modal (or some such)? - Edge currently has broken images due to Content Security Policy directive issues. I wonder if this will affect people running on Docker/pikapods etc. <img width="529" height="466" alt="Image" src="https://github.com/user-attachments/assets/877819da-e503-47f7-a633-87b1967aa8ed" />
Author
Owner

@MatissJanis commented on GitHub (Jan 18, 2026):

The screenshots are tricky indeed.. maybe we just remove them entirely? Just clicking through the themes might be sufficient. WDYT?

@MatissJanis commented on GitHub (Jan 18, 2026): The screenshots are tricky indeed.. maybe we just remove them entirely? Just clicking through the themes _might_ be sufficient. WDYT?
Author
Owner

@MikesGlitch commented on GitHub (Jan 18, 2026):

The screenshots are tricky indeed.. maybe we just remove them entirely? Just clicking through the themes might be sufficient. WDYT?

Was just thinking there, someone with bad intentions could upload any image they want.

I think we should lock it down at the very least, but as you say, it might be better to remove them. If we did remove them, maybe we could add a colour palate to the catalogue so users will know what the theme colours are.

@MikesGlitch commented on GitHub (Jan 18, 2026): > The screenshots are tricky indeed.. maybe we just remove them entirely? Just clicking through the themes _might_ be sufficient. WDYT? Was just thinking there, someone with bad intentions could upload any image they want. I think we should lock it down at the very least, but as you say, it might be better to remove them. If we did remove them, maybe we could add a colour palate to the catalogue so users will know what the theme colours are.
Author
Owner

@Juulz commented on GitHub (Jan 18, 2026):

I've been putting a full image in the readme file. People could click through to see that.

@Juulz commented on GitHub (Jan 18, 2026): I've been putting a full image in the readme file. People could click through to see that.
Author
Owner

@Juulz commented on GitHub (Jan 19, 2026):

This is my favorite light one. I'm using it on my own budget on edge. Let me know if you want a PR for it.

1970 Theme

Juulz/1970-theme

Image
@Juulz commented on GitHub (Jan 19, 2026): This is my favorite light one. I'm using it on my own budget on edge. Let me know if you want a PR for it. 1970 Theme Juulz/1970-theme <img width="1821" height="1059" alt="Image" src="https://github.com/user-attachments/assets/d5aea25d-9bc0-4f0e-a20f-00a72d59f1ef" />
Author
Owner

@MatissJanis commented on GitHub (Jan 19, 2026):

Keep sending PRs for themes @Juulz . We'll be happy to approve and merge :)

@MatissJanis commented on GitHub (Jan 19, 2026): Keep sending PRs for themes @Juulz . We'll be happy to approve and merge :)
Author
Owner

@youngcw commented on GitHub (Jan 23, 2026):

It would be nice if themes could set the colors used by the custom report. (the bar charts, donut charts, etc). Maybe they can already but none that Ive tried have done that yet

@youngcw commented on GitHub (Jan 23, 2026): It would be nice if themes could set the colors used by the custom report. (the bar charts, donut charts, etc). Maybe they can already but none that Ive tried have done that yet
Author
Owner

@MikesGlitch commented on GitHub (Jan 23, 2026):

I think we need a consistent naming strategy & consistent defaults with these color variables. At a glance a lot of the one's i'd expect to be used aren't being used.

E.g. color-numberNegative is being used for most negative numbers, but not the ones on the budget screen. If the budget screen variables for negative hasn't been provided, I'd expect them to default to the color-numberNegative.

For now it's fine because it's experimental, but before we release we probably should do some housekeeping and come up with naming patterns for global colors vs screen specific colors etc.

@MikesGlitch commented on GitHub (Jan 23, 2026): I think we need a consistent naming strategy & consistent defaults with these color variables. At a glance a lot of the one's i'd expect to be used aren't being used. E.g. color-numberNegative is being used for most negative numbers, but not the ones on the budget screen. If the budget screen variables for negative hasn't been provided, I'd expect them to default to the color-numberNegative. For now it's fine because it's experimental, but before we release we probably should do some housekeeping and come up with naming patterns for global colors vs screen specific colors etc.
Author
Owner

@matt-fidd commented on GitHub (Jan 23, 2026):

I think we need a consistent naming strategy & consistent defaults with these color variables. At a glance a lot of the one's i'd expect to be used aren't being used.

E.g. color-numberNegative is being used for most negative numbers, but not the ones on the budget screen. If the budget screen variables for negative hasn't been provided, I'd expect them to default to the color-numberNegative.

For now it's fine because it's experimental, but before we release we probably should do some housekeeping and come up with naming patterns for global colors vs screen specific colors etc.

The number colours were meant to be the start of that, and do inherit in our code. Custom themes do not support inheritance at the moment as they just change the compiled colour variables after the JS side for inheritance has been done. Agreed that it would be nice to add that, or change the way that we compile the CSS colours to use inheritance. Eg. actual could spit out:

{
  --color-numberPositive: "#3ebd93"
  --color-budgetNumberPositive: var(--color-numberPositive)
}

which would make the custom themes inherit as expected with no changes on that front

@matt-fidd commented on GitHub (Jan 23, 2026): > I think we need a consistent naming strategy & consistent defaults with these color variables. At a glance a lot of the one's i'd expect to be used aren't being used. > > E.g. color-numberNegative is being used for most negative numbers, but not the ones on the budget screen. If the budget screen variables for negative hasn't been provided, I'd expect them to default to the color-numberNegative. > > For now it's fine because it's experimental, but before we release we probably should do some housekeeping and come up with naming patterns for global colors vs screen specific colors etc. The number colours were meant to be the start of that, and do inherit in our code. Custom themes do not support inheritance at the moment as they just change the compiled colour variables after the JS side for inheritance has been done. Agreed that it would be nice to add that, or change the way that we compile the CSS colours to use inheritance. Eg. actual could spit out: ```css { --color-numberPositive: "#3ebd93" --color-budgetNumberPositive: var(--color-numberPositive) } ``` which would make the custom themes inherit as expected with no changes on that front
Author
Owner

@MatissJanis commented on GitHub (Jan 25, 2026):

Inheritance in custom themes is tricky. We have to be careful not to allow malicious payloads in CSS variables. Something to add to the list and think about though!

Re: housekeeping. Yes, for sure. I also strongly believe we have WAY TOO MANY color variables and should reduce the list. Plus move it from TS to an actual .css file. Adding to the list

@MatissJanis commented on GitHub (Jan 25, 2026): Inheritance in custom themes is tricky. We have to be careful not to allow malicious payloads in CSS variables. Something to add to the list and think about though! Re: housekeeping. Yes, for sure. I also strongly believe we have WAY TOO MANY color variables and should reduce the list. Plus move it from TS to an actual `.css` file. Adding to the list
Author
Owner

@Mansarde commented on GitHub (Feb 2, 2026):

As it is now, I have some customizations added on top of the midnight theme.
But when I try out other themes just to take a look and then want to switch back to the midnight theme + my customizations, the pasted CSS is gone.

That means currently I'd have to keep the adjustments stored somewhere separately and always remember to re-apply them.
So it would be cool if a pasted CSS could be saved to the list. A local-only entry, so to speak.

@Mansarde commented on GitHub (Feb 2, 2026): As it is now, I have some customizations added on top of the midnight theme. But when I try out other themes just to take a look and then want to switch back to the midnight theme + my customizations, the pasted CSS is gone. That means currently I'd have to keep the adjustments stored somewhere separately and always remember to re-apply them. So it would be cool if a pasted CSS could be saved to the list. A local-only entry, so to speak.
Author
Owner

@sexyskinnybitch commented on GitHub (Feb 12, 2026):

Are themes supposed to be the same across all devices? It doesn't seem to sync the setting.

@sexyskinnybitch commented on GitHub (Feb 12, 2026): Are themes supposed to be the same across all devices? It doesn't seem to sync the setting.
Author
Owner

@youngcw commented on GitHub (Feb 12, 2026):

Are themes supposed to be the same across all devices? It doesn't seem to sync the setting.

No, they are per device

@youngcw commented on GitHub (Feb 12, 2026): > Are themes supposed to be the same across all devices? It doesn't seem to sync the setting. No, they are per device
Author
Owner

@matt-fidd commented on GitHub (Feb 17, 2026):

It would be nice if themes could set the colors used by the custom report. (the bar charts, donut charts, etc). Maybe they can already but none that Ive tried have done that yet

Implemented in https://github.com/actualbudget/actual/pull/6909

@matt-fidd commented on GitHub (Feb 17, 2026): > It would be nice if themes could set the colors used by the custom report. (the bar charts, donut charts, etc). Maybe they can already but none that Ive tried have done that yet Implemented in https://github.com/actualbudget/actual/pull/6909
Author
Owner

@timo-wilson commented on GitHub (Feb 18, 2026):

It would be nice to be able to theme the upcoming scheduled items in an account. At least maybe the row attributes (row background, text color, etc). With them just having the font being italics it is harder to actually distinguish them from entered items.

@timo-wilson commented on GitHub (Feb 18, 2026): It would be nice to be able to theme the upcoming scheduled items in an account. At least maybe the row attributes (row background, text color, etc). With them just having the font being italics it is harder to actually distinguish them from entered items.
Author
Owner

@Juulz commented on GitHub (Feb 18, 2026):

It would be nice to be able to theme the upcoming scheduled items in an account. At least maybe the row attributes (row background, text color, etc). With them just having the font being italics it is harder to actually distinguish them from entered items.

Their text is tableTextInactive. They also have the Upcoming category.

Here I made them pink!

Image
@Juulz commented on GitHub (Feb 18, 2026): > It would be nice to be able to theme the upcoming scheduled items in an account. At least maybe the row attributes (row background, text color, etc). With them just having the font being italics it is harder to actually distinguish them from entered items. Their text is tableTextInactive. They also have the Upcoming category. Here I made them pink! <img width="981" height="66" alt="Image" src="https://github.com/user-attachments/assets/9d73162b-8a9e-4793-b790-7ab89eed774f" />
Author
Owner

@timo-wilson commented on GitHub (Feb 18, 2026):

It would be nice to be able to theme the upcoming scheduled items in an account. At least maybe the row attributes (row background, text color, etc). With them just having the font being italics it is harder to actually distinguish them from entered items.

Their text is tableTextInactive. They also have the Upcoming category.

Here I made them pink!
Image

Thanks, for pointing that out. It still would be nice to change the attributes of the "inactive" table row like the background color but that maybe a bit harder and this text setting does help.

@timo-wilson commented on GitHub (Feb 18, 2026): > > It would be nice to be able to theme the upcoming scheduled items in an account. At least maybe the row attributes (row background, text color, etc). With them just having the font being italics it is harder to actually distinguish them from entered items. > > Their text is tableTextInactive. They also have the Upcoming category. > > Here I made them pink! > <img alt="Image" width="981" height="66" src="https://private-user-images.githubusercontent.com/29179457/551668003-9d73162b-8a9e-4793-b790-7ab89eed774f.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzE0NTMxNDMsIm5iZiI6MTc3MTQ1Mjg0MywicGF0aCI6Ii8yOTE3OTQ1Ny81NTE2NjgwMDMtOWQ3MzE2MmItOGE5ZS00NzkzLWI3OTAtN2FiODllZWQ3NzRmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjAyMTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwMjE4VDIyMTQwM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk3NmVjMWViMzYwMjhiMzlkYzE2MWE0MmE2NDJkYjM4MDA2NTJjYjhjYWY4M2E5NTU2YzZmMjc4NTk1OGFmNGEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.YdZun9G9WJVhl_DsDQYsK1CLbEwSVPO9qOMa07C11lA"> Thanks, for pointing that out. It still would be nice to change the attributes of the "inactive" table row like the background color but that maybe a bit harder and this text setting does help.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#2796