Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Find/Replace] [Dark Theme] Bad contrast on some buttons #2284

Open
Tracked by #2021
nlisker opened this issue Sep 17, 2024 · 3 comments
Open
Tracked by #2021

[Find/Replace] [Dark Theme] Bad contrast on some buttons #2284

nlisker opened this issue Sep 17, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@nlisker
Copy link

nlisker commented Sep 17, 2024

image

Except for the 3 colored icons, the gray on dark gray icons don't provide good contrast. Making them white-ish like the text, or colored like the other 3 are two satisfactory solutions I can think of.

@nlisker nlisker added the bug Something isn't working label Sep 17, 2024
@nlisker
Copy link
Author

nlisker commented Sep 17, 2024

Should be added to #2021?

@HeikoKlare
Copy link
Contributor

I agree that these icons are suboptimal. The problem is that icons cannot be themed, so we need to choose icons that fit for both light and dark theme(s). The chosen greyish color is the best trade-off we were able to find that made them usable in both light and dark theme. Using icon fonts might be a good solution, but we already tried that for the expand button (the ">" to open the replace bar) and faced some issues, which is why we moved back to ordinary icons/images.
Any proposals on how to improve this are highly appreciated.

@nlisker
Copy link
Author

nlisker commented Sep 18, 2024

Here are 3 possible solutions:

  1. Use icons like you do for the other 3. If it works there it will work here. What issues did you hit? Put the expand button aside for now, there are 6 buttons which can be solved this way.
  2. Use a contrasting color outline: dark fill with light outline or vice versa. The icons are small and delicate so an outline might make them more bulky, but it's a known technique.
  3. Use a non-grayscale color. Blue tends to be neutral in UI's. Find a blue hue that works well in both cases, probably a light blue or even desaturated cyan, just as examples.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants