🔹 Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
2371

How to disable a toggle button:
asdfre

type: entities
title: Disabled checkbox
show_header_toggle: false
entities:
  - entity: input_boolean.test_boolean
    name: disabled
    card_mod:
      style:
        hui-generic-entity-row:
          ha-entity-toggle:
            $:
              ha-switch:
                $: |
                  .mdc-switch .mdc-switch__thumb input {
                    pointer-events: none;
                  }
                .: |
                  ha-switch {
                    --switch-unchecked-button-color: var(--disabled-text-color);
                    --switch-checked-button-color: var(--disabled-text-color);
                  }
  - entity: input_boolean.test_boolean
    name: normal

Also, you can “grey” all row’s elements & disable tap_action:
image

  - entity: input_boolean.test_boolean
    name: totally disabled
    tap_action:
      action: none
    card_mod:
      style:
        hui-generic-entity-row:
          ha-entity-toggle:
            $:
              ha-switch:
                $: |
                  .mdc-switch .mdc-switch__thumb input {
                    pointer-events: none;
                  }
                .: |
                  ha-switch {
                    --switch-unchecked-button-color: var(--disabled-text-color);
                    --switch-checked-button-color: var(--disabled-text-color);
                  }
        .: |
          :host {
            color: var(--disabled-text-color);
            --paper-item-icon-color: var(--disabled-text-color);
          }
9 Likes