You are right, I forgot to mention the ‘–paper-item-icon-active-color’ as well.
Nice this could solve your problem.
How can I change background color of a card based on time?
type: custom:button-card
icon: mdi:basket
color: rgb(190, 240, 20)
styles:
card:
- background-color: |
[[[
if (states["calendar.bringmeister_calendar"].attributes.start_time > ???
return 'rgb(60, 120, 0)';
]]]
that depends on what start_time is. Is it a string or datetime object?
It’s a input_datetime object.
I usually thought bout starting a new/own feature request based on
As I found this topic and even it has a slightly other approach (doing stuff in YAML), I would like to show my idea (doing it in the UI which is more the modern HA way of doing things) here too:
Allow to change entity icon based on entity state (binary sensors)
For binary sensors this should be quite easy:
- field “icon for state on”: mdi:led-on
- field “icon for state off”: mdi:led-off
In a next iteration the “state” needs to be user defined, e. g. “15” or “running” etc.
As mentioned in Change entity icon based on state this already is implemented in the backend for sensors with supported device class, e. g. binary sensors like door, window etc.
This feature request is about bringing the config options for this to the UI allowing users do define this on their own.
I agree!
Although mushroom card looks amazing, and Paul was just hired wasn’t he! So prehaps something in the future to enable UI icon colors.
Mushrooms
This is already a feature request
Thanks for linking. All those are based on entities with two states, with
we could use an almost endless list of states and corresponding icons. Why only limit to two states (which of course would fulfill likely 95 % of all requirements as read so far)? Going that extra mile would create a very powerful customization option.
That’s just the example he used, but his proposal implies other domains. This is indicated by the - under his fake device_class field.
Searched a lot and this seems to be the right place to ask. Is there nowadays a straightforward way to have colored entities for values like e.g. (I mean without addtional coding).
Temperature:
Below 0 Celcius blue and above red with gradient from blue to red, the hotter the more red?
I mean the value (state) of the entity in lovelace.
I have now a long list of temp sensors and like to see them in colors.
Doors/windows:
Open red, closed green.
1 Like
Would love this too.
Hi All,
Wondering if someone can help. I have created a “navigation” button that switches to another dashboard where I can control my lights. See the pictures attached.
What i am trying to achieve is that the living zone icon should be grey when all of the light entities are off and a different colour when any of the light entities are on.
Can some one help with this?
Easiest solution I think is to make a light group from those lights. It will have a binary state according to your preferences afaik, so you could use that as the state entity for your button.
I’m trying to color list of the devices, if I use sensor.*_voltage - it works for all card but I need to exclude device which I don’t need to display. If I use exact list of the devices and style, just one device colored, can you assist?
show_empty: false
card:
type: entities
show_header_toggle: false
state_color: true
title: Voltage
filter:
include:
- entity_id: sensor.temp_1_voltage
- entity_id: sensor.temp_2_voltage
- entity_id: sensor.temp_3_voltage
- entity_id: sensor.door_sensor_voltage
- entity_id: sensor.ms1_voltage
- entity_id: sensor.leak_sens_voltage
- entity_id: sensor.button_voltage
options:
secondary_info: last-changed
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity)|float < 2900 %} red
{% elif states(config.entity)|float < 2950 %} OrangeRed
{% elif states(config.entity)|float < 3000 %} Yellow
{% elif states(config.entity)|float < 3300 %} Lime
{% elif states(config.entity)|float < 10000 %} Aqua
{% else %} azure
{% endif %}
;
}
exclude:
- state: unavailable
sort:
method: state
reverse: true
I have Mushroom chip for my internet connection. I’d like it to be green if connected and red if not. Is there an easy way to do this or is it dependent on coding or style sheets with card-mod?
Hey @kman42 you can certainly do that. I have a chip card that changes colour, changes the icon and displays whether its on or off for a pump.
type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.compressor_status_31101
tap_action:
action: more-info
content: |-
Compressor:
{% set d ={
'off': 'Off',
'on': 'On',
} %}
{{ d.get(states(entity)) }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:heat-pump-outline
{% elif state=='on' %}
mdi:heat-pump
{% else %}
mdi:hvac
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
green
{% else %}
grey
{% endif %}
The challenge will be to see if your internet entity can display an on/off status.
1 Like
since this older topic still lives, I am posting here to let you know we released 2 new versions of Custom-ui that let you use And customize and attribute icon_color.
custom-ui: the most complete version allows for templating to those icon colors. these templates are in JavaScript.
custom-icon-color: only provides that attribute so you can use it in the customize section.
both will allow you to use an attribute icon_color in template: entities, and then use regular Jinja in those templates
there is also support for the entity and button card, and we’ve started working on the Tile-card, but that still needs some work.
while at it, we’ve also released a new plugin:
custom-more-info, developed by @elchininet , and this allows you to control what is displayed on the More info panels of any entity.
(originally in custom-ui to hide the templates it set, but now fully fleshed out to control anything from history and logbook, to any attribute you might want to filter. Or unfilter from HA frontend default filters.)
3 Likes
I am FULLY in over my head and more so in my head to this realm. I think I correctly implemented some icon color code from the net, but it is not functioning? #1 Did I implement wrong? #2 Is the code flawed? #3 Did something change internally? Thank you in advance, kindest regards, Anthony
PS I used Developer Tools to check the entity, it seems set appropriately
type: custom:auto-entities
card:
type: entities
title: null
entities:
- entity: sensor.yahoofinance_dji
style: |
:host {
--paper-item-icon-color:
{% if is_state_attr("yahoofinance.dji","trending", "up") -%} green
{% elif is_state_attr("yahoofinance.dji", "trending", "down") -%} red
{% else %} white
{% endif %};
name: null
type: custom:multiple-entity-row
state_header: Price
format: precision2
secondary_info:
attribute: regularMarketChangePercent
unit: "%"
entities:
- attribute: regularMarketDayLow
name: Low
format: precision2
- attribute: regularMarketDayHigh
name: High
format: precision2
- entity: sensor.yahoofinance_gspc
style: |
:host {
--paper-item-icon-color: {% if is_state_attr("yahoofinance_gspc", "trending", "up") -%} green
{% elif is_state_attr("yahoofinance_gspc", "trending", "down") -%} red
{% else %} white
{% endif %};
name: null
type: custom:multiple-entity-row
state_header: Price
format: precision2
secondary_info:
attribute: regularMarketChangePercent
unit: "%"
entities:
- attribute: regularMarketDayLow
name: Low
format: precision2
- attribute: regularMarketDayHigh
name: High
format: precision2
- entity: sensor.yahoofinance_ixic
style: |
:host {
--paper-item-icon-color: {% if is_state_attr("yahoofinance.ixic", "trending", "up") -%} green
{% elif is_state_attr("yahoofinance.ixic", "trending", "down") -%} red
{% else %} white
{% endif %};
name: null
type: custom:multiple-entity-row
state_header: Price
format: precision2
secondary_info:
attribute: regularMarketChangePercent
unit: "%"
entities:
- attribute: regularMarketDayLow
name: Low
format: precision2
- attribute: regularMarketDayHigh
name: High
format: precision2
- entity: sensor.yahoofinance_rty_f
style: |
:host {
--paper-item-icon-color: {% if is_state_attr("yahoofinance.ixic", "trending", "up") -%} green
{% elif is_state_attr("yahoofinance.ixic", "trending", "down") -%} red
{% else %} white
{% endif %};
name: null
type: custom:multiple-entity-row
state_header: Price
format: precision2
secondary_info:
attribute: regularMarketChangePercent
unit: "%"
entities:
- attribute: regularMarketDayLow
name: Low
format: precision2
- attribute: regularMarketDayHigh
name: High
format: precision2
visibility:
- condition: state
entity: input_boolean.hide_markets
state: "on"
you need the card_mod: key before the style: key
card_mod:
style: |
:host {
--card-mod-icon-color:
{% set active = states(config.entity)|int(-5) %}
{{'var(--active-color)' if active > 0 else 'gray'}};
}