How to reference current theme's on/off state colors in template

Configuration Frontend
1

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
image

Here, error count = 0, guest_mode off (the idea is to show that HA is ‘active’)
image

And, here, error count = 0 and guest mode on (HA inactive)
image

2

Try with something more known - a color for Entities card.

This syntax is valid; cannot say anything about this particular variable (does it really exist or not).

3

Would anyone happen to have an example of using var() to return a value from the ha-styles.ts. When I put it into the Template Dev Tool, it just echos back the code:

image
image964×195 12.6 KB

Any samples or pointers would be really appreciated. Or, if there is another way to reference the current theme’s on/off icon colors, that would be great as well.

4

The template editor does not have access to frontend variables. So you just need to know to output the var. I.e. It’s always going to echo the var.

5

Thanks. So, in my chip entity, to set the icon color, I’ve got:

    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 %}

Getting the icon red is working perfectly, but when master_errors == 0, the icon color is just grey regardless of the guest_mode state. How can I get the icon to use the current theme’s on/off colors from within the template?

Thanks in advance for your help…

6

What card is this?

1 Like
7

In this instance, it’s a Mushroom Chip entity card:

type: custom:mushroom-chips-card
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 %} 
    tap_action:
      action: navigate
      navigation_path: /lovelace/homeassistant
    double_tap_action:
      action: toggle
    hold_action:
      action: none
    content: |-
      {%- if states.counter.master_errors.state|int > 0 %}
        {{ states.counter.master_errors.state|int }}
      {%- else %}
        {{ states('input_boolean.guest_mode') }}
      {%- endif %}
8

The template chip needs to support using that variable then. If it doesn’t, then that’s where your problem lies.

9

Is there a way I can determine definitively if the chip does or doesn’t support the variable. Also, by ‘support using that variable’, should I infer that perhaps it may support other variables, but just not the ones listed in the ha-styles.ts file, or would that mean that the template chip may not support the use of var() at all?

Sorry for the noob questions, just still trying to wrap my head around which types of syntax are valid where.

Lastly, any other option you could suggest to accomplish what I’m trying to do?

Thanks again for all you help…

10

yeah, simply just add the variable in that slot.

    icon_color: var(--state-icon-active-color)

Couldn’t tell you, I don’t use that card.

Card mod

11

Been trying to look closer at this card, and it appears that for the chips the icon_color attribute simply sets the values for a call to rgb(). I’m guessing the value for this attribute needs to be some JavaScript that will ultimately return those values.

Is there any easy, inline, code that could be use to conver the hex color values returned by var(–state-icon-color) into rgb values?