Card Mod Styles Disappearing

[Daniel-dev22]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

I know card mod is custom but it appears that everytime I save a card mod style it saves but when I go to edit the card the style is removed so if I make a change elsewhere and save the styles are removed.

This is happening on all cards with different card mod style configurations.

I noticed this happening lately and I recall a similar issue years ago with fire dom event not being recognized by the frontend and dropping the keys.

Is it possible these keys are now being dropped too?

          card_mod:
              style: |
                ha-card {
                  padding-bottom: 0px !important;
                  padding-right: 0px !important;
                  padding-left: 0px !important;
                  --card-secondary-font-size: 11px;
                  --ha-card-background: transparent;
                  --ha-card-border-radius: 0px;
                  --ha-card-box-shadow: 0px;
                  --icon-size: 60px;
                  margin-right: -40px;
                }

Describe the behavior you expected

My card mod style to be saved and still remain when I come back and edit the file.

Steps to reproduce the issue

1. Use card mod to customize a card click save
2. Return to card and find the styles are removed when you open the editor

...

What version of Home Assistant Core has the issue?

2024.11.3

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Companion app

Which operating system are you using to run this browser?

No response

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[ildar170975]

1. card-mod is a custom plugin & there is a registered issue: card-mod code may be not saved in UI editor - or just auto-deleted after typing - or may not be shown in editor thomasloven/lovelace-card-mod#337
2. It happens to some cards only.
3. It started to happen a year ago.

[karwosts]

Do not reproduce with stock frontend. I do not use card mod but just doing this to note that the editor does not eat the keys on its own.

Unless someone can show that the actual core frontend has a bug, I will probably close this as off topic, as it seems like a card mod bug. Can you reproduce this behavior of missing yaml in safe mode?

I will say that I note that when I add a card_mod key it disables the visual editor. Yet in all the screenshots of this issue show card mod still has the visual editor available when using a card_mod key. I would tend to suspect something in the way that is hacked in might be contributing to this, I have seen issues where visual editor can mess up the yaml if it is not properly disabled.

[ildar170975]

Do not reproduce with stock frontend

Try with custom:bar-card (thomasloven/lovelace-card-mod#337 (comment)), Tile (thomasloven/lovelace-card-mod#337 (comment))

[karwosts]

Not interested in custom cards behavior. Don't see an issue with tile.

[Daniel-dev22]

Do not reproduce with stock frontend. I do not use card mod but just doing this to note that the editor does not eat the keys on its own.

Unless someone can show that the actual core frontend has a bug, I will probably close this as off topic, as it seems like a card mod bug. Can you reproduce this behavior of missing yaml in safe mode?

I will say that I note that when I add a card_mod key it disables the visual editor. Yet in all the screenshots of this issue show card mod still has the visual editor available when using a card_mod key. I would tend to suspect something in the way that is hacked in might be contributing to this, I have seen issues where visual editor can mess up the yaml if it is not properly disabled.

Interesting that it disables the visual editor for you. When use the mushroom cards or vertical/horizontal stack it doesn't disable the editor when card_mod key is present.

[ildar170975]

Don't see an issue with tile.

Well, I see. The card-mod code is not added into Editor - thus a preview not styled.
But a card on a background is still red.

In raw editor the style still present:

      - type: tile
        entity: sensor.system_monitor_processor_use
        card_mod:
          style: |
            ha-card {
              --tile-color: red !important;
            }

Also, I do not see any changes on your gif - a color is not changed like you have no card-mod installed.
Are you sure you have it installed?

[karwosts]

Correct I am not using card mod, I said that in my original post.

Do not reproduce with stock frontend. I do not use card mod but just doing this to note that the editor does not eat the keys on its own.

Just trying to prove that this is not something frontend is responsible for, and belongs on card mod repo.

[ildar170975]

and belongs on card mod repo.

Seems to be so.

Also,

Not interested in custom cards behavior

I do you think that a custom bar-card may affect Editor differently than a stock Tile? Do not think so.

[karwosts]

I do you think that a custom bar-card may affect Editor differently than a stock Tile? Do not think so.

I would suspect it's something related to custom visual editors. I suspect the visual editor is somehow eating it. Do not know if that behavior is part of custom bar-card or card-mod itself.

[ildar170975]

As for card-mod - it does not have a custom visual editor. Interesting that it happens to some cards only. For instance, does not to Entities card - but does to Tile.

[karwosts]

• but does to Tile.

When you add card_mod key to stock Tile, does it show the "visual editor disabled" warning?

[ildar170975]

When you add card_mod key to stock Tile, does it show the "visual editor disabled" warning?

Does not:

After switching to UI editor:

After switching back:

After saving & reopening:

[ildar170975]

As for Entities card - no warnings "visual editor disabled" as well, the card-mod code is shown after reopening:

[karwosts]

Some custom code you have installed is allowing you to use the visual editor still when unknown keys are present. I guess that has to be card mod patching over the normal code overriding that behavior.

[ildar170975]

For the record - for Entity card this warning is shown:

but card-mod code is also shown after saving & reopening.
So, difficult case ))))

[karwosts]

Suspicious: https://github.com/thomasloven/lovelace-card-mod/blob/master/src/patch/hui-card-element-editor.ts#L15

[ildar170975]

Hmm, this file (at least it's name) proves that card-mod does something to Editor.
Imho THIS issue should be closed - but would be great to continue discussing the problem.

Another observation is that the problem more happens with cards with single "entity" key, not "entities".

[WRoss7]

@karwosts, @ildar170975
My theme is broken.
And I confirm that the problem exists even with entities card. See the example below:

type: entities
show_header_toggle: false
state_color: false
entities:

• entity: sensor.processor_use
  name: CPU
  card_mod:
  style: >-
  {% if states('sensor.processor_use') | float(0) > 2.5 and
  states('sensor.processor_use') | float(0) <= 5 %}
  div {
  color: wheat;
  font-weight: bold;
  }
  .....

This allowed me to color the value and consequently the unit of measurement, leaving the entity text unchanged.

Now, if I am not mistaken, the color variable is inherited from :host

@karwosts, I understand your point of view, but since something broke the themes (I assume to several people), and the last card-mod update was on March 13, I don't agree with closing this bug.

[ildar170975]

@WRoss7
Check the main card-mod thread, there was an issue in 2025.1 caused by some PR and we found a fix.
It is meaningless to report here...

[WRoss7]

@ildar170975
sorry but I didn't know where to bring it back because, as written above, my theme is broken before 2025.1.
Now I have opened a bug in card-mod, but I don't think it is correct for what I wrote above: unless I am completely wrong, the problem lies on the frontend side

[karwosts]

This bug was about the visual editor only. It has nothing to do with your themes being applied outside the visual editor.