Change icon color acording to time of day

Configuration Frontend
1

Hi, I was trying to figure out, how to change color based on time of day.
I was trying to format the color with logic, but it doesn’t seem to work no matter what I do?

For me this looks fine, am I missing something?
Also, the switch works so there is no problem with that.
In fact everything about this button-card works flawlessly except the ‘off’ state color changing based on time ranges.

I’m quite a noobie to this so sorry if this is obvious and I do not see it. :sweat_smile:

type: custom:button-card
show_name: true
show_icon: true
show_state: true
tap_action:
  action: more-info
hold_action:
  action: toggle
entity: switch.nodered_7c5bc71cb96e040d
name: Večer
styles:
  name:
    - font-size: 14px
  state:
    - font-size: 10px
    - color: gray
icon: mdi:pill
state:
  - value: 'off'
    color: |
      [[[
        var hour = new Date().getHours();
        var minute = new Date().getMinutes();
        if (hour == 4 && minute >= 0 && minute <= 59) return '#44739e';
        else if (hour == 6 && minute >= 5 && minute <= 20) return '#345beb';
        else if (hour == 6 && minute >= 21 && minute <= 40) return '#ffc107';
        else if (hour == 6 && minute >= 41 && minute <= 59) return '#d12a2a';
        else return '#000000';
      ]]]
  - value: 'on'
    color: '#56d12a'
1 Like
2

Do you have any errors in your web browser console?

3

You can use this logic

type: custom:button-card
entity: binary_sensor.xxx
triggers_update: all
styles:
  icon:
    - color: |
        [[[
          var hour = new Date().getHours();
          var minute = new Date().getMinutes();
          var time = (hour * 60) + minute;
          if (time >= 720) return 'red'; 
          if (time >= 401) return 'blue'; 
          if (time>= 381) return 'yellow'; 
          if (time >= 240) return 'grey'; 
          else return 'lightgrey';
        ]]]

If you want you cas also use time entity from HA

4

Unfortunately I am not as good with JS just yet.
I know C Lang quite well and therefore some of the code is easy for me to implement, but still I am not fluent in it.

HOWEVER!
I found exactly your solution later on.
The sad thing is, that when you try to switch icon with this technique, the one I provided, by just swapping the colours('#538000') for 'mdi:something_something' and the colour: to icon:, then my implementation works absolutely fine.

Thank you for your answer.
I refined my code from earlier and now it is way more easier to set time range. Hope this will help anyone else who is looking to do the same.

This worked for me.

...
styles:
  icon:
    - color: |
        [[[
          const time = new Date();
          const hours = time.getHours().toString().padStart(2, '0');
          const minutes = time.getMinutes().toString().padStart(2, '0');
          const now = `${hours}:${minutes}`;

          if (states['switch.pills_morning'].state == 'on') return "#55943e";
          else if (now >= "04:00" && now <= "06:04") return "#44739e";
          else if (now >= "06:05" && now <= "06:20") return "#345beb";
          else if (now >= "06:21" && now <= "06:40") return "#ffc107";
          else if (now >= "06:41" && now <= "08:00") return "#d12a2a";
          else return "#000000";
        ]]]