This has become a challenge for me 
Iām gonna solve it
:)) I also feel like I have to achieve this, but Iāve already spent dozens of hours, searched the Internet far and wide and havenāt found anything.
Thatās why Iām looking for help on the forum.
The built-in āstate_mapā option maps colors from the state, itās a pity that you canāt map from the attribute state, that would be the end of the matter.
But if the card creator can map it via card-mod, itās certainly possible.
If a template sensor can record the color created and that is mapped, then you can reference that color. We are literally just one step removed from the data you want.
Iām going to test that theory because template sensor history hit the logbook
This is a template sensor that records my fanās speed and direction and itās in the logbook
Getting closerā¦ we can record the RGB state of the sensor possibly use that to color the log.
But in the templates sensor configuration there is no icon_color option.
If it was, that would be the end of the matter.
I donāt think history records the colors of the icons.
The colors are probably overwritten in the cards, but I donāt know
I find this in repository in logbook-base-card:
static get styles(): CSSResultGroup {
return css`
.card-content-scroll {
max-height: 345px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-gutter: stable;
}
.item {
clear: both;
padding: 5px 0;
display: flex;
line-height: var(--paper-font-body1_-_line-height);
}
.item-content {
flex: 1;
}
.item-icon {
flex: 0 0 4rem;
color: var(--paper-item-icon-color, #44739e);
display: flex;
justify-content: center;
}
.entity {
color: var(--paper-item-icon-color);
cursor: pointer;
}
state-badge {
line-height: 1.5rem;
}
.state {
white-space: pre-wrap;
}
there is a .item-icon section here, but it doesnāt work in card-mod
I looked at that. Itās using color: var(āpaper-item-icon-color, #44739e) witch is the active color. 
I made a separate color sensor, but how to use it in this logbook card?
No way
- sensor:
- name: Notify last redmi all attr kolor ikony
unique_id: Notify_last_redmi_all_attr_kolor_ikony
state: >-
{% set apps_attribute = state_attr('sensor.redmi_12_asia_last_notification', 'package') %}
{% if apps_attribute == 'com.spotify.music' %} green
{% elif apps_attribute == 'com.whatsapp' %}#3ddc59
{% elif apps_attribute == 'com.facebook.orca' %}#c743d4
{% elif apps_attribute == 'com.facebook.katana' %}#207af2
{% elif apps_attribute == 'com.mi.globalbrowser' %}#3329f2
{% elif apps_attribute == 'com.google.android.dialer' %} teal
{% elif apps_attribute == 'com.android.deskclock' %} purple
{% elif apps_attribute == 'com.instagram.android' %}#fd0186
{% elif apps_attribute == 'com.google.android.youtube' %} red
{% elif apps_attribute == 'com.zhiliaoapp.musically' %} white
{% elif apps_attribute == 'com.google.android.apps.messaging' %} teal
{% elif apps_attribute == 'pl.pkobp.iko' %}#094689
{% else %}#1E90FF {% endif %}
I have a sensor in my config that combines to attributes and that references a SVG. If the fan is going forward it uses one SVG and in reverse it uses another. The logbook is recording the entity pic.
the sensor yaml
sensor:
- platform: template
sensors:
fan_direction:
friendly_name: "Fan Direction"
unique_id: fan1
value_template: "{{ state_attr('fan.bedroom_fan', 'direction') }}"
fan_direction_speed:
friendly_name: "Fan Direction Speed"
unique_id: fan2
value_template: |
{% set direction = state_attr('fan.bedroom_fan', 'direction') %}
{% set speed = state_attr('fan.bedroom_fan', 'percentage') %}
{{[direction,speed]|join("")}}
entity_picture_template: >-
{% set direction = state_attr('fan.bedroom_fan', 'direction') %}
{% set path = "/local/animated/" %}
{% set speed = state_attr('fan.bedroom_fan', 'percentage') %}
{% set ext = ".svg"%}
{{[path,direction,speed,ext]|join("")}}
you could assign a pic to each app state and it will show in the log.
Which means we could use the actual app image for the log. Iāll put an example together. Iāve already done this for for a tv icon so it shows what app is in use.
The image on the TV would change to the app playing in one of my setups. That image would record in the logbook.
Iāll try it and see if it works, but itās still too complicated a solution.
I have to look for a solution how to map it via cardmod.
This is possible because the owner does it in this card by overwriting the color.
I just need to determine at what level of code (ha-card; state-badge; ha-state-icon; ha-svg etc.) it does it and how
Itās actually fairly simple with one sensor and images for the app modes. I have most of it already built, just need to find all the code. Iāll message you tomorrow.
Gosh this one drives me crazy: how can I colorize this icon?
Part of the card
- type: conditional
conditions:
- entity: sensor.updater_hacs
state: 'True'
card:
type: entities
entities:
- type: custom:auto-entities
card:
type: entities
title: HACS (nur installierbare Integrationen)
icon: mdi:home-assistant
state_color: false
show_header_toggle: false
card_mod:
style:
.: |
.card-header {
font-size: 14px;
font-weight: 450;
padding: 5px;
padding-top: 0px;
margin-left: 20px;
margin-bottom: 5px;
margin-left: -35px;
}
.card-header .ha-icon {
--paper-item-icon-color: cyan;
color: var(--red-color)
}
.card-header .ha-icon {
--paper-item-icon-color: cyan;
color: var(--red-color)
}
ha-state-icon {
color: grey !important;
}
ha-card {
margin-left: 30px;
#margin-right: 1px;
margin-top: 0px;
margin-bottom: -15px;
border-width: 0px;
}
entities: []
filter:
include:
- domain: update
integration: hacs
state: 'on'
not:
attributes:
release_summary: >-
<ha-alert alert-type='warning'>Requires Home
Assistant *
exclude: null
show_empty: false
unique: true
sort:
method: name
reverse: false
- type: weblink
name: Zum HACS
url: /hacs
icon: mdi:arrow-right
card_mod:
style: |
a {
margin-top: -5px;
padding-left: 45px;
text-decoration: none;
justify-self: left;
#padding-right: 30px;
}
a div {
margin-left: 0px !important;
}
:host {
display: grid;
}
card_mod:
style:
.: |
ha-card {
#margin-left: 1px;
#margin-right: 1px;
margin-top: -5px;
margin-bottom: -25px;
border-width: 0px;
}
Non of those are working:
.card-header .ha-icon {
--paper-item-icon-color: cyan;
color: var(--red-color)
}
.card-header .ha-icon {
--paper-item-icon-color: cyan;
color: var(--red-color)
}
ha-state-icon {
color: grey !important;
}
Edit: solved with
...
ha-icon {
color: #44739e !important;
}
...
@kosmaluk This is what your logbook will look like with entity pictures for android device. I created a template sensor that refers to the app_name and references a locally stored svg. This is a bit off topic so feel free to message me if you want to pursue this method.
sensor:
- platform: template
sensors:
shield_input_pic:
friendly_name: "Shield Input Pic"
unique_id: shield_input_pc
value_template: |
{{ state_attr('media_player.shield', 'app_name') }}
entity_picture_template: >-
{% set channel = state_attr('media_player.shield', 'app_name') %}
{% set path = "/local/pics/" %}
{% set ext = ".svg"%}
{{[path,channel,ext] |join("") |urlencode | replace("%20", "")}}
Interesting solution. Iāll definitely think about it.
However, for me the best way is to use the simpler and faster card-mod (css) function.
I have a dozen or so logbook cards and it would be difficult to create records for each of them. New entities with different icons are constantly added to my folders, so I need to have a quick way to modify them.
I wrote to the card owner and he seems to be working on solving this issue now. I saw that he had a feature request on this topic, so I guess Iām not the first.
Anyway, thanks a lot for your help.
Hey, I am trying to figure this out, as I am developing a dashboard. I have a radiator, that has an attributes.hvac_action that gives the following values; heating, idle and cooling. The below code is not working, any pointers?
- type: "custom:button-card"
entity: climate.loft
icon: mdi:radiator
styles:
icon:
- color: >
{% set hvac_action = state_attr('climate.loft', 'attributes').hvac_action %}
{% if hvac_action == 'heating' %}
orange
{% elif hvac_action == 'cooling' %}
blue
{% elif hvac_action == 'idle' %}
green
{% else %}
rgb(68, 115, 158)
{% endif %}
{% set hvac_action = state_attr('climate.loft', 'hvac_action')%}You are mixing button-card and card-mod.
1 Like