I am trying to display colorized text in Markdown card. However, color is being ignored for some reason. I’d expect color text to be a fundamental feature… maybe I’m doing something wrong?
type: markdown
title: "Color Test"
content: |
<span style="color: red;">This is red text.</span>
<br>
<span style="color: blue;">This is blue text.</span>
<br>
<span style="color: green;">This is green text.</span>
<br>
<span style="color: yellow;">This is yellow text.</span>
You may be want to take a look at the HACS integration GitHub - PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card: This card displays provided Jinja2 template as an HTML content of a card. It uses exactly the same engine as Home Assistant in Developer tools.
Does anyone know a WORKING way to colorize a text?
This does not work (as was already said):
type: markdown
title: "Color Test"
content: |
<span style="color: red;">This is red text.</span>
This does work:
content: |
<font color=red>This is red text.</font>
but “font” is considered as deprecated; also it does not process CSS color vars properly - see this issue (had to close it since “font” is deprecated):
content: |
<font color=var(--red-color)>This is red text.</font>
Internet is full of copy/pasted “solutions” which in fact may not work.
P.S. Please do not suggest card-mod.
most reliable is using hex colors:
<h3><font color=#152b81>Lange termijn</font></h3>
theme colors are not used in the markdown.
not aware font is deprecated though, I use it all over, and no issue. even set a fat color on mdi icons…
will try and find the deprecation
oops thats ancient indeed…
well, replace it with
<h3 style="color=#152b81">Lange termijn</h3>
seems to work just as fine…
strike that… even though it is the advised way to do as stated all over the Stackoverflow posts, it does not work in HA markdown.
a plain example I took:
<span style="color:blue">some *This is Blue italic.* text</span>
renders the text alright, but without the color. Same with a hex color.
so we are indeed left to do stuff like:
ha-markdown $: |
h3 { font-family: “Helvetica, sans-serif”; font-size: 24px; color: #152b81; }
h4 { color: #152b81; }
but a Header to a text makes it move to its own line:
so for my card here, that is no good,
and I am left with the one option of the font tag…
or…wait… this works too 
ha-markdown $: |
h3 { color: #152b81; }
b {color: #152b81; }
apparently we can use the b from the <b> tag there too, probably any tag then?
type: entities
title: Vooruitzichten
card_mod:
class: class-header-margin-no-color
style: |
.card-header {
background: rgb(226,239,248);
color: rgb(21,43,129);
}
entities:
#buienradar dark color #152b81 rgb(21,43,129)
#buienradar light color #e2eff8 rgb(226,239,248)
- type: custom:hui-element
card_type: markdown
<<: &style
card_mod:
style:
.: |
ha-card.type-markdown {
margin: 0 -16px;
box-shadow: none;
}
ha-markdown $: |
h3 {color: #152b81;}
b {color: #152b81;}
# things like h4 { font-family: “Helvetica, sans-serif”; font-size: 24px; color: #152b81; }
content: >
<h3>Korte termijn</h3>
<p>{{state_attr('sensor.buienradar_korte_termijn','forecast')}}</p>
{% from 'easy_time.jinja' import month %}
{% set kort = 'sensor.buienradar_korte_termijn' %}
{% set van = state_attr(kort,'startdate')|as_datetime %}
{% set tot = state_attr(kort,'enddate')|as_datetime %}
Geldig van <b>{{van.day}} {{month(van)}}</b> tot <b>{{tot.day}} {{month(tot)}}</b>
- type: divider
- type: custom:hui-element
card_type: markdown
<<: *style
content: >
<h3>Lange termijn</h3>
<p>{{state_attr('sensor.buienradar_lange_termijn','forecast')}}</p>
{% from 'easy_time.jinja' import month %}
{% set lang = 'sensor.buienradar_lange_termijn' %}
{% set van = state_attr(lang,'startdate')|as_datetime %}
{% set tot = state_attr(lang,'enddate')|as_datetime %}
Geldig van <b>{{van.day}} {{month(van)}}</b> tot <b>{{tot.day}} {{month(tot)}}</font>
- type: divider
- type: custom:hui-element
card_type: markdown
<<: *style
content: >
{% set datum =
state_attr('sensor.buienradar_weerbericht','published')|as_datetime %}
{% from 'easy_time.jinja' import weekday, month %}
{% set gepubliceerd =
weekday(datum) ~' '~datum.day~' '~month(datum)~' om '~datum.strftime('%H:%M') %}
<h3>Vooruitzicht van {{gepubliceerd}}</h3>
<h3>Samenvatting:</h3>
<p>{{state_attr('sensor.buienradar_weerbericht','summary')}}</p>
- type: custom:fold-entity-row
card_mod: !include /config/dashboard/card_mods/scroll_fold.yaml
head:
type: section
label: Uitgebreid
card_mod: #mimic html font <h3>
style: |
.label {
color: rgb(21,43,129) !important;
font-size: 1.17em;
font-weight: 700 !important;
margin-left: 0px !important;
}
entities:
- type: custom:hui-element
card_type: markdown
<<: *style
content: >
{% set datum =
state_attr('sensor.buienradar_weerbericht','published')|as_datetime %}
{% from 'easy_time.jinja' import weekday, month %}
{% set gepubliceerd =
weekday(datum) ~' '~datum.day~' '~month(datum)~' om '~datum.strftime('%H:%M') %}
<!--- <h3>Uitgebreid:</h3> -->
<p>{{state_attr('sensor.buienradar_weerbericht','text')}}</p>
Gepubliceerd op: <b>{{gepubliceerd}}</b>
Marius, thanks for investigation.
Ofc we can use card-mod… But it may be mainly used for separate DOM elements - i.e. we can apply a style for “h3” or “b” text etc, but we cannot colorize a particular word “of same type”, I mean:
content: |-
<h3>xxx this_one_must_be_colored xxx</h3>
nope.
well, we can, with <font> but no modern css way that I could think of.
btw, I changed the above to
ha-markdown $: |
{% set kleur = states('sensor.buienradar_contrast_kleur') %}
h3 {color: {{kleur}};}
b {color: {{kleur}};}
which is kind off a nice touch, so templates work there also
the colors needed to be adjusted to the theme, so I figured I make a template
template:
- trigger: #needs fix
trigger: state
entity_id: input_select.theme
sensor:
- unique_id: buienradar_contrast_kleur
state: >
{% set dark = states('input_select.theme') is search('ight|Dark|Matrix',ignorecase=True) %}
{{'#e2eff8' if dark else '#152b81'}}
#buienradar dark color #152b81 rgb(21,43,129)
#buienradar light color #e2eff8 rgb(226,239,248)
and have that take care of it