I’ve got an icon in a template chip card that I’d like to set to three colors, based on the values of 2 helpers. The ‘main’ helper is a boolean, and I’d like to the theme’s standard on/off colors for that. However, there is an error count helper, and if the count is > 0, then I want the icon red, regardless of the ‘main’ helper’s state.
I’ve got the template code working for the error
icon_color: |
{%- if states.counter.master_errors.state|int > 0 %}
red
{%- endif %}
However, with only this, when the master_errors state = 0, the icon is just grey all the time regarless of the boolean’s state.
In the themes doc page, it references the ha-style.ts file. From that file, I’m pretty sure I’m wanting to use "--state-icon-color"
and "--state-icon-active-color"
.
I’ve seen some references in some threads to code that looks something like
{%- if your-condition-here %}
var(--some-variable-name-here)
{%- endif %}
but, I can’t seem to get it working in my template.
Full disclosure: while I’ve been sysadmin for 25+ years, and done a fair amount of c/c++/c#/bash/powershell coding, I’ve never ventured into web coding. I’m assuming the “var()” statement is a javascript statement that’s supposed to return the value associated with the “–variable” defined in ha-style.ts. I’m guessing I’m just missing a secret syntax to get it working, or (as usual) I’m completely off base.
So, if I want to set an icon’s color to the current theme’s active/inactive color in a template, how would I go about coding that?
Below is the code I currently have. Any insights would be helpful.
chips:
- type: template
entity: input_boolean.guest_mode
icon: mdi:home-assistant
icon_color: |-
{%- if states.counter.master_errors.state|int > 0 %}
red
{%- elif states.input_boolean.guest_mode == 'off' %}
var(--state-icon-active-color)
{%- else %}
var(--state-icon-color)
{%- endif %}
content: |-
{%- if states.counter.master_errors.state|int > 0 %}
{{ states.counter.master_errors.state|int }}
{%- else %}
{{ states('input_boolean.guest_mode') }}
{%- endif %}
Here is the icon when error count > 0
Here, error count = 0, guest_mode off (the idea is to show that HA is ‘active’)
And, here, error count = 0 and guest mode on (HA inactive)