Help with picking the colour of buttons on my dashboard

Configuration Frontend
1

Bear with me, I’m a coding rookie. I have created a dashboard and have a button card with 6 buttons that allow the turning on and off of groups of lights. The groups are helper groups created of all the lights in the specified room. The buttons have icons, the colour of the icons change depending on wether the lights in the group are on or off. When they are off all my buttons show grey. I want the icons to show a white colour when they are turned on, but only one button does this by default, the others are various colours.

I have done a bit of reading but all the things I have tried have not worked or been recognised as valid code.

What is the simplest way of achieving what I want?

square: false
type: grid
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: light.kitchen
    theme: LCARS Modern
    name: Kitchen
    icon: mdi:lightbulb
    show_state: true
    card_mod:
      class: button-lozenge
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: light.all_lights
    name: All Lights
    theme: LCARS Modern
    icon: mdi:lightbulb
    show_state: true
    card_mod:
      class: button-lozenge
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: light.livingroom_lights
    theme: LCARS Modern
    name: Livingroom
    icon: mdi:lightbulb
    show_state: true
    card_mod:
      class: button-lozenge
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: light.middle_room_lights
    name: Middle Room
    theme: LCARS Modern
    icon: mdi:lightbulb
    show_state: true
    card_mod:
      class: button-lozenge
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    theme: LCARS Modern
    name: Bedroom
    icon: mdi:lightbulb
    show_state: true
    entity: light.bedroom_lights
    card_mod:
      class: button-lozenge
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: light.ryan_s_room_lights
    name: Ryans Room
    theme: LCARS Modern
    icon: mdi:lightbulb
    show_state: true
    card_mod:
      class: button-lozenge
columns: 2
2

Further readings suggest the command I need is something like this: But it just doesn’t work. I’ve tried it on a blank card with just one element but no dice…

icon_color: |-
  {% if is_state('light.ryan_s_room_lights','on') %}
    white
  {% else %}
    black
  {% endif %}
3

Hi, i think you need custom button card or card_mod to do what you want. By default button card icon colors changes to (active icon/ inactive icon) according your theme

4

I have card_mod insalled, how would I use that to achieve what I’m after with that. Again, I’ve tried a few things but without any success.

Many thanks

5

I recommend custom button card. It’s very easy to do what you want.

state:
  - value: 'off'
    icon: mdi:air-conditioner
    color: '#000000'
  - value: cool
    icon: mdi:snowflake
    color: '#0079FF'
  - value: heat
    icon: mdi:fire
    color: '#E72929'
6

Could you send an exmple of a card with this code in it, I can’t see where in the code I should insert it. Many thanks

7

sure

type: custom:button-card
name: 'Aire acondicionado:'
icon: mdi:air-conditioner
state:
  - value: 'off'
    icon: mdi:air-conditioner
    color: '#000000'
  - value: cool
    icon: mdi:snowflake
    color: '#0079FF'
  - value: heat
    icon: mdi:fire
    color: '#E72929'
  - value: dry
    icon: mdi:water-percent
    color: '#0079FF'
  - value: fan_only
    icon: mdi:fan
    color: '#F9FBE7'
  - value: heat_cool
    icon: mdi:sun-snowflake-variant
    color: '#FBFFB1'
tap_action:
  action: more-info
show_name: false
entity: climate.aire_acondicionado
custom_fields:
  temphum: >
    [[[ return states['climate.aire_acondicionado'].attributes.temperature +
    '°C']]]
styles:
  grid:
    - grid-template-areas: '"i temphum"'
    - grid-template-columns: min-content min-content
    - grid-template-rows: min-content
  card:
    - margin-right: 0.1vw
    - border-radius: 50px
    - padding: 0px 8vw 0px 0px
    - height: 3.2vw
    - width: 7vw
  icon:
    - width: 1.8vw
    - padding: 0
  img_cell:
    - background: '#A1C398'
    - border-radius: 200px
    - width: 3.2vw
    - height: 3.2vw
  custom_fields:
    temphum:
      - justify-self: start
      - font-size: 1.2vw
      - opacity: '0.7'
      - padding-left: 0.8vw
8

Many thanks, I’ll have a try of that. I think that it’s the theme that’s stopping it.

I managed to get it working with this code:

icon_color: '{{ ''green'' if states(''light.kitchen'') == ''on'' else ''red'' }}

But once I appy the theme to the button, it stops working.

1 Like