Look & themes

Pro Cards follow the Home Assistant design. Card background, corner radius, typography, dividers, icon sizes and the named colours all come from the active theme, so the cards sit next to the built-in tile cards without looking foreign. Dark mode applies automatically.

Themes

Any Home Assistant theme restyles Pro Cards together with the rest of the dashboard: the cards read the same variables as the built-in cards, so there is nothing to configure per card. Per card you adjust colours, icons, labels and visuals in YAML, as the card pages show.

Try it on this site: every example has a theme picker in its top-right corner, and the auto / light / dark button next to it switches that example between the light and dark variant. The example below is pinned to Graphite, a theme by Tilman Griesel.

Graphite

Colour values

Wherever a card accepts a colour you can use:

• a named token: primary, accent, red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey, black, white
• a hex value such as #7e57c2
• an rgb() / hsl() value
• any CSS variable such as var(--my-color)

Named tokens resolve to the theme's --<name>-color, so a theme that redefines --amber-color changes every card that uses amber.

Home AssistantGraphite

Where colour comes from

For the entity cards the colour of an entity is decided in this order:

1. the entity's explicit color (a template is allowed)
2. the first matching rules entry that sets color (rules are tried in the order written)
3. Home Assistant's own state colour for the entity's domain and state: lights and switches amber when on, locks green when locked and red when unlocked, people green at home, covers purple while open, media players light blue while playing, batteries green / orange / red by level, and grey for inactive states. These are the theme's --state-<domain>-<state>-color tokens, so a theme that recolours HA's tile cards recolours these cards too.
4. grey for off-like states of other domains (off, closed, idle, standby, docked, not_home, disarmed, clear), otherwise primary. Plain sensors have no state colour and stay primary.

So set color only when the colour should never change; leave it out to let the rules or the state drive it. The same order applies to the icon: explicit icon, then the matching entry, then the entity's own icon. Labels come from the matching entry only.

Home AssistantGraphite

Card tint

tint_card: true on a rule washes the whole card in that entry's colour while it matches. Use it for the states that deserve attention, not for the normal case.

Home AssistantGraphite