r1kkie
July 20, 2020, 12:37pm
1
Hi
This is the code, its used as a decluttering-card but I dont think thats the problem.
header:
card:
type: markdown
style: |
ha-card {
box-shadow: none;
padding: 10px 0px;
color: #fff;
background-color: var(--dwains-theme-header-background);
margin-top: -4px;
border-radius: 0;
font-weight: bold;
font-size: 14px;
}
ha-markdown {
padding-top: 0px !important;
padding-bottom: 14px !important;
}
ha-card a {
color: var(--dwains-theme-header-text) !important;
}
ha-card p {
margin-bottom: 0px;
}
ha-card h1 {
color: var(--dwains-theme-header-text);
font-size: 1.5em;
{% if subtitle %}
margin: 0;
{% else %}
margin: 10px 0 0 0;
{% endif %}
}
ha-card h3 {
font-size: 13px;
font-weight: normal;
color: var(--dwains-theme-header-text);
{% if subtitle %}
margin: 14px 0 0 0;
{% else %}
margin: 0;
{% endif %}
}
content: |
[<ha-icon icon=fas:chevron-left></ha-icon>](/lovelace/[[path]])
<h3>[[subtitle]]</h3>
<h1>[[title]]</h1>
2 Likes
petro
July 20, 2020, 12:46pm
2
try changing that to:
[<ha-icon icon=fas:chevron-left style="color: white;"></ha-icon>](/lovelace/[[path]])
r1kkie
July 20, 2020, 7:06pm
3
Thx for the reply, sadly that wont do anything.
r1kkie
July 24, 2020, 4:20pm
5
Thats very strange, even tried useing the default theme and a clean card with only this but the color wont change.
caiosweet
July 25, 2020, 12:05pm
6
Try
<font color="White"><ha-icon icon=fas:chevron-left></ha-icon></font>
3 Likes
thanks for that! never would have tried the font color on an icon
can confirm that:
content: |
from <font color='#03a9f4'><ha-icon icon=mdi:home-assistant ></ha-icon></font> to <a href='https://drive.google.com/drive/my-drive'><img src = '/local/various/google_drive.png' alt='Google Drive' align='middle' width='25' height='25'></img></a>
works while the ‘official’:
content: |
from <ha-icon icon=mdi:home-assistant color='#03a9f4'></ha-icon> to <a href='https://drive.google.com/drive/my-drive'><img src = '/local/various/google_drive.png' alt='Google Drive' align='middle' width='25' height='25'></img></a>
simply does nothing.
In the above, I changed from the google drive icon to an image, because of this same reason. Couldn’t get it to color correctly.
Only issue I now have is the alignment of the img
but Ill give that a dedicated topic…
petro
September 9, 2020, 1:00pm
8
You have to put them all in the same span or text then set an alignment on that
benm7
March 23, 2021, 1:35am
9
Hoping someone can help! I am trying to get the icon within a markdown to match the color of my theme, rather than setting it to a specific colour. However when I use a variable it seems to default it to a dark blue and not to the primary color. It works when I hard code the color but doesn’t like the variable. Any idea what I am doing wrong?
Screenshot (light blue in the button is the var(–primary-color) variable for this theme, dark blue is the result when using the below code):
- type: markdown
style:
.: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
}
ha-markdown:
$: |
ha-markdown-element:first-of-type h2 {
background-color: none;
}
content: |
## <font color='var(--primary-color)'><ha-icon icon=mdi:robot-vacuum ></ha-icon></font> Vacuum
benm7
July 20, 2021, 1:43am
10
Bumping this, it is the only thing that I can’t change dynamically using themes at the moment. Hoping someone knows the magical answer to this!
petro
July 20, 2021, 1:52am
11
Just add style with color to the icon html object
benm7
July 20, 2021, 1:54am
12
Sorry Petro, not sure I understand!!! I am trying to dynamically change the font color based on the var(–primary-color) theme variable like the below.
content: |
## <font color='var(--primary-color)'><ha-icon icon=mdi:robot-vacuum ></ha-icon></font> Vacuum
Looks like markdown doesn’t allow variables?!?!
petro
July 20, 2021, 2:02am
13
Are you familiar with html and css? I’m on mobile so I can’t really write it out. But you’d add style=“color: var(–paper-item-icon-active-color);” to the ha-icon
benm7
July 20, 2021, 3:24am
14
Yep have played around with various options, and nothing seems to work.
Using what you have suggested results in a grey icon, not the primary color.
content: |
### <font><ha-icon style="color: var(--primary-color);" icon=mdi:floor-plan ></ha-icon></font> Rooms
believe you asked me elsewhere about theme variables? my answer would be No, they are not respected in Markdown, have a look here: How to create a test sheet for theme colors - #3 by Mariusthvdb
which results in utterly unexpected colors…
I’ve solved it using intermediary sensors that have a color as state:
- type: custom:hui-element
card_type: markdown
content: >
# <font color = {{states('sensor.trash_color')}}>Afvalkalender</font>
<font color={{states('sensor.trash_color')}}><ha-icon icon= {{'mdi:delete-alert' if states('sensor.afvalwijzer_today') != 'Geen' else 'mdi:delete-outline'}}> </ha-icon></font> Vandaag, {{states('sensor.vandaag')}}: <font color= {{states('sensor.trash_color')}}>**{{states('sensor.afvalwijzer_today')|capitalize}}</font>**
<font color={{states('sensor.trash_next_color')}}><ha-icon icon= {{states('sensor.trash_next_icon')}}> </ha-icon></font> Volgende afval-ophaal over **<font color={{states('sensor.trash_next_color')}}>{{states('sensor.afvalwijzer_next_in_days')}}</font>** {{'dag' if states('sensor.afvalwijzer_next_in_days') == '1' else 'dagen'}} op:
<ha-icon icon= 'mdi:delete-alert'> </ha-icon> {{states('sensor.volgende_afval_ophaal_dag')}}: **<font color={{states('sensor.trash_next_color')}}>{{states('sensor.afvalwijzer_next_item')|capitalize}}</font>**
which works perfectly with a sensor like:
trash_next_color:
value_template: >
{% set next = states('sensor.afvalwijzer_next_item') %}
{% set mapper = {'papier':'deepskyblue',
'gft':'green',
'plastic':'orange',
'restafval':'black'} %}
{% set color = mapper[next] if next in mapper else 'grey' %}
{{color}}
1 Like
