Theming specific cards

Configuration Frontend
1

Hi,

I would like my picture entity card to have no background and border.
This can be done with the card-mod integration, but the problem is that the background and border get rendered by the theme before the custom card CSS takes effect. This way the background and border flash briefly everytime the dashboard gets loaded.

I’m trying to change this with a custom theme instead, but I can’t seem to find how to theme individual cards. Currently I have ha-card in my custom theme file, but not sure if its possible to do this for individual cards.

For example this works:

    ha-card-background: "#282828"
    ha-card-border-color: "#282828"

But this doesn’t:

    ha-card.type-picture-background: "#FFFFFF00"
    ha-card.type-picture-border-color: "#FFFFFF00"

    ha-card-type-picture-background: "#FFFFFF00"
    ha-card-type-picture-border-color: "#FFFFFF00"

I tried many other variations aswell but none seem to work, it keeps showing the ha-card background color and border.

2

Not an integration, this is so called “frontend plugin”

Some cards (like Entities) allow to use an individual theme.

What do you mean?
If you simply have similar lines in a theme file
ha-card.type-picture-background
then this is not supported.

There are 3 ways of styling a particular card:

  1. Select an individual theme (like here) - only works when overriding STANDARD theme vars (like “ha-card-background”) is sufficient.
  2. Override standard css vars (like “ha-card-background”) for some card by card-mod (same remark as above).
  3. Define styles for a custom class like “my colored card” in a theme file (“card-mod theme”). Then add this class to some card by card-mod. Check for details in the huge card-mod-theme thread & card-mod Github.