ha-lcars
ha-lcars copied to clipboard
th3jesta
Set button colour to match active light colour
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.
Can you provide some screenshots of what you are describing, please? I think I am following, but I want to be sure.
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.
this is from another dashboard - each light button shows the colour it’s set to.
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).
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?
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.
Something like this:
- color: > [[[ if (entity.state === 'on') return "rgb(" + states['light.zachs_lamp'].attributes.rgb_color + ")";]]]
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 %}
}
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
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: @.***>
@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 %}
}