Traffic light icon color based on weekday

Configuration Frontend
1

Hello,
I am new to HA Dashboard and playing around to build some customs dashboards for different rooms.
On one view, I’d like to create card where I would have a traffic light like icon (it can be a simple red / green dot icon) for which the color would be based on the day of the week (green for Monday, Tuesday, Wednesday, Thursday, Friday and Saturday, and red for Sunday for example).
I would have 3 such icons, with a name in front (name 1, name 2, name 3)
Any clue?

Thank you!

2

You can do this with Card Mod which can be installed via HACS or directly. Once done you can configure it similar to the following that I use to color various states (or use YAML to determine the day of the week):

card_mod:
  style: |
    ha-card {
    --ha-card-background: 
      {% if states('vacuum.roomba_upstairs') == 'cleaning' %}
        #40ff00;
      {% elif states('vacuum.roomba_upstairs') == 'paused' or states('vacuum.roomba_upstairs') == 'returning to dock' %}
        #00bfff;
      {% elif states('vacuum.roomba_upstairs') == 'error' %}
        red;  
      {% else %} 
        #fff;
      {% endif %}
    --paper-item-icon-color: 
      {% if states('sensor.roomba_upstairs_battery_level') | int <= 100 and states('sensor.roomba_upstairs_battery_level') | int >= 75 %}
        forestgreen;
      {% elif states('sensor.roomba_upstairs_battery_level') | int < 75 and states('sensor.roomba_upstairs_battery_level') | int > 30 %}
        orange;
      {% elif states('sensor.roomba_upstairs_battery_level') | int <= 30 %}  
        #ff4000;
      {% else %} 
        #fff;
      {% endif %}
    color: 
      {% if states('vacuum.roomba_upstairs') == 'paused' or states('vacuum.roomba_upstairs') == 'error' %}
        white;
      {% else %}
        #000;
      {% endif %}
    }

image

Just replace my device and battery conditions for your day of the week conditions.

You could also use template entities to dynamically change the icon itself based on the state, where you use an icon template to show a different icon based on the day of the week.

1 Like