Styling via card_mod is no longer working

[majkers]

Before submitting a bug

[x ] I updated to the latest version available
[x] I cleared the cache of my browser

After updating to latest version (2.7.1) I cant style card with card_mod. In editor it seems to work but when I save it I don't see any changes:

then when I enter editor once again I have to make a single change (adding ; for example) to see my changes again but saving it produces the same result as above. It was OK in 2.6.3 version

[jumpinf00l]

I notice this myself with custom cards installed through HACS, and this doesn't seem to be isolated to vacuum-card and is possibly linked to some front end updates.

I'd suggest it's an update needing to happen to make lovelace-card-mod compatible with newer front end versions and seems to be related to lovelace-card-mod issue 281 and issue 276.

This is not to say that frontend updates are an issue; vacuum-card and lovelace-card-mod are examples of custom add-ons and are out of the scope of testing with all official Home Assistant updates.

[github-actions]

There hasn't been any activity on this issue recently. This issue has now been marked as stale and will be closed if no further activity occurs. Please, update to the latest version and check if that solves the issue.
Thank you for your contributions!

[philipjholm]

This is still a problem as styling that worked before isn't applied anymore. Any updates on this?

[luigisax]

I have the same problem. Any updates?

[sammyh2506]

Same issue for me...

[github-actions]

There hasn't been any activity on this issue recently. This issue has now been marked as stale and will be closed if no further activity occurs. Please, update to the latest version and check if that solves the issue.
Thank you for your contributions!

[MPFGlaser]

Facing the same issue.

[yperetz]

Facing this issue as well

[BoGnY]

Same problem 😢

[rgavril]

Issues is still present.

[hheimbuerger]

Not sure if this I've experiencing the same root cause, but your issue title applies, so I'm adding my findings here:

I'm not using the visual editor, I've used the card exclusively in YAML.
Neither any styles applied via the card_mod rules on the card itself applied, nor would setting any CSS variables in the theme have an effect.

Additionally, I've noticed that the <ha-card> element has a class of type-undefined. While other cards I've checked usually have a class that sounds like the card name, e.g. type-custom-mini-graph-card, type-tile, type-map, etc.

What worked for me as a workaround was to set the CSS variables (or other rules) via card-mod-card in the theme:

my-theme:
  card-mod-theme: my-theme

  card-mod-card: |
    ha-card.type-undefined {
      --vc-background: transparent;
      --vc-devider-color: transparent;
      --vc-spacing: 0;
    }

EDIT: I later found that setting --vc-devider-color doesn't actually work. While it does appear in the DOM, when the time comes to render the devider, the CSS variable is somehow back to its old value. I cannot figure out where it inherits the old value from.

[hheimbuerger]

I don't know if this is an expected side-effect of my workaround above, but my styling approach doesn't work the moment the vacuum is started or stopped. That removes all styling changes.

My guess is that the card deletes and recreates its shadow DOM, which also eliminates the card-mod injections.

A page reload of course fixes that, but for a status display, that's supposed to be mostly non-interactive, that's frustrating.

[guimatheus92]

Facing this issue as well

[IGOLz]

Having the same issue

[github-actions]

There hasn't been any activity on this issue recently. This issue has now been marked as stale and will be closed if no further activity occurs. Please, update to the latest version and check if that solves the issue.
Thank you for your contributions!

[SeanPM5]

Not stale, still a long-standing issue.

I had used card_mod so the vacuum card background color was green when vacuum in cleaning state, red when in error state, gray when paused, orange background when overdue (not vacuumed in a while), etc.

Being able to make vacuum card background color dynamic like that was very helpful to see vacuum status at a glance on my wall mount dashboard tablet. Hope the card_mod functionality can be fixed/restored at some point.

[IIIdefconIII]

Im new to this card, which so far works great, i also have the same problem with the card mod, the cord mod id working perfect on like 50 other cards in my whole HA config.

I also put a feature request feature on the i hope right place

Loce the carf so far!

[goooseman]

I found a workaround by using https://github.com/thomasloven/lovelace-card-mod?tab=readme-ov-file#styling-cards-without-an-ha-card-element

It has a warning to use only if really needed, but from the first sight it seems to work, I will keep in the loop if I will find any bugs

    type: custom:mod-card
    card_mod:
      # https://github.com/denysdovhan/vacuum-card/issues/547
      style: |
        ha-card {
          animation: breathing-shadow 1.5s infinite alternate ease-in-out;
        }
        @keyframes breathing-shadow {
          0% {
            box-shadow: 0px 0px 10px 1px #FF8C00;
          }
          100% {
            box-shadow: 0px 0px 13px 3px #FF8C00;
          }
        }
    card:
      type: "custom:vacuum-card"
      entity: vacuum.roborock_qrevo_master
      # https://www.remove.bg/upload
      image: /hacsfiles/media/roborock-qrevo.png
      stats:
        default:
          - entity_id: sensor.roborock_qrevo_master_dock_error # ok, duct_blockage, water_empty, waste_water_tank_full, maintenance_brush_jammed, dirty_tank_latch_open, no_dustbin, cleaning_tank_full_or_blocked
            subtitle: Docker error?
            value_template: '{{ value | replace("_", " ") | capitalize }}'
          - entity_id: sensor.roborock_qrevo_master_filter_time_left
            unit: h
            subtitle: Filter
            value_template: "{{ (value | float(0) / 3600) | round(0) }}"
          - entity_id: sensor.roborock_qrevo_master_side_brush_time_left
            unit: h
            value_template: "{{ (value | float(0) / 3600) | round(0) }}"
            subtitle: Side brush
          - entity_id: sensor.roborock_qrevo_master_main_brush_time_left
            unit: h
            value_template: "{{ (value | float(0) / 3600) | round(0) }}"
            subtitle: Main brush
          - entity_id: sensor.roborock_qrevo_master_sensor_time_left
            unit: h
            value_template: "{{ (value | float(0) / 3600) | round(0) }}"
            subtitle: Sensors
          - entity_id: sensor.roborock_qrevo_master_mop_drying_remaining_time
            unit: min
            value_template: "{{ (value | float(0) / 60) | round(1) }}"
            subtitle: Drying
        cleaning:
          - entity_id: select.roborock_qrevo_master_mop_intensity
            subtitle: Mop intensity
          - entity_id: select.roborock_qrevo_master_mop_mode
            subtitle: Mop mode
          - entity_id: sensor.roborock_qrevo_master_cleaning_progress
            subtitle: Cleaning %
            unit: "%"
          - entity_id: sensor.roborock_qrevo_master_cleaning_time
            value_template: "{{ (value | float(0) / 60) | round(0) }}"
            unit: min
            subtitle: Cleaning time
      shortcuts:
        - name: Clean living room
          service: script.clean_living_room
          icon: "mdi:sofa"
        - name: Clean bedroom
          service: script.clean_bedroom
          icon: "mdi:bed-empty"
        - name: Clean kitchen
          service: script.clean_kitchen
          icon: "mdi:silverware-fork-knife"

P.S. seems like changing the variables does not work this way, because the variables are applied to the parent ha-card and applying them to ha-card $ vacuum-card $ ha-card does not seem to work as I see. Anyway, I'm using it to apply custom border, so for my use-case this hack is enough.

[goooseman]

Actually found even a way to overwrite variables with card_mod

    type: custom:mod-card
    card_mod:
      # https://github.com/denysdovhan/vacuum-card/issues/547
      style:
        "vacuum-card$": |
          ha-card {
            --vc-background: #17A8F4;
            --vc-spacing: 5px;
          }
        .: |
          ha-card {
            /* Add red border if there is an error */
            {% if state_attr('sensor', 'roborock_qrevo_master_dock_error') != 'ok' %}
            animation: breathing-shadow 1.5s infinite alternate ease-in-out;
            {% else %}
            animation: none;
            {% endif %}
          }
          @keyframes breathing-shadow {
            0% {
              box-shadow: 0px 0px 10px 1px #FF8C00;
            }
            100% {
              box-shadow: 0px 0px 13px 3px #FF8C00;
            }
          }
    card:
      type: "custom:vacuum-card"
      entity: vacuum.roborock_qrevo_master
      # https://www.remove.bg/upload
      image: /hacsfiles/media/roborock-qrevo.png
      stats:
        default:
          - entity_id: sensor.roborock_qrevo_master_dock_error # ok, duct_blockage, water_empty, waste_water_tank_full, maintenance_brush_jammed, dirty_tank_latch_open, no_dustbin, cleaning_tank_full_or_blocked
            subtitle: Docker error?
            value_template: '{{ value | replace("_", " ") | capitalize }}'
          - entity_id: sensor.roborock_qrevo_master_filter_time_left
            unit: h
            subtitle: Filter
            value_template: "{{ (value | float(0) / 3600) | round(0) }}"
          - entity_id: sensor.roborock_qrevo_master_side_brush_time_left
            unit: h
            value_template: "{{ (value | float(0) / 3600) | round(0) }}"
            subtitle: Side brush
          - entity_id: sensor.roborock_qrevo_master_main_brush_time_left
            unit: h
            value_template: "{{ (value | float(0) / 3600) | round(0) }}"
            subtitle: Main brush
          - entity_id: sensor.roborock_qrevo_master_sensor_time_left
            unit: h
            value_template: "{{ (value | float(0) / 3600) | round(0) }}"
            subtitle: Sensors
          - entity_id: sensor.roborock_qrevo_master_mop_drying_remaining_time
            unit: min
            value_template: "{{ (value | float(0) / 60) | round(1) }}"
            subtitle: Drying
        cleaning:
          - entity_id: select.roborock_qrevo_master_mop_intensity
            subtitle: Mop intensity
          - entity_id: select.roborock_qrevo_master_mop_mode
            subtitle: Mop mode
          - entity_id: sensor.roborock_qrevo_master_cleaning_progress
            subtitle: Cleaning %
            unit: "%"
          - entity_id: sensor.roborock_qrevo_master_cleaning_time
            value_template: "{{ (value | float(0) / 60) | round(0) }}"
            unit: min
            subtitle: Cleaning time
      shortcuts:
        - name: Clean living room
          service: script.clean_living_room
          icon: "mdi:sofa"
        - name: Clean bedroom
          service: script.clean_bedroom
          icon: "mdi:bed-empty"
        - name: Clean kitchen
          service: script.clean_kitchen
          icon: "mdi:silverware-fork-knife"