Themes for tile card and other cards

[jm-cook]

I look forward to the day when I can use a theme to control the appearance of the tile card like you can with the mushroom custom cards, without all that messing around with card-mod.

I don’t like using card-mod because it doesn’t always work properly when casting, requires some intimate knowledge of css and using developer tools on the front end. I haven’t found a good way, or any way, to configure a theme for tiles without using card-mod. I think of card-mod as being a way to achieve some look, font, colour or whatever, while we wait for that feature to be standard.

Here is a mushroom card with user assigned font sizes and colour through my own theme for mushroom:

With these settings in the mushroom theme:

    # Card
    mush-card-primary-font-size: 130%
    mush-card-secondary-font-size: 300%
    mush-card-primary-font-weight: 500
    mush-card-secondary-font-weight: 900
    mush-card-primary-line-height: 110%
    mush-card-secondary-line-height: 110%
    mush-card-primary-color: grey
    mush-card-border-radius: 18px
    # Icon
    mush-icon-size: 30px

It doesn't seem to be possible to achieve the same with a tile card atm. This is the nearest I can get after resorting to card-mod:

(In addition IMO all standard cards could benefit from a common style option)

[jm-cook]

I had a poke around in the code for tiles and this is what I found:

.primary {
   font-size: var(--ha-font-size-m);
   font-weight: var(--ha-font-weight-medium);
   line-height: var(--ha-line-height-normal);
   letter-spacing: 0.1px;
   color: var(--primary-text-color);
 }
 .secondary {
   font-size: var(--ha-font-size-s);
   font-weight: var(--ha-font-weight-normal);
   line-height: var(--ha-line-height-condensed);
   letter-spacing: 0.4px;
   color: var(--primary-text-color);
 }

Why?

Its non-intuitive to change the font size (but just about possible to theme) .

Its not possible to have different colours for primary and secondary card info.

Something like the following which would give super flexibility but not break existing dashboards?

.primary {
  font-size: var(--tile-primary-font-size, var(--ha-font-size-m));
  font-weight: var(--tile-primary-font-weight, var(--ha-font-weight-medium));
  line-height: var(--tile-primary-line-height, var(--ha-line-height-normal));
  letter-spacing: 0.1px;
  color: var(--tile-primary-text-color, var(--primary-text-color));
}
.secondary {
  font-size: var(--tile-secondary-font-size, var(--ha-font-size-s));
  font-weight: var(--tile-secondary-font-weight, var(--ha-font-weight-normal));
  line-height: var(--tile-secondary-line-height, var(--ha-line-height-condensed));
  letter-spacing: 0.4px;
  color: var(--tile-secondary-text-color, var(--primary-text-color));
}

[marcinbauer85]

Hey @jm-cook,
I do understand your need, and what you are describing is a component-level token set. This is something that I've planned to introduce at some point, but we haven't yet had time to work on it. If you want, you can open a PR to introduce this :)

[jm-cook]

I had a go. See what you think.

[piitaya]

I introduced icon-border-radius variable last week (#26999). I'm fine with adding variables that start with : --ha-tile-info. so it will also be shared with area card (and even the new mushroom template card 😅)

[jm-cook]

I introduced icon-border-radius variable last week (#26999). I'm fine with adding variables that start with : --ha-tile-info. so it will also be shared with area card (and even the new mushroom template card 😅)

I submitted something but couldnt figure out a way to test withyour custom cards.

#27092