WebUI: Darker colors for dark theme

[antanilol]

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

[luzpaz]

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

[thalieht]

screenshot of before and after?

Before, After:

[antanilol]

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

Before:

After:

[Pentaphon]

Before, After:

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

[HanabishiRecca]

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:

The contrast between alternating rows is too low.

[antanilol]

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]

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]

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]

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

[HanabishiRecca]

Now when #21914 is merged, I think this PR could be rebased and proceed.

I'm not sure about that brown highlight color though. Maybe instead of darkening the existing color, come up with a new one?

[skomerko]

@Chocobo1, @thalieht could this be approved and added in 5.0.3?

[thalieht]

@Chocobo1, @thalieht could this be approved and added in 5.0.3?

For me, the contrast of alternating row colors is still not good enough but i don't want to say anything because the problem could be on my side (e.g. monitor colors, and this wouldn't be the first time).

[antanilol]

For me, the contrast of alternating row colors is still not good enough but i don't want to say anything because the problem could be on my side (e.g. monitor colors, and this wouldn't be the first time).

I set it to be slightly lighter now
Edit: I set it back darker, even 1% lighter is too light for me. What do you all think?

[antanilol]

If we want to choose a different color for the rows on hover (instead of the current brown-ish) we can use this:
--color-background-hover: hsl(160deg 42% 22%);
Here is a preview with this color:

The current color is: