github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-05-07 12:28:57 -05:00
Code Issues 1.6k Packages Projects Releases 55 Wiki Activity

[GH-ISSUE #5547] [Bug]: Tag names are difficult to read in dark mode when using bright background colors #28177

New Issue
Closed
opened 2026-04-18 04:50:22 -05:00 by GiteaMirror · 8 comments
GiteaMirror commented 2026-04-18 04:50:22 -05:00
Owner
Copy Link

Originally created by @jce-zz on GitHub (Aug 12, 2025).
Original GitHub issue: https://github.com/actualbudget/actual/issues/5547

Verified issue does not already exist?

  • I have searched and found no existing issue

What happened?

When creating tags using bright background colors while the app is in dark mode, the tag name is very difficult to read since it always remains displayed in white color.

This issue is apparent everywhere where tags are displayed: on the tag management screen, in the transaction list, etc.

Most likely there is some logic missing that switches the foreground color to "black" depending on the brightness of the background color.

How can we reproduce the issue?

Create a tag with a bright background color when using Actual in dark mode.

Where are you hosting Actual?

Docker

What browsers are you seeing the problem on?

Microsoft Edge

Operating System

Windows 11

Originally created by @jce-zz on GitHub (Aug 12, 2025). Original GitHub issue: https://github.com/actualbudget/actual/issues/5547 ### Verified issue does not already exist? - [x] I have searched and found no existing issue ### What happened? When creating tags using bright background colors while the app is in dark mode, the tag name is very difficult to read since it always remains displayed in white color. This issue is apparent everywhere where tags are displayed: on the tag management screen, in the transaction list, etc. Most likely there is some logic missing that switches the foreground color to "black" depending on the brightness of the background color. ### How can we reproduce the issue? Create a tag with a bright background color when using Actual in dark mode. ### Where are you hosting Actual? Docker ### What browsers are you seeing the problem on? Microsoft Edge ### Operating System Windows 11
GiteaMirror added the user interfacebug labels 2026-04-18 04:50:22 -05:00
GiteaMirror commented 2026-04-18 04:50:25 -05:00
Author
Owner
Copy Link

@jce-zz commented on GitHub (Aug 12, 2025):

Image
<!-- gh-comment-id:3180433259 --> @jce-zz commented on GitHub (Aug 12, 2025): <img width="469" height="410" alt="Image" src="https://github.com/user-attachments/assets/051b0106-049c-4a23-b10d-92a57985b92a" />
GiteaMirror commented 2026-04-18 04:50:26 -05:00
Author
Owner
Copy Link

@Juulz commented on GitHub (Aug 16, 2025):

Why can't they be exactly the same as in light mode? IOW, why are they different?

<!-- gh-comment-id:3193857362 --> @Juulz commented on GitHub (Aug 16, 2025): Why can't they be exactly the same as in light mode? IOW, why are they different?
GiteaMirror commented 2026-04-18 04:50:27 -05:00
Author
Owner
Copy Link

@jce-zz commented on GitHub (Aug 17, 2025):

Yes, I think it should actually be the same. However, it seems that in dark mode there's some global override on font color that forces everything to a white or light gray. I once found similar problems in another OSS tool als when they introduced colored tags. ;-) I think there simply needs to be added an exception to font color in case of tags so that the actual color algorithm can do its work. Or somehting like this...

<!-- gh-comment-id:3194587164 --> @jce-zz commented on GitHub (Aug 17, 2025): Yes, I think it should actually be the same. However, it seems that in dark mode there's some global override on font color that forces everything to a white or light gray. I once found similar problems in another OSS tool als when they introduced colored tags. ;-) I think there simply needs to be added an exception to font color in case of tags so that the actual color algorithm can do its work. Or somehting like this...
GiteaMirror commented 2026-04-18 04:50:27 -05:00
Author
Owner
Copy Link

@seabeeberry commented on GitHub (Aug 17, 2025):

I found the part of the codebase that influences this and changed it to look the same as in light mode, however, in my opinion the color scheme of the light mode doesn't fit the dark mode and it's still kind of hard to read.

Image

What do you think of the following? I just made the text color a bit darker. I will open up the PR for it if y'all like it.

Image

Edit: Of course, this makes the dark tag colors harder to read now... Not yet ideal.

<!-- gh-comment-id:3194638933 --> @seabeeberry commented on GitHub (Aug 17, 2025): I found the part of the codebase that influences this and changed it to look the same as in light mode, however, in my opinion the color scheme of the light mode doesn't fit the dark mode and it's still kind of hard to read. <img width="2094" height="520" alt="Image" src="https://github.com/user-attachments/assets/b8248418-d2c7-4010-9a9b-fcbbc6385985" /> What do you think of the following? I just made the text color a bit darker. I will open up the PR for it if y'all like it. <img width="2102" height="516" alt="Image" src="https://github.com/user-attachments/assets/0e1e7957-f8d0-485a-abe3-538a66b5e5d7" /> Edit: Of course, this makes the dark tag colors harder to read now... Not yet ideal.
GiteaMirror commented 2026-04-18 04:50:29 -05:00
Author
Owner
Copy Link

@seabeeberry commented on GitHub (Aug 17, 2025):

If we set beforehand which colors we deem bright, we can put in a condition to make the text color dark for brightly colored tags and if the color is not bright, leave the text color white. Given we deem the four colors from the initial screenshot as bright, leaving the rest with the white font color, it would look like this:

Image
<!-- gh-comment-id:3194662256 --> @seabeeberry commented on GitHub (Aug 17, 2025): If we set beforehand which colors we deem bright, we can put in a condition to make the text color dark for brightly colored tags and if the color is not bright, leave the text color white. Given we deem the four colors from the initial screenshot as bright, leaving the rest with the white font color, it would look like this: <img width="2076" height="1374" alt="Image" src="https://github.com/user-attachments/assets/4de9f66c-28c7-4cd9-b0b9-d80f9e729a94" />
GiteaMirror commented 2026-04-18 04:50:29 -05:00
Author
Owner
Copy Link

@pogman-code commented on GitHub (Aug 18, 2025):

What do you think of adding something like this? https://24ways.org/2010/calculating-color-contrast
See also: https://www.w3.org/TR/AERT/#color-contrast

<!-- gh-comment-id:3195642782 --> @pogman-code commented on GitHub (Aug 18, 2025): What do you think of adding something like this? https://24ways.org/2010/calculating-color-contrast See also: https://www.w3.org/TR/AERT/#color-contrast
GiteaMirror commented 2026-04-18 04:50:30 -05:00
Author
Owner
Copy Link

@pogman-code commented on GitHub (Aug 18, 2025):

I have opened a PR to address this issue but I can close it if you have a better idea :)

Right now it is still a WIP since it only address dark mode, hopefully we can come up with something for light mode readability.

<!-- gh-comment-id:3195887638 --> @pogman-code commented on GitHub (Aug 18, 2025): I have opened a PR to address this issue but I can close it if you have a better idea :) Right now it is still a WIP since it only address dark mode, hopefully we can come up with something for light mode readability.
GiteaMirror commented 2026-04-18 04:50:30 -05:00
Author
Owner
Copy Link

@Juulz commented on GitHub (Aug 18, 2025):

What do you think of adding something like this? https://24ways.org/2010/calculating-color-contrast See also: https://www.w3.org/TR/AERT/#color-contrast

YES! This is exactly the right thing to do!

<!-- gh-comment-id:3196160334 --> @Juulz commented on GitHub (Aug 18, 2025): > What do you think of adding something like this? https://24ways.org/2010/calculating-color-contrast See also: https://www.w3.org/TR/AERT/#color-contrast YES! This is exactly the right thing to do!
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label bug user interface
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#28177
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?