How to reuse a card-mod code
(these questions are asked rather often)
There are several ways:
â yaml-anchors
â include
â secret
â macros
â decluttering-card
â card-mod theme
â external js
Note: examples below are synthetic and may be not optimal, but they give a general idea of re-use.
1. yaml-anchors
Only can be used in yaml-mode dashboards.
Anchors are one file-wide: if you have same repeated code in 2 files - you will have to declare same anchor in both files.
type: entities
entities:
- entity: sun.sun
card_mod: &ref_card_mod
style: |
:host { color: red; }
- entity: sun.sun
card_mod: *ref_card_mod
- entity: sun.sun
card_mod: *ref_card_mod
2. include
Only can be used in yaml-mode dashboards.
type: entities
entities:
- entity: sun.sun
card_mod: !include ...../style.yaml
where âstyle.yamlâ contains
style: |
:host { color: red; }
Note: one imported file may contain one snippet - you cannot place several definitions like
style: |
:host { color: red; }
style: |
:host { color: green; }
style: |
:host { color: blue; }
and then select a particular snippet.
Also, you can kind of âpass a variableâ to the imported code:
type: entities
entities:
- entity: sun.sun
SUPER_COLOR: red #up to you how to name this option
card_mod: !include ...../style.yaml
style: |
:host { color: {{ config.SUPER_COLOR }}; }
3. secret
Only can be used in yaml-mode dashboards.
type: entities
entities:
- entity: sun.sun
card_mod: !secret card_mod_red_row
where âsecrets.yamlâ contains
card_mod_red_row:
style: |
:host { color: red; }
Note: one secrets file may contain several snippets like
card_mod_red_row:
style: |
:host { color: red; }
card_mod_green_row:
style: |
:host { color: green; }
card_mod_blue_row:
style: |
:host { color: blue; }
Although it is more convenient than using âincludeâ (where each imported file must contain one snippet) - I would not recommend using secrets for not-secret data, wrong approach.
4. macros
Can be used both in yaml-mode & storage-mode dashboards.
type: entities
entities:
- entity: sun.sun
card_mod:
style: |
ha-card {
color: red;
}
{% from 'card_mod_macros.jinja' import MY_SUPER_HEADER -%}
{{ MY_SUPER_HEADER() }}
where âcard_mod_macros.jinjaâ contains
{% macro MY_SUPER_HEADER() -%}
.card-content {
color: red;
... other styles
}
{%- endmacro %}
And ofc you can pass variables into a macros:
type: entities
entities:
- entity: sun.sun
card_mod:
style: |
ha-card {
color: red;
}
{% from 'card_mod_macros.jinja' import MY_SUPER_HEADER -%}
{{ MY_SUPER_HEADER('magenta') }}
{% macro MY_SUPER_HEADER(COLOR) -%}
.card-header {
color: {{ COLOR }};
... other styles
}
{%- endmacro %}
Note: one jinja-file may contain several macros like
{% macro card_mod_colored_state(COLOR) -%}
...
{%- endmacro %}
{% macro card_mod_colored_icon(COLOR) -%}
...
{%- endmacro %}
{% macro card_mod_colored_name(COLOR) -%}
...
{%- endmacro %}
5. decluttering-card
Can be used both in yaml-mode & storage-mode dashboards. There are some complexities in case of storage-mode dashboards (not to be described here, check Docs & other info for decluttering-card).
Assume you want to have card-modded Entities card in many places:
type: entities
title: ...
entities: ...
card_mod: ...
Create a decluttering template for this Entity card:
my_template:
card:
type: entities
... use input variables to define options
card_mod: ...you may use input variable here like a particular color
and use this template where it is needed:
type: vertical-stack
cards:
- ...
- type: custom:decluttering-card
template: my_template
variables:
- ...
You can pass a card-mod code as an input variable:
my_template:
default:
- STYLE: 'ha-card { color: red; }'
card:
type: entities
...
card_mod:
style: '[[STYLE]]'
type: vertical-stack
cards:
- ...
- type: custom:decluttering-card
template: my_template
variables:
- STYLE: 'ha-card { color: cyan; }'
- ...
to replace a default red color by a cyan color.
Also, you can pass an additional card-mod code as an input variable:
my_template:
default:
- STYLE: ''
card:
type: entities
...
card_mod:
style: |
ha-card {
color: red;
}
[[STYLE]]
type: vertical-stack
cards:
- ...
- type: custom:decluttering-card
template: my_template
variables:
- STYLE: '.card-header { color: cyan; }'
- ...
to add additional styles.
These were simple examples with string-like styles; in case of dictionary-like styles & styles with jinja templates there are more peculiarities which are beyond this topic.
6. card-mod theme
Traditional card-modding is about styling a particular card / row / other element of a particular card.
Card-mod theme provides âglobalâ styles like:
â all Entities cards
â all rows with toggles
(not to mention other UI elements not covered by traditional card-modding like âview layoutâ, âsidebarâ, âheaderâ, âmore-info dialogâ, âŚ)
Also, it is possible to mass-style SOME elements like:
â some Entities cards
â some rows with toggles
by using classes:
type: entities
card_mod:
class: yellow_card
where âyellow_cardâ class is defined as
card-mod-card-yaml: |
.: |
ha-card.yellow_card {
... add your styles
}
Check Docs for card-mod about defining themes.
7. External js
Can be used to style all UI elements of a particular type/class.
Particular examples will be not provided, it is not about card-mod & an off-topic here.
