thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.04k stars 169 forks source link

primary-text-color no longer working? #356

Open walk0080 opened 5 months ago

walk0080 commented 5 months ago

My Home Assistant version: Core 2024.1.6 | Frontend 20240104.0

My lovelace configuration method (GUI or yaml): yaml

What I am doing:

Setting primary text colour as red or green.

What I expected to happen:

Certain text should be colour coded green (for yes) and red (for no). This was working yesterday. Seems to be an issue on iOS/iPadOS Companion App, mobile and desktop browsers.

What happened instead:

As of today, the text just stays white and does not change based on state. Not sure if this is specifically an issue with card-mod, or mushroom-template (both are using latest versions installed via HACS).

Minimal steps to reproduce:

Loaded up HA in Companion App this morning and text colours no longer change.

# The least amount of code possible to reproduce my error
          - type: custom:mushroom-template-card
            primary: |-
              {% set state=states('input_boolean.dog_henry_feeding_required') %}
              {% if state=='on' %}
                Yes
              {% else %}
                No
              {% endif %}
            secondary: Feed Reqd?
            icon: ''
            entity: input_boolean.dog_henry_feeding_required
            icon_color: white
            tap_action:
              action: more-info
            hold_action:
              action: more-info
            double_tap_action:
              action: more-info
            multiline_secondary: false
            fill_container: false
            card_mod:
              style:
                mushroom-state-info $: |
                  .container {
                    --card-secondary-font-size: 14px;
                    --card-primary-font-size: 16px;
                  }
                .: |
                  ha-card {
                    {% set state=states('input_boolean.dog_henry_feeding_required') %}
                    {% if state=='on' %}
                      --primary-text-color: red
                    {% else %}
                      --primary-text-color: green
                    {% endif %}
                    }
# End of code

Error messages from the browser console:

No errors in HA logs or in Chrome browser Console.

Was able to get a screen cap from phone before it refreshed: IMG_1727

Screen cap from tablet this morning: IMG_1794


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

ildar170975 commented 5 months ago

What are these "*" used for?

            fill_container: false
            **card_mod:
              style:
walk0080 commented 5 months ago

What are these "*" used for?

            fill_container: false
            **card_mod:
              style:

Those showed up after pasting... should not be there. Updated original post.

ildar170975 commented 5 months ago

You are facing the issue with a custom card. Suggest to re-test with a standard Entities card. If the variable works there - means there is smth wrong either with the custom card or your card-mod code.

walk0080 commented 5 months ago

You are facing the issue with a custom card. Suggest to re-test with a standard Entities card. If the variable works there - means there is smth wrong either with the custom card or your card-mod code.

As far as I am aware, I can't use "--primary-text-color" on a standard HA card to test?

Reality is that the code was working fine yesterday and for weeks prior without any changes made to the code. Also posted on the lovelace-mushroom Github: 1355

ildar170975 commented 5 months ago

I can't use "--primary-text-color" on a standard HA card to test?

Surely you can:

type: entities
entities:
  - sun.sun
card_mod:
  style: |
    ha-card {
      --primary-text-color: magenta;
    }

image

So, this is about Mushrooms - and not a card-mod issue.

walk0080 commented 5 months ago

Thank you for your time - I must have made a typo when I tried a moment ago with a standard card. Does in fact work... will see what I get on the mushroom Github side.

type: entity
entity: input_boolean.dog_henry_feeding_required
card_mod:
  style: |
    ha-card {
      {% set state=states('input_boolean.dog_henry_feeding_required') %}
      {% if state=='on' %}
        --primary-text-color: red
      {% else %}
        --primary-text-color: green
      {% endif %}
      }

IMG_1796

rindlerblabla commented 4 months ago

The format should be according to this post. https://github.com/piitaya/lovelace-mushroom/pull/1348#issuecomment-1923483825. Think this issue could be closed.

avw2304 commented 3 months ago

Can someone help me with a similair issue? I would to color the first temperature, preferred any value above 15. In the past it was working, but stopped working after the update

`type: custom:stack-in-card cards:

image