Card mod stops working when used in theme file and card config at the same time.

thisisbohau commented 7 months ago

My Home Assistant version: 2023.11.2

My lovelace configuration method (GUI or yaml): yaml

What I am doing: using card mod in a theme file and card configuration at the same time (for example changing BG-color on theme level and setting text-color on card level. Or trying to style a single card which is never styled using the theme)

What I expected to happen: the card mod added in the theme and in the card config being applied as intended.

What happened instead: Once there is any card mod code in the theme file ALL the card mod used in cards stops working until you remove the card mod from the theme level. So at the moment it is only possible to use card mod in the theme OR in individual cards. Using a combination breaks any card-level-code. But the docs clearly state that you can you both theme-level and card-level card-mod styling simultaneously.

Minimal steps to reproduce:

//in the configuration.yaml
card-mod-theme: homeplus
    card-mod-card: |
      ha-card {
        background: rgba( 28, 28, 18, 0.5 );
        backdrop-filter: blur( 20px );
        -webkit-backdrop-filter: blur( 20px );

        border: 0px;
        border-radius: 18px;
        }

// in a card config
card_mod:
style: |
  ha-card {
    font-size: 3rem;
    font-weight: bold;
    background-color: rgba(0,0,0,0) !important;
    border: 0px;
    margin-top: 4rem; 
  }

Error messages from the browser console: None, just no visual changes.

By putting an X in the boxes ([]) below, I indicate that I:

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

ildar170975 commented 7 months ago

There are indentation problems in your code.

Check my example - it works:

test_minimal:
card-mod-theme: test_minimal
card-mod-card: |
  ha-card {
    background-color: lightblue !important;
  }

type: entities
entities:
- entity: sun.sun
card_mod:
style: |
ha-card {
  color: red;
}

thisisbohau commented 7 months ago

The indentation is correct, it just moved when I copy-pasted it. I tried it again with your exact example and it still does not work. Could it be that this is an issue with custom themes? I created a custom theme from scratch which manages all the colors, fonts and so an and only added the card mod to style background colors and so on. Maybe this issue only occurs when you are using a non-standard-theme.

My theme currently has the following configuration:

homeplus:
      lovelace-background: none
      bg-primary: "#1e1e1e"
      bg-secondary: "#282828"
      bg-tertiary: "#363636"
      main-accent-color: "#4a5fd9"
      text-primary: "#ffffff"
      text-secondary: "#989899"
      text-tertiary: "#5a5a5e"
      disabled-color: "#989899"

      disabled-text-color: "#303030"

      primary-color: var(--main-accent-color)
      dark-primary-color: var(--main-accent-color)
      accent-color: var(--main-accent-color)
      divider-color: "rgba(0, 0, 0, .12)"
      scrollbar-thumb-color: "rgb(194, 194, 194)"
      card-background-color: var(--bg-secondary)

      secondary-background-color: var(--bg-secondary)
      clear-background-color: var(--bg-primary)
      header-height: "60px"

      input-idle-line-color: var(--main-accent-color)
      input-hover-line-color: var(--main-accent-color)
      input-disabled-line-color: var(--disabled-color)
      input-outlined-idle-border-color: var(--text-secondary)
      input-outlined-hover-border-color: var(--main-accent-color)
      input-outlined-disabled-border-color: var(--disabled-color)
      input-fill-color: var(--bg-tertiary)
      input-disabled-fill-color: var(--bg-tertiary)
      input-ink-color: var(--text-primary)
      input-label-ink-color: var(--text-primary)
      input-disabled-ink-color: var(--disabled-color)
      input-dropdown-icon-color: var(--main-accent-color)
      app-header-background-color: "rgba( 28, 28, 18, 0.5)"
      primary-background-color: var(--bg-primary)
      sidebar-icon-color: var(--text-secondary)
      rgb-card-background-color: var(--bg-primary)

      mush-title-font-size: "2rem"
      mush-title-font-weight: "bold"
      state-active-color: var(--main-accent-color)
      state-inactive-color: var(--text-secondary)
      state-unavailable-color: var(--disabled-color)

      text-primary-color: var(--text-primary)
      primary-text-color: var(--text-primary)
      secondary-text-color: var(--text-secondary)

      card-mod-theme: homeplus
      card-mod-card: |
        ha-card.type-custom-html-template-card{
          background-color: red;
        }
        ha-card {
          background: rgba( 28, 28, 18, 0.5 ) !important;
          backdrop-filter: blur( 20px );
          -webkit-backdrop-filter: blur( 20px );

          border: 0px solid black;
          border-radius: 18px;

        {%if is_state(config.entity, 'on') or is_state(config.entity, 'open') or is_state(config.entity, 'unlocked')%}
            background: white !important;
            --primary-text-color: black;
            --secondary-text-color: black;
        {%else%}
          --primary-text-color: var(--text-primary);
          --secondary-text-color: var(--text-secondary);
        {%endif%}
        }

        {%if is_state(config.entity, 'on') or is_state(config.entity, 'open') or is_state(config.entity, 'unlocked')%}
          ha-tile-info$: |
          .primary {
            color: black !important;
          }
          .secondary{
            color: black !important;
          }
        {%else%}
        .primary {
            color: var(--text-primary);
          }
        .secondary{
          color: var(--text-secondary) !important;
        } 
        {%endif%}
        }

      card-mod-root: |
        ha-app-layout, div#view {
          background: url('/local/backgroundSunrise.png') !important;
          background-size: cover;
        }
        app-header, div.header {
          background-color: rgba( 28, 28, 18, 0.5 ) !important;
          backdrop-filter: blur( 20px );
          -webkit-backdrop-filter: blur( 20px );
        }
        app-toolbar, div.toolbar {
          background: none !important;
        }
        ha-tabs{
          text-transform: none !important;
        }

        paper-tab.iron-selected{
          font-size: 1.5rem !important;
          font-weight: bold;
        }

please excuse any redundant code, I was trying everything to solve this issue myself.

The card mod on card level is exactly the way you showed, but nothing is happening. It is also not a cache issue or issue with element selection. I checked that multiple times.

ildar170975 commented 7 months ago

Maybe this issue only occurs when you are using a non-standard-theme.

My test theme I provided is also non-standard.

Here is what I noticed: Isn't it a wrong bracket?

thisisbohau commented 7 months ago

I removed all the card mod and added it back one block at a time. I have narrowed the issue down to this block:

{%if is_state(config.entity, 'on') or is_state(config.entity, 'open') or is_state(config.entity, 'unlocked')%}
  background: white !important;
  --primary-text-color: black;
  --secondary-text-color: black;
{%else%}
  --primary-text-color: var(--text-primary);
  --secondary-text-color: var(--text-secondary);
{%endif%}

And when I remove the if-else-condition card mod starts working again! The issue is the {%if is_state(config.entity, 'on') or is_state(config.entity, 'open') or is_state(config.entity, 'unlocked')%}condition, but I do not see any issue with the code itself.

Does the conditional code interfere with anything?

PS: Thanks for your quick response, really appreciate it!

ildar170975 commented 7 months ago

I pointed you to a wrong bracket.

As for conditional styles - there are 2 ways:

elem_1 {
{% if ... %}
prop: value;
{% endif %}
}
elem_2 {
{% if ... %}
prop: value;
{% endif %}
}

vs

{% if ... %}
elem_1 {
prop: value;
}
elem_2 {
prop: value;
}
{% endif %}

they both work OK in "not themes" application; cannot say if the 2nd way works fine in a theme as well.

thisisbohau commented 7 months ago

I fixed the issue with the wrong bracket and removed everything except the condition block to troubleshoot further.

If I add this, card mod still breaks: {% if is_state(config.entity, 'on') %} But if I add this: {% if true %} it works as expected. But I got is_state(config.entity, 'on')from the theme example docs.

I just do not get how the condition itself can break card-level code. I also tried both versions of the conditional code, same result.

thisisbohau commented 7 months ago

Bildschirmfoto von Safari (13-11-23, 13-32-22)

ildar170975 commented 7 months ago

The config.entity variable is defined for SOME cards/card elements. In other cases causes error. Should be like

{% if config.entity is defined %}
  ...
{% endif %}

thisisbohau commented 7 months ago

That was it, you are awesome! I would have never spotted that, thank you so much for your help :)

ildar170975 commented 7 months ago

Close the issue if resolved)

thomasloven / lovelace-card-mod

Card mod stops working when used in theme file and card config at the same time. #313

Error messages from the browser console: None, just no visual changes.