web ui: Tweak colors in the dark theme to improve contrast ratio

[jorgelbg]

Some colors from the dark theme used in the query editor have a very low contrast ratio with the background.

For reference these are some of the colors from the promqlHighlighter with their respective contrast ratio calculated using the background color from boostrap-dark (#191D21):

#09885a // 3.78 poor
#a31515 // 2.16 very poor
#008080 // 3.55 poor
#008080 // 3.55 poor
#800000 // 1.55 very poor
#008080 // 3.55 poor
red // #FF0000 4.24 poor
#888' // 4.78 good

The low contrast was more noticeable with the red color(s) used for the label names.

The screenshots shown the result after applying the changes included in this PR. On top of the changes to the colors used in the editor I've also tweaked a couple of additional colors for checkboxes of the top and for the query stats.

before:

after:

Signed-off-by: Jorge Luis Betancourt Gonzalez jorge-luis.betancourt@trivago.com

[juliusv]

Thanks, yes that looks much better! Just a nit comment.

[juliusv]

Oh, I also noticed that parentheses are very dark in dark mode when the cursor is currently over them:

[jorgelbg]

Oh, I also noticed that parentheses are very dark in dark mode when the cursor is currently over them:

should be fixed now, when the input component was focused it applied an additional style via a .cm-focused .cm-matchingBracket rule (which seems to be taken the color from browser/OS) and it was applied both in light and dark mode. I've applied the same style (when in dark mode) for both the focused and non focused states (looks like this now):

[juliusv]

Nice. But in dark mode, the cursor is now very low contrast in comparison to the bright background of the parentheses it is on, making it hard to spot. How about making that background color just a tad less bright, like the #767676 one we have for selections?

[jorgelbg]

true, with #767676 the contrast ratio between the highlighted text and the background is a bit too low (not critical IMHO considering that this not really for reading, but more for highlighting a position within the query). We could also make the text color completely white or black to make it easier to read. What do you think?

[juliusv]

That's a good point. Looking at how it works for the light mode and playing with that, it would be nice to do the equivalent of that for dark mode:

• Don't override the text color at all (keep it at its default white-ish tone), and the boldness still gets added anyway.
• Set the background color to something subtle relative to the black background, like #616161.

So basically remove the color line above and do backgroundColor: #616161. What do you think?

[jorgelbg]

Indeed, removing the color and using the new background color provides a good enough contrast in this case.

[juliusv]

👍 Nice, thanks!

[juliusv]

Whoops, we just found out that this caused #11568. We are accidentally setting the text color to black on black here. Will send a fix.