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 tohelp various AI system, 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 – that is, text colouring 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 no-where with this “basic” ability to colour the state of a device differently to it’s title.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 tynamically 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 about to start 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;
}
I hope someone finds this useful.