Home Assistant Progress – Colours

As a died-in-the-wool Node-Red fan of several years for my home automation, earlier this summer, my Italian friend Antonio began trying to convince me that Home Assistant was the way forward.

When I first looked at HA it was pretty basic but a lot has changed in the last year or so. Antonio probably wishes he’d never made the suggestion – at first I asked questions several times a day. Ultimately I’ve converted my whole home automation over to HA and most of the time can manage to find my own solutions, needing less and less (human) help thanks to various AI systems, mainly CHATGPT which while being FAR from perfect is starting to provide useful solutions where I can’t quite figure out something for myself. I have a fairly comprehensive dashboard system mainly based on HA TILES which I’ve built up – still a work in progress but also 24-7 controlling lights and various appliances in my home.

One of the last stumbling block has been colouring and formatting – that is, text colouring and right-justification in the tiles – something you’d think would be an absolute basic – yet the standard tile has managed to confound me on a daily basis and simply will not allow full colour control over text – even using the most popular add-on for HA known as “card mod”.

I’ve been onto the various HA forums and to date gotten basically nowhere with this “basic” ability to colour the state text of a device differently to it’s title text. Indeed for the most part I’ve only been able to manage WHITE. That is until yesterday when I decided (armed with several backups) to try with the aid of CHATGPT, to solve the problem.

I ended up replacing the standard tile with a “mushroom template card”. That worked well for sensors and after several attempts, CHATGPT got me almost there, but not quite. I stumbled on minor changes to get what I wanted. Then I tried actually controlling something and discovered that while the mushroom template card worked great with sensors, when it came to controlling an output, I’d gained colour control of text and lost the ability to dynamically colour the icon.

Back to CHATGPT and several iterations later, between us, we managed a solution. I’ll share here before and after code for both scenarios – output control and sensing.

Here is a typical output control on a tile card and a typical sensor on a tile card.

type: tile
entity: light.pergolax_external_blue
hide_state: false
name: Ext blue
color: blue
icon: mdi:led-strip
card_mod:
  style: |
    ha-card {
      border: 1px solid darkcyan;
      text-align: left;
      --primary-text-color: white;
      --secondary-text-color: white;
      background-color: 
        {% if is_state('light.pergolax_external_blue', 'on') %} {{ states('sensor.on_colour') }}
        {% else %} {{ states('sensor.off_colour') }}
        {% endif %};
    }


type: tile
entity: sensor.aqara_outside_kitchen_voc_air_quality
name: OS air quality
card_mod:
  style: |
    ha-card {
     --primary-text-color: yellow;
      border: 1px solid darkcyan;
      background-color: #333322;
      text-align: left;
    }

And here are two cards I’ve converted over to mushroom cards – slightly more code but much more control… Note in the cards above, I had no luck colouring primary and secondary text (title and state) differently and just left in WHITE as placemarkers. Note also the LEFT justification – that’s because RIGHT justification stopped working properly months ago and I got no-where asking in the various HA forums.

In the mushroom template cards below, RIGHT justification will work properly and I’m well into converting my various tiles over. Mushroom template cards don’t handle icon colouring the same as the tile, but I’ve been able to add that back in with a line of code. Note also that hex colours are handled slightly differently in the basic card than they are in card_mod, hence the quotes around icon colour green #00ff00 in the former, no quote in the latter – this is important. I used #00ff00, as green for icons initially came up very dim – not full-on green as you might expect.

All of this looks more complicated than need be but the solution works. card_mod is not supported by the visual editor hence the use of YAML code.

type: custom:mushroom-template-card
primary: Int Green
secondary: "{{ 'On' if is_state('light.pergolax_internal_green', 'on') else 'Off' }}"
entity: light.pergolax_internal_green
icon: mdi:spotlight-beam
icon_color: >
  {{ '#00ff00' if is_state('light.pergolax_internal_green', 'on') else
  'var(--rgb-state-light-inactive)' }}
tap_action:
  action: toggle
hold_action:
  action: more-info
card_mod:
  style: |
    ha-card {
      border: 1px solid darkcyan;
      text-align: left;
      --card-primary-color: cyan;
      --card-secondary-color: 
        {% if is_state('light.pergolax_internal_green', 'on') %} #00ff00
        {% else %} var(--rgb-state-light-inactive)
        {% endif %};
      background-color: 
        {% if is_state('light.pergolax_internal_green', 'on') %} {{ states('sensor.on_colour') }}
        {% else %} {{ states('sensor.off_colour') }}
        {% endif %};
    }


type: custom:mushroom-template-card
primary: Solar batteries
secondary: "{{ (states.sensor.officepanel_analog_range.state) | round(0) }}{{'v'}}"
icon: mdi:battery
entity: sensor.officepanel_analog_range
icon_color: orange
card_mod:
  style: |
    ha-card {
      border: 1px solid darkcyan;
      background-color: #002200;
      text-align: left;
      --card-primary-color: cyan;
      --card-secondary-color: yellow;
    }

This is good – but note however that unlike the tile which does this automatically, the mushroom template card seems unable to dynamically change the icon colour depending on the current colour of the light entity. Indeed it seems unable to dynamically change the icon colour at all though fixed colours work as above. Any ideas, anyone? See above the line for OFF in the custom-template-card..

'var(--rgb-state-light-inactive)'

That var isn’t actually working – so I may have to sustiture that with a fixed grey colour to emulate the original tile. ‘#a9a9a9’ looks like the inactive colour.

Note also that while the tile card allows you to change light colours (rgb lamp) by simply clicking OFF the icon, the custom-template-card allows you to click anywhere on the card for on-off and you have to long-click the card to do colour and intensity changes – that’s not a bad idea.

Update: With a little extra code and a lot of trial and error, I now have a setup whereby I can control the [primary and secondary text – and in the case of RGB lights, also fully control the icon colour – that took more effort than I care to think about. Convering the state of the light in RGB into something the mushroom card can handle was not a lot of fun. See under icon colour (color) I cfame up with a static colour basded on the RGB components of the light. It didn’t help that editing in Home Assistant’s YAML editor (which I use as you can dynamically test results while you develop) is painful otherwise – the static hex value leading hash makes the editor treat the line as a comment – hence grey – also I can find no way in there to wrap lines non-destructively and the editor will not resize, so you end up doing a lot of sliding back and forth in a window. However, perhaps the end justifies the means.

type: custom:mushroom-template-card
primary: Window left
secondary: "{{ 'On' if is_state('light.athom7w_1', 'on') else 'Off' }}"
entity: light.athom7w_1
icon: mdi:lightbulb
icon_color: |2-
    {% if is_state('light.athom7w_1', 'on') %}
      #{{ '%02x' % state_attr('light.athom7w_1', 'rgb_color')[0] }}{{ '%02x' % state_attr('light.athom7w_1', 'rgb_color')[1] }}{{ '%02x' % state_attr('light.athom7w_1', 'rgb_color')[2]  }}
    {% else %}
      #a9a9a9
    {% endif %}
tap_action:
  action: toggle
hold_action:
  action: more-info
card_mod:
  style: |
    ha-card {
      border: 1px solid darkcyan;
      text-align: right;
      --card-primary-color: cyan;
      --card-secondary-color: 
        {% if is_state('light.athom7w_1', 'on') %} #00ff00
        {% else %} var(--rgb-state-light-inactive)
        {% endif %};
      background-color: 
        {% if is_state('light.athom7w_1', 'on') %} {{ states('sensor.on_colour') }}
        {% else %} {{ states('sensor.off_colour') }}
        {% endif %};
    }

And coming up for the November release – more control over layout with up to 12 possible widths for tiles as against the current 4.