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 GitHubhttps://github.com/th3jesta/ha-lcars/issues/32#issuecomment-1624861089, or unsubscribehttps://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: @.***>