🔹 Card-mod - Add css styles to any lovelace card

[Ildar_Gabdullin]

Markdown: how to colorize a text:

It is 2024, people are going to Moon (& killing other humans in many ways) - and yet there is no working way to colorize a text in Markdown w/o card-mod.
We can colorize a text by card-mod like:

type: markdown
content: |-
  xxx
  <h1>xxx</h1>
  xxx
card_mod:
  style:
    ha-markdown $: |
      h1 {color: red}

But consider a list of items - and we need to colorize only some of them (here - only “off” items):

content: >-
  {% for FLAG in states.input_boolean |
                 selectattr('entity_id','search','.test_') |
                 map(attribute='entity_id') |
                 list -%}
    {{states(FLAG)}}
  {% endfor %}

We could use “inline” formatting like:

    <... define color here ...>{{states(FLAG)}}</...>

but “solutions” from Internet either do not work at all or do not work with CSS vars - see here.

Workaround which MAY BE used in SOME cases: wrap a “to be colored” text into “span”:

content: >-
  {% for FLAG in states.input_boolean |
                 selectattr('entity_id','search','.test_') |
                 map(attribute='entity_id') |
                 list -%}
      {%- if is_state(FLAG,'off') -%}
        <span>{{states(FLAG)}}</span>
      {%- else -%}
        {{states(FLAG)}}
      {%- endif -%}
      {{'\n'}}
    {%- endfor %}

and then use card-mod:

card_mod:
  style:
    ha-markdown $: |
      span {color: red}