Set button colour to match active light colour

[Xiondewah]

On other cards (custom-button) I am able to change the colour of the button to match that of the light when it is turned on.

This involves using 'state' and a variable which holds the colour of the light when it is turned on.

Am I able to do this on LCARS please and, if so, how? I've scoured the web but can't find anything which pulls in that colour variable.

Many thanks.

[th3jesta]

Can you provide some screenshots of what you are describing, please? I think I am following, but I want to be sure.

[Xiondewah]

I ‘ve worked out how to change a specific button’s colour depending on state, but somewhere there is a variable holding a light’s active colour when it’s turned on. That’s what I’m looking for, the variable. On other things it’s var(--button-card-light-color) but that doesn’t work here.

[Xiondewah]

this is from another dashboard - each light button shows the colour it’s set to.

[th3jesta]

The card colors are hard-coded in the CSS via card-mod using the variables. So you would probably need to apply some custom CSS to the cards themselves with card-mod (this is the basic functionality of card-mod, as opposed to the entire theme as has been done with LCARS).

[Xiondewah]

Hi, yes I get that - I can do it all (apply a colour/border depending on the state (on/off) of the light - what I can't find out is the variable which holds the current colour of the light. It must be built-in to Home Assistant somehow?

[Xiondewah]

card_mod:
class: button-bullet
style: |
ha-card {
border: {{ '3px solid gold' if is_state('light.desk_lamp', 'on') else '' }};
}

I want to replace 'gold' with the light's colour.

[Xiondewah]

Something like this:

• color: >
  [[[ if (entity.state === 'on') return "rgb(" +
  states['light.zachs_lamp'].attributes.rgb_color + ")";]]]

[z3r0l1nk]

Hi,
I have something like this.
It changes if its ON = yellow and OFF = RED.
Code is below the screenshot

type: horizontal-stack
cards:
  - show_name: true
    show_icon: false
    name: Server Room
    type: button
    tap_action:
      action: toggle
    entity: light.it_room_5afc8b25_on_off
    icon_height: 50px
    show_state: true
    card_mod:
      class: button-capped
      style: |
        ha-card.button-capped {
          {% if is_state('light.it_room_5afc8b25_on_off', 'on') %}
            background-color: #ffcc33;
            color: black;
          {% else %}
            background-color: #dd4444;
            color: black;
          {% endif %}
        }

[Xiondewah]

Hi - thanks for this. I can actually do that already. What I really wanted was to set the button colour to that of the light, which I can do outside of the theme 😄 On 7 Jul 2023, at 08:10, Mihai ***@***.***> wrote: Hi, I have something like this. It changes if its ON = yellow and OFF = RED. Code is below the screenshot [image]<https://user-images.githubusercontent.com/31653632/251664739-b029aa61-d27d-4e29-80d0-9072ab8fe080.png> type: horizontal-stack cards: * show_name: true show_icon: false name: Server Room type: button tap_action: action: toggle entity: light.it_room_5afc8b25_on_off icon_height: 50px show_state: true card_mod: class: button-capped style: | ha-card.button-capped { {% if is_state('light.it_room_5afc8b25_on_off', 'on') %} background-color: #ffcc33; color: black; {% else %} background-color: #dd4444; color: black; {% endif %} } — Reply to this email directly, view it on GitHub<#32 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AL5ZTQKB6YF23TZQMHILYETXO6Y55ANCNFSM6AAAAAATWLLMT4>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[z3r0l1nk]

@Xiondewah, sorry for the late late answer...here are the modifications that I also did in my system.
I think this is what you wanted and it's a great ideea.

show_name: true
show_icon: false
name: Terasa Light
type: button
tap_action:
  action: toggle
entity: light.terasa
show_state: true
hold_action:
  action: more-info
icon_height: 50px
card_mod:
  class: button-capped-right
  style: |
    ha-card {
      {% if is_state('light.terasa', 'on') %}
        {% set rgb_color = state_attr('light.terasa', 'rgb_color') %}
        background-color: rgba({{ rgb_color[0] }}, {{ rgb_color[1] }}, {{ rgb_color[2] }}, 1);
        color: black;  /* or any other logic for text color */
      {% else %}
        background-color: #dd4444;
        color: black;
      {% endif %}
    }

[Xiondewah]

Brilliant! Thanks 😁 Message ID: ***@***.***>