Conditional text color

I’m using a vertical stack card to show the next Wales fixture. This works great but i would like to change the sensor.wales_date text color to darkorange when the date is within 14 days away. I’m stuck! Any help would be really appreciated.

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - type: custom:multiple-entity-row
            entity: sensor.wales_date
            name: Next Wales Game
            secondary_info:
              entity: sensor.wales_opponent
              name: false
  1. card-mod thread → 1st post → link at the bottom → styles for m-e-r.
  2. wrap required styles into appropriate jinja template.

Hi Ildar_Gabdullin,
Thanks for the comment but i’m still a bit stuck.

If i just use the following without the condition it works:

        style: |
          ha-card {
            color: darkorange;
          }

But when i start to add the condition it doesn’t work

cards:
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - type: custom:multiple-entity-row
            entity: sensor.wales_date
            name: Next Wales Game
            secondary_info:
              entity: sensor.wales_opponent
              name: false
            style: |
              ha-card {
                color: [[[
                  if (new Date(states['sensor.wales_date'].state) - new Date() < 30 * 24 * 60 * 60 * 1000) {
                    return 'darkorange';
                  } else {
                      return 'inherit';
                  }
                ]]];
              }

I’ve used chatGPT to try and fix this and she got to this before freaking out. I think the format of the date in my card is throwing it off

sensor.wales_date format: Friday, Jun 16 at 7:45 PM

cards:
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - type: custom:multiple-entity-row
            entity: sensor.wales_date
            name: Next Wales Game
            secondary_info:
              entity: sensor.wales_opponent
              name: false
            style: |
              ha-card {
                color: {{
                  if (moment(states['sensor.wales_date'].state).diff(new Date().getTime()) < 30 * 24 * 60 * 60 * 1000) {
                    'darkorange'
                  } else {
                    'inherit'
                  }
                }}
              }

This is a wrong syntax.
Go to card-mod thread for a correct one.
Should be like:

{% if ... %}
some_attr: xxxx;
{% else %}
some_attr: yyyy;
{% endif %}

Also, use “ha-card” only intended to change a CSS property on the card’s level, not for some card’s element. As I proposed - go to card-mod thread for examples.

I would not use it…

Big mistake, as you’ve seen. It’s generated utter gibberish, which I guess is better than functional-but-incorrect output.

Are you trying to format the text if the game is less than 30 days away?

If you are, and that is the exact format of your time sensor, this should work:

            style: |
              ha-card {
                color: {% if((strptime(states("sensor.wales_date"),"%A, %b %d at %I:%M %p").replace(year=now().year).date() - now().date()).days < 30) -%}
                         darkorange
                       {% else -%}
                         inherit
                       {% endif %}
              }

Might give false results across a new year because your date sensor doesn’t include the year, but if that’s out of season then whatever.

Hi Troon,
Thanks for the input. Unfortunately that doesn’t work and i think its because of the format of the date.

I’ve been working on this during the morning and I’ve gone down a slightly different route by creating a custom card that outputs the number of days beteen now and the event.

So not i just need to figure out how to style based on that. Something like this…

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - type: custom:multiple-entity-row
            entity: sensor.wales_date
            name: Next Wales Game
            secondary_info:
              entity: sensor.wales_opponent
              name: false
            conditions:
              entity: sensor.wales_until
                - condition: below
                  value: 28
                    styles: |
                      ha-card {
                        color: darkorange

This is a wrong syntax for multiple-entity-row.

Are you able to help me fix it? Clearly, i’m not sure what i’m doing

Please go to Developer Tools / Template, and paste in this:

{{ states('sensor.wales_date') }}
{{ states('sensor.wales_until') }}

Then copy/paste the output here.

Your current card is m-e-r. Why do you use it?
Let’s check this part:

      - type: entities
        entities:
          - type: custom:multiple-entity-row
            entity: sensor.wales_date
            name: Next Wales Game
            secondary_info:
              entity: sensor.wales_opponent
              name: false

It will show:
– 1st sensor’s icon, name, state
– 2nd sensor in secondary-info.

In THIS particular case I would say that you do not need m-e-r.
You may use custom:template-entiy-row as well:


Do not bother about different display for “sun.sun” state, could be fixed by localization.

m-e-r is used when more than 2 entities should be displayed:

code
type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sun.sun
    name: name1
    secondary_info:
      entity: zone.home
      name: false
  - type: custom:template-entity-row
    entity: sun.sun
    name: name1
    secondary: '{{states(''zone.home'')}}'
  - type: custom:multiple-entity-row
    entity: sun.sun
    name: name1
    secondary_info:
      entity: zone.home
      name: false
    entities:
      - entity: sun.sun
        name: xxx
      - entity: sun.sun
        name: false
        icon: true

Anyway, assume that you need to colorize the LEFT icon:

code
type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sun.sun
    name: name1
    secondary_info:
      entity: zone.home
      name: false
    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge {
            color: cyan;
          }      
  - type: custom:template-entity-row
    entity: sun.sun
    name: name1
    secondary: '{{states(''zone.home'')}}'
    card_mod:
      style:
        div#wrapper:
          state-badge $: |
            ha-state-icon {
              color: cyan !important;
            }

To add conditional styling - use templates:

xxx {
  {% if ... %}
  color: magenta;
  {% else %}
  color: green;
  {% endif %}
}

Output:

Friday, Jun 16 at 7:45 PM
7

So I would have thought, assuming your hard-coded darkorange above works, that this should too:

            style: |
              ha-card {
                color: {% if(states("sensor.wales_until")|int(0)<30) %}darkorange{% else %}inherit{% endif %}
              }

YES! Thank you so much. There’s just one issue i have with one sensor producing these outputs (because fixtures have’t been releases) - this one is still coming out darkorange but i would prefer it to remain default white.

No games scheduled
unavailable

Change the |int(0) to |int(99) then — that’s the value used if the sensor value cannot be converted to an int. 99 is bigger than 30 so should remain default.

Perfect! I undstand now.