[Feature]: Add capability to change card background color based on value

[kaizersoje]

Is your feature request related to a problem?

No

Describe the solution you'd like

Since the chip card is quite small especially on a mobile, it would be good if the card background color can be set for light, switch, input_boolean, binary_sensor entities.

Describe alternatives you've considered

I know the background color can be changed using card_mod but prefer being available as option in the card editor.

Additional context

No response

[benchristian88]

why limit to just chips. Shouldn't all cards be able to change background colour in the ui? seems that still meets the design language

[piitaya]

The design is inspired by 7ahang’s work but the goal is not to replicate all the design on Mushroom 😅 That's not the priority to add this feature.

[kaizersoje]

@piitaya the issue is that it is quite hard to see the icon color in a chip card. Hence, why I think it might be better to have an option to set the color on the card instead of the icon.

[higbyk]

I use card_mod to change the background color on the Chip card and it's a really nice feature.

Actually came here to request exactly this, so other users could implement the same functionality as easily.

My current setup:

I have a Chips row that shows the location of each person. The text is blank if home or unknown, and the background uses the accent color if home, so it is easy to tell if the person is home or something is wrong with the sensor.

I would love to use colors more often with Chips - it's easier to see if motion is detected in an area if it's done with color than just a different icon.

Please consider adding this functionality if you have the time. The card_mod workaround appears to have a race condition that causes it not to render about 5% of the time, for me.

[cadavre]

@higbyk could you please share how you change card background for Mushroom cards? Do you do it per-card or apply some global style with card_mod?

I'm looking for a solution to add background-color to all mushroom cards.

[higbyk]

Hi @cadavre, I do it per-card since I need conditional styling. If you do NOT need conditional styling, you will just need to add a custom theme:

Add a file like my-custom-theme.yaml in /config/themes that contains something like this:

My Custom Theme:
  ha-card-background: "rgba(40,50,60,1)"

Then, call the service frontend.reload_themes and enable the theme by selecting your profile at the bottom of the sidebar and selecting your custom theme.

This will change the background for all cards, not just mushroom cards. You'll have to fiddle with it to get it to affect only mushroom cards. I highly recommend checking out other custom themes on github, like noctis, which demonstrates how card-mod can be used globally.

[shresth45]

Is this feature on the roadmap?