Disable state and color change of light button when person not home

Configuration Frontend
1

Hello,

I have tried with the mushroom light card and cardmod style and did not succeed…

- type: custom:mushroom-light-card
    entity: light.keuken_centraal
    card_mod:
      style: |
        ha-state-icon {
          color: grey;
        }
        mushroom-light-brightness-control$: |
          mushroom-slider {
          --main-color: grey !important;
          --bg-color: grey !important;
          }
        mushroom-shape-icon$: |
          .shape {
            --shape-color: grey !important;
          }
    name: Keukenblok
    show_brightness_control: true
    secondary_info: none

I can enclose this in:

{% set olivier = states['person.olivier'].state %}
{% if olivier != 'home' %}
{% endif %}

But this does not work ? Lamp is grey but background still lights up… And slider is also orange stil…

Then I tried to go back to a simple light button card with this code but it does not work either ?

type: light
entity: light.keuken_centraal
name: Keukenblok
hold_action:
  action: toggle
card_mod:
  style: |
    {% set olivier = states['person.olivier'].state %}
    {% if olivier != 'home' %}
    ha-card {
      --state-light-color: grey !important; /* Icoon kleur */
      --state-light-color-no-temperature: grey !important; /* Voor sommige lampen */
      opacity: 0.5;
    }
    .card-content, .name, .info {
      color: grey !important; /* Tekst grijs maken */
    }
    {% endif %}

Does anyone know how to solve this ?

So I want to show normal functionality when Olivier is home… But when olivier is not home the light button should not show the state of the light. So, should be gray and slider not visible…

Driving me crazy :wink:

thanx

2

Are you positive your ha-card fields are correct?

Try simplifying your code, then work through each issue.

type: light
entity: light.keuken_centraal
name: Keukenblok
hold_action:
  action: toggle
card_mod:
  style: |
    {% set olivier = states('person.olivier') %}
    {% if olivier != 'home' %}
     ha-card {
      background-color: red !important; 
    {% endif %}
3

thank you

with this the background color of the card is red…

Can you guide me where I can find the other properties that I can set ?

How do I keep the color of the icon grey ?
state_color: false ?

how can i make the slider invisible when Olivier not present ?

I have looked everytwhere but I dont find how

thank you !

4

OK ! I managed to get the light bulb gray !

type: light
entity: light.keuken_centraal
name: Keukenblok
hold_action:
  action: toggle
card_mod:
  style: |
    {% set olivier = states('person.olivier') %}
    {% if olivier != 'home' %}
     ha-card {
      --card-mod-icon-color: grey
    {% endif %}

but now how to disable the slider or make the slider gray ?

1 Like
5

Alright guys,

I found a solution ! This is working for me on a normal light card:

entity: light.keuken_centraal
name: Keukenblok
hold_action:
  action: toggle
card_mod:
  style: |
    {% set olivier = states('person.olivier') %}
    {% if olivier != 'Thuis' %}
     ha-card {
      --card-mod-icon-color: grey
     }
     round-slider {
      display: none !important;
    }
    #controls {
      justify-content: flex-start;
      height: auto; 
      align-items: center;
      min-height: 200px;    
    }
    {% endif %}

It appears to be ‘round-slider’ that we have to change the display property of…

Anyone know how I can temporarely set the state of a person to check if it works ?

6

Select a person entity in Dev tools → State and set whatever you want:

image
image415×316 11 KB