[BasicUI] More contrast in dark mode

[dilyanpalauzov]

I use openHAB 3.4 and Basic UI in Dark mode with Firefox. This is a screenshot at the top level (outside of any groups)

This is a screen shot of a group:

To be able easily to perceive the text the contrast between text color and text background shall be high. In the first screenshot the contrast is low. In the second screenshot the text is lighter and therefore the contrast is better. In the sitemap file I have no settings which change the color on that particular items.

The second screenshot shows (on the left) a switch and on the right

Switch item=rd_manual mappings=[ON="Ръчно", OFF="Автоматично"] labelcolor=[OFF="green", ON="red"]
Setpoint item=rd_on_watts minValue=400 maxValue=3500 step=100

The UP and DOWN buttons, and the ON state (Ръчно) are displayed with black text on dark gray background. This has very low contrast and therefore is hard to read.

• In the main sitemap (first screenshot, outside of any group) increase the contrast between text color and text background
• In the Setpoint and Switch mappings=[ON="…", OFF="…"] items (second screenshot right half), and Switch without mapping (second screenshot left half) increase the contrast between text and background for the buttons.

[lolodomo]

I will try to customize the colors.

[lolodomo]

• In the main sitemap (first screenshot, outside of any group) increase the contrast between text color and text background

I do not understand what is this case ? Is it outside any group or outside any frame ?
Can you provide a very small sitemap showing that ?
I have good contrast in my main sitemap page.
Maybe you are using an unexpected sitemap feature ???

[dilyanpalauzov]

Sample zz.sitemap:

sitemap zz label="A3" {
    Text item=inv1_Battery_capacity
    Group item=r1_power label="1 Реле" visibility=[r1_online==OPEN] valuecolor=[r1_color=="green"="green", r1_color=="lime"="lime", r1_color=="red"="red", r1_color=="maroon"="maroon"] {
      Text item=inv1_Battery_capacity
    }
}

Main view

View of the group

In the first screenshot the contrast is lower than on the second screenshot.

I do not understand what is this case ? Is it outside any group or outside any frame ?

It is outside any group and I do not have frames.

[dilyanpalauzov]

I do not use color picket and rollerbind. But for me it seems that dark blue on black background is low contrast.

[dilyanpalauzov]

As far as presenting Groups is concerned, I realize now that in Light (“Default”) mode BasicUI shows a white background, when displaying Groups, and light gray background when not displaying groups (but top-level items). This might be the reason for the significantly lower contrast for the “main” items in dark mode.

[lolodomo]

I think it is better now with the PR I submitted:

[dilyanpalauzov]

Yes, it is better. I assume the above excerpt is for top-level items (not Groups, which were good).

Are the toggles now also better in dark mode?

[lolodomo]

I just updated the switch toggle when in dark mode, look at the capture before/after in the PR.

[lolodomo]

Yes, it is better. I assume the above excerpt is for top-level items (not Groups, which were good).

The changes apply to any frame in the main page and any group or sub-page opened from the main page.
I have not yet checked the particular case of the main page without any frame, which is the one apparently with less contrast if I follow you.

[lolodomo]

The background is not the same when there are frames or not.

Without frames:

With frames:

I agree that the contrast is low for texts when in dark mode and no frames. Looks more acceptable when in bright mode.
I am not sure the problem is only the background color because if the background is darker, it should look more contrasted and we notice the reverse. The problem could then be rather the text color, maybe it is not the same white or one is in bold and not the other. I will have to investigate more.

[lolodomo]

By inspecting the page with browser tools, I can see that the color of "Setpoint Temp" is rgb(97, 97, 97) in one case and rgb(192, 192, 192) in the other case. So the "white" is not the same in both cases and it explains the difference of contrast.

[lolodomo]

Explanation found: the default color set at the highest level (body level) is "mdl-color-text--grey-700" and it is the same whatever the theme.
When there is no frame, there is no other color for texts set deeper in the document and this default color is then used. It is a grey, the same for bright and dark themes.
I have to find the best way to fix that. Should not be too much difficult.

[lolodomo]

With the proposed fix:

[lolodomo]

I close this issue, everything was covered by #1834 or #1842.

[lolodomo]

I see now that the slider widget should be updated too

[dilyanpalauzov]

I see now that the slider widget should be updated too

Shall this ticket be reopened?

[lolodomo]

No.
But a new specific one could be opened.
If not, I have it in mind, so don't matter.