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

WebUI: Darker colors for dark theme #21498

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

antanilol
Copy link

Set darker rows, hover and blue background colors for the WebUI dark theme

Set darker rows, hover and blue background colors
@luzpaz
Copy link
Contributor

luzpaz commented Oct 4, 2024

screenshot of before and after? Also what have you tested on ? (there are several platforms we need to take into consideration)

--color-background-popup: hsl(0deg 0% 20%);
--color-background-default: hsl(0deg 0% 25%);
--color-background-hover: hsl(26deg 50% 55%);
--color-background-default: hsl(0deg 0% 12%);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally i like the other 2 changes but this one makes "Alternating row colors" practically useless.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my screens (sRGB) the difference between rows is visible, I also tried also with 15% lightness value (instead of 12%) and it's still ok for me, but any value above 15% it starts to hurt my eyes. As it is now (25% L) is almost unusable for me, and the fact I cannot switch back to the light theme easily it worsen the problem

@thalieht thalieht added WebUI WebUI-related issues/changes Look and feel Affect UI "Look and feel" only without changing the logic labels Oct 4, 2024
@thalieht
Copy link
Contributor

thalieht commented Oct 4, 2024

screenshot of before and after?

Before, After:

@antanilol
Copy link
Author

In my screens the difference between rows is a little more visible than in that photo. Here are the screenshot

Before:
Screenshot 2024-10-04 185901
After:
Screenshot 2024-10-04 190202

@Pentaphon
Copy link

Before, After:

That is a huge improvement and this should be merged immediately for 5.0.1

@HanabishiRecca
Copy link
Contributor

HanabishiRecca commented Oct 7, 2024

In my screens the difference between rows is a little more visible

You have tweaked gamma or something in your system.
@thalieht screenshots are accurate.

Here is one from me:
image
The contrast between alternating rows is too low.

@antanilol
Copy link
Author

Ok, I have tried with firefox and it is like your screenshot, I didn't think that changing the browser only would change how the colors are displayed, my screenshot are from Edge, yours from Firefox I suppos. What a nightmare for designers lol

I don't know which is correct, but setting the css to --color-background-default: hsl(0deg 0% 15%); is good enough for both browsers I tried, can you try this too?

@HanabishiRecca
Copy link
Contributor

HanabishiRecca commented Oct 8, 2024

Hmm, yeah, Chromium does indeed have different colors here and resembles your screenshots.

Turns out we never actually set the backgound color for the page. So browsers simply pick arbitrary "dark" color. I think we need to fix that first.

@antanilol
Copy link
Author

Turns out we never actually set the backgound color for the page. So browsers simply pick arbitrary "dark" color. I think we need to fix that first.

Well, we can always change that later lol

Jokes aside, I don't know when the next minor release is planned, but for me this change it's really important since I really have a hard time using the web ui as it is now

@Pentaphon
Copy link

This should really come to a 5.0.1 or 5.0.x release. Any update?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Look and feel Affect UI "Look and feel" only without changing the logic WebUI WebUI-related issues/changes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants