Using classes:
The simplest example:
Theme:
card-mod-card-yaml: |
$: |
ha-card.class_0 {
border: solid 1px #ff0000;
background-color: lightblue;
}
Cards:
- type: vertical-stack
cards:
- type: history-graph
title: class_0
entities:
- sun.sun
card_mod:
class: class_0
- type: history-graph
title: title
entities:
- sun.sun
- type: entities
title: class_0
entities:
- sun.sun
card_mod:
class: class_0
- type: entities
title: title
entities:
- sun.sun
If needed to style elements inside shadowRoot - a possible way is defining variables.
Consider this Entities card:
type: entities
entities:
- sun.sun
- sensor.processor_use
- input_number.test_number
- input_select.test_value
- input_boolean.test_boolean
and you want to set colors for icons differently for odd & even rows.
Theme (only related styling, no “class_0” code):
card-mod-card-yaml: |
.card-content:
div:nth-child(n):
:first-child $ hui-generic-entity-row $: |
state-badge {
color: var(--class_2-color-odd,orange);
}
div:nth-child(2n+1):
:first-child $ hui-generic-entity-row $: |
state-badge {
color: var(--class_2-color-even,lightgreen);
}
.: |
ha-card.class_2 {
--class_2-color-odd: red;
--class_2-color-even: cyan;
background-color: yellow;
}
where “orange” & “lightgreen” may be replaced by a default (for now!!!) “–paper-item-icon-color”.
Here some variables are defined in some “classy” ha-card → then used inside some internal shadowRoot. Be aware of defining default values for cards of different classes.
Cards:
- type: vertical-stack
cards:
- &ref_entities_diff_domains
type: entities
entities:
- sun.sun
- sensor.processor_use
- input_number.test_number
- input_select.test_value
- input_boolean.test_boolean
- <<: *ref_entities_diff_domains
card_mod:
class: class_2
- <<: *ref_entities_diff_domains
card_mod:
class: class_0
where the 3rd card has applied “class_0” styles (described above).
One more example - styling a card’s header.
Due to some recent changes the “.card-header” element is located inside shadowRoot for some cards (like “history-graph”, “glance”). So, the theme must define some “classy” style for “.card-header” inside shadowRoot and directly inside ha-card.
Theme:
card-mod-card-yaml: |
$: |
.card-header {
color: var(--class_1-color,var(--ha-card-header-color,--primary-text-color)) !important;
font-size: var(--class_1-font-size,var(--ha-card-header-font-size, 24px)) !important;
letter-spacing: var(--class_1-letter-spacing) !important;
}
.: |
ha-card.class_1 .card-header {
color: var(--class_1-color);
font-size: var(--class_1-font-size);
letter-spacing: var(--class_1-letter-spacing);
}
ha-card.class_1 {
border: solid 1px #ff0000;
background-color: lightgrey;
--class_1-color: magenta;
--class_1-font-size: 10px;
--class_1-letter-spacing: 10px;
}
Here all described cards together:
code
theme: Backend-selected
path: classy-shadowroot
badges: []
title: classy shadowroot
cards:
- type: vertical-stack
cards:
- type: history-graph
title: class_0
entities:
- sun.sun
card_mod:
class: class_0
- type: history-graph
title: title
entities:
- sun.sun
- type: entities
title: class_0
entities:
- sun.sun
card_mod:
class: class_0
- type: entities
title: title
entities:
- sun.sun
- type: vertical-stack
cards:
- &ref_entities_diff_domains
type: entities
entities:
- sun.sun
- sensor.processor_use
- input_number.test_number
- input_select.test_value
- input_boolean.test_boolean
- <<: *ref_entities_diff_domains
card_mod:
class: class_2
- <<: *ref_entities_diff_domains
card_mod:
class: class_0
############################################################
- type: vertical-stack
cards:
- type: history-graph
title: class_1
entities:
- sun.sun
card_mod:
class: class_1
- type: history-graph
title: title
entities:
- sun.sun
############################################################
- type: vertical-stack
cards:
- type: entity
entity: sun.sun
name: class_1
card_mod:
class: class_1
- type: entity
entity: sun.sun
############################################################
- type: vertical-stack
cards:
- type: glance
title: class_1
<<: &ref_glance_card
entities:
- entity: sun.sun
show_name: true
show_icon: true
show_state: true
card_mod:
class: class_1
- type: glance
title: title
<<: *ref_glance_card
############################################################
- type: vertical-stack
cards:
- type: entities
entities:
- entity: sun.sun
title: class_1
card_mod:
class: class_1
- type: entities
entities:
- entity: sun.sun
title: title
- type: vertical-stack
cards:
- type: entities
title: class_1
card_mod:
class: class_1
entities:
- type: custom:hui-element
<<: &ref_hui_element
card_type: entities
entities:
- entity: sun.sun
title: title
- type: custom:hui-element
<<: *ref_hui_element
title: class_1
card_mod:
class: class_1
- type: entities
entities:
- entity: sun.sun
title: title
What I tried and failed:
ha-card.class_1 $: |
.card-header {
color: cyan !important;
font-size: 40px !important;
letter-spacing: 10px !important;
}
ha-card.class_2 .card-content:
div:nth-child(n):
:first-child $ hui-generic-entity-row $: |
state-badge {
color: cyan;
}
div:nth-child(2n+1):
:first-child $ hui-generic-entity-row $: |
state-badge {
color: red;
}
And check an alternative solution provided by @ajoyce (theme, test cards):
Here a path should be defined as
ha-card.light>div.tile>div.content>div.icon-container>ha-tile-icon$: |
div.shape::before {
opacity: 0
}
Unfortunately this method has some limitations (here, here) - and anyway it could be a better solution in some cases than using variables.
