Add backgroud blur

[basnijholt]

Inspired by https://github.com/Nezz/homeassistant-visionos-theme

[basnijholt]

Will have this issue: Nezz/homeassistant-visionos-theme#4 home-assistant/frontend#20725

[basnijholt]

Also:

Using

entities:
  - type: custom:mushroom-chips-card
    alignment: center
    chips:
      - type: template
        icon: mdi:sofa
        content: |
          Living room
        icon_color: |-
          {% if is_state('binary_sensor.activity_in_living_room', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_in_living_room
        tap_action:
          action: more-info
      - type: template
        icon: mdi:knife
        content: |
          Kitchen
        icon_color: |-
          {% if is_state('binary_sensor.activity_in_kitchen', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_in_kitchen
        tap_action:
          action: more-info
      - type: template
        icon: mdi:bed-king
        content: |
          Bedroom
        icon_color: |-
          {% if is_state('binary_sensor.activity_in_master_bedroom', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_in_master_bedroom
        tap_action:
          action: more-info
      - type: template
        icon: mdi:baby
        content: |
          Baby room
        icon_color: |-
          {% if is_state('binary_sensor.activity_in_baby_room', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_in_baby_room
        tap_action:
          action: more-info
      - type: template
        icon: mdi:bed
        content: |
          Guest room
        icon_color: |-
          {% if is_state('binary_sensor.activity_in_guest_room', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_in_guest_room
        tap_action:
          action: more-info
      - type: template
        icon: mdi:washing-machine
        content: |
          Utility room
        icon_color: |-
          {% if is_state('binary_sensor.activity_in_utility_room', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_in_utility_room
        tap_action:
          action: more-info
      - type: template
        icon: mdi:garage
        content: |
          Outside house
        icon_color: |-
          {% if is_state('binary_sensor.activity_outside_house', 'on') %}
            amber {% else %} white {% endif %}
        entity: binary_sensor.activity_outside_house
        tap_action:
          action: more-info
  - type: divider
  - type: custom:mushroom-chips-card
    alignment: center
    chips:
      - type: template
        entity: binary_sensor.mailbox_vibration
        icon: mdi:mailbox
        icon_color: |-
          {% if is_state('input_boolean.mailbox_full', 'on') %}
            amber {% else %} white {% endif %}
        tap_action:
          action: call-service
          service: input_boolean.toggle
          target:
            entity_id: input_boolean.mailbox_full
          data: {}
        content: |-
          {% if is_state('input_boolean.mailbox_full', 'on') %}
            Got mail! {% else %} No mailbox activity {% endif %}
      - type: template
        entity: switch.space_heater
        icon: mdi:patio-heater
        icon_color: |-
          {% if is_state('switch.space_heater', 'on') %}
            amber {% else %} white {% endif %}
        tap_action:
          action: toggle
        content: |-
          {% if is_state('switch.space_heater', 'on') %}
            Space heater on {% else %} Space heater off {% endif %}
show_header_toggle: false
title: Activity
type: entities
state_color: true

Can be fixed by:

  - type: entities
    entities:
      - type: custom:mushroom-chips-card
        alignment: center
        card_mod:
          style: |
            ha-card {
                --ha-card-background: rgba(0, 0, 0, 0);
                --ha-card-backdrop-filter: blur(-1px) !important;
            }
        chips:
...

[Nezz]

Note that using a backdrop filter breaks all sorts of dropdowns and popup menus (because the library HA uses it pretty old and does not support it), so it makes themes quite hard to use for editing automations and more advanced stuff. It's great for viewing though.

See Nezz/homeassistant-visionos-theme#2 and Nezz/homeassistant-visionos-theme#4

[basnijholt]

Yes I found that problem on your repo and already encountered it myself in testing.

I think for the time being, I cannot make the switch here as many people will be unhappy, haha.