Light Entity Icon Color

[joshuazd]

Describe the bug
The icon color of light entities is hard coded in the card when the light is on, instead of using variables. Additionally, the icon background is handled in a way that makes the icon hard to see when using a light theme and --ha-card-background is close to white.

To Reproduce
Steps to reproduce the behavior:

1. Use a theme with a light mode (the default Home Assistant theme works)
2. Create a bubble card for a light
3. Turn the light on

Expected behavior
The icon should respect the --state-light-active-color variable. I think the fallback order the tile card uses is --state-light-on-color -> --state-light-active-color -> --state-active-color. Handle the color of the icon background so that the icon is more visible

Screenshots
Current state:

Tile card example:

Informations (please complete the following information):

• OS: macOS/Windows 11/Android 14
• Browser/App: Firefox/HA Android app
• Bubble Card version: 2.1.1
• Home Assistant version: 2024.7.4

Thank you! 🍻

[ncodee]

+1. Also, the Card background doesn’t always reflect the actual Light colour, so this can be confusing and unreadable at times.

[samuel9554]

+1 I confirm the issue

[Ya7ya-mohammed]

Did you solve it please

[a-bianucci]

Same here - noticing that in styling sub buttons can't get the state active color

[Clooos]

Hi! I've added this issue to my to-do list. I'm working on a really complex issue (the editor slowness on some configs) but I hope it will be fixed soon so that I can move on to other ones 🤞

[oerix]

+1, hoping this will be fixed soon, thanks.