starred/homeassistant-visionos-theme
1
0
Fork 0
mirror of https://github.com/Nezz/homeassistant-visionos-theme.git synced 2026-05-09 08:25:57 +02:00
Code Issues 10 Projects Packages Wiki Activity

[GH-ISSUE #8] Blur doubly applied for custom:mushroom-chips-card #9

New issue
Closed
opened 2026-05-07 00:17:09 +02:00 by BreizhHardware · 4 comments
BreizhHardware commented 2026-05-07 00:17:09 +02:00
Owner
Copy link

Originally created by @basnijholt on GitHub (Sep 8, 2024).
Original GitHub issue: https://github.com/Nezz/homeassistant-visionos-theme/issues/8

Hi @Nezz,

I thought to look up what happened to your awesome work on adding blur to the frontend (previously you mentioned this on https://github.com/basnijholt/lovelace-ios-themes.)

I noticed you created this awesome theme!

I decided to copy the blur bits here (still WIP) and noticed some problems.

For example:

image

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

Seems to be fixed by adding card_mod:

  - 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:
...

However, this is not a nice solution.

Since you seem to have a lot more frontend experience, I thought you might have a better idea.

Originally created by @basnijholt on GitHub (Sep 8, 2024). Original GitHub issue: https://github.com/Nezz/homeassistant-visionos-theme/issues/8 Hi @Nezz, I thought to look up what happened to your awesome work on adding blur to the frontend (previously you mentioned this on https://github.com/basnijholt/lovelace-ios-themes.) I noticed you created this awesome theme! I decided to copy [the blur bits here](https://github.com/basnijholt/lovelace-ios-themes/pull/79) (still WIP) and noticed some problems. For example: <img width="470" alt="image" src="https://github.com/user-attachments/assets/b284bf3b-9bf0-465f-bd31-82e6231e1f74"> Using ```yaml 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 ``` Seems to be fixed by adding `card_mod`: ```yaml - 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: ... ``` However, this is not a nice solution. Since you seem to have a lot more frontend experience, I thought you might have a better idea.
BreizhHardware 2026-05-07 00:17:09 +02:00
BreizhHardware commented 2026-05-07 00:17:11 +02:00
Author
Owner
Copy link

@Nezz commented on GitHub (Sep 9, 2024):

Sounds like an issue with mushroom-chips-card. Is ha-card nested three times in that case?

<!-- gh-comment-id:2337394729 --> @Nezz commented on GitHub (Sep 9, 2024): Sounds like an issue with mushroom-chips-card. Is `ha-card` nested three times in that case?
BreizhHardware commented 2026-05-07 00:17:11 +02:00
Author
Owner
Copy link

@basnijholt commented on GitHub (Sep 10, 2024):

It is custom:mushroom-chips-card nested in entities. So nested twice (depending on your counting ;)

<!-- gh-comment-id:2339526535 --> @basnijholt commented on GitHub (Sep 10, 2024): It is `custom:mushroom-chips-card` nested in `entities`. So nested twice (depending on your counting ;)
BreizhHardware commented 2026-05-07 00:17:11 +02:00
Author
Owner
Copy link

@Nezz commented on GitHub (Feb 12, 2025):

I checked this and the backdrop filter should be disabled on the mushroom chips card here:
github.com/piitaya/lovelace-mushroom@fea08b4534/src/cards/chips-card/chips-card.ts (L120)

I'm not a mushroom user, so I don't feel like I have enough context to contribute as it might break things elsewhere without a good understanding of where these cards might show up.

<!-- gh-comment-id:2654002958 --> @Nezz commented on GitHub (Feb 12, 2025): I checked this and the backdrop filter should be disabled on the mushroom chips card here: https://github.com/piitaya/lovelace-mushroom/blob/fea08b453412c0eda72accd8b7d8a7fd6511d13b/src/cards/chips-card/chips-card.ts#L120 I'm not a mushroom user, so I don't feel like I have enough context to contribute as it might break things elsewhere without a good understanding of where these cards might show up.
BreizhHardware commented 2026-05-07 00:17:12 +02:00
Author
Owner
Copy link

@Nezz commented on GitHub (Aug 10, 2025):

The issue should be fixed in release 2.0, let me know if it doesn't work.

<!-- gh-comment-id:3172601425 --> @Nezz commented on GitHub (Aug 10, 2025): The issue should be fixed in release 2.0, let me know if it doesn't work.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
master
sample
static
3.0.2
3.0.1
3.0
2.7.1
2.7
2.6.5
2.6.4
2.6.3
2.6.2
2.6.1
2.6
2.0
1.4
1.3
1.2
1.1
1.0
Labels
Clear labels   
bug

   
bug

   
bug

   
duplicate

   
duplicate

   
pull-request
Mirrored from GitHub Pull Request

  
third party

   
third party
No labels
bug
bug
bug
duplicate
duplicate
pull-request
third party
third party
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/homeassistant-visionos-theme#9
No description provided.