Add backgroud blur

[basnijholt]

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

[basnijholt]

Will have this issue: https://github.com/Nezz/homeassistant-visionos-theme/issues/4 https://github.com/home-assistant/frontend/issues/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:
...