Text Color for Light Slider

[Swimmer71]

Hi,
based on the slate theme I created a new one. So far so good, but when I pull the slider for brightness for lights entities or for covers, I can not see the actual brightness because it seems to be white text color on white background. The text color seems to be acording to “primary-text-color”, which is white in my case. Is there a seperate color entry for this part here? And if not for the text, maybe for the background?

Here a screenshot from my theme:

Any idea to solve this issue?
Of course I could change the “primary-text-color” but I want to keep white for the other texts…

[mrhand]

I’m seeing the same thing, seems related to the recent change to use material web components: Replace polymer paper-slider by silamon · Pull Request #18168 · home-assistant/frontend · GitHub

I’m also using the slate theme and digging in to find the new vars…

[mrhand]

Found it! Need to add clear-background-color to the theme otherwise the default is #FFFFFF and why it’s showing up as all white.

Add clear-background-color for material web sliders

[Swimmer71]

@mrhand

clear-background-color

Great, thanks a lot. It works

[CptKalibak]

Hi. And thanks for the info. At first I couldn’t figure out where and how to put clear-background-color in my themes.yaml file. After looking at your post on GitHub I added:

clear-background-color: “#212121”

In the file and this works like a charm! Thanks again.

[Swimmer71]

Hi there, I have a new similar issue when using barcode in Tuya integration. I only see white barcode on white background, so no barcode visible. In standard theme it is visible. I found out, that the barcode seems to follow the “primary-text-color”, but I want to use white for that. So what is the theme-entry for the barcode background?

When change “primary-text-color” to blue: