Maps Card light or dark mode change depending on time

Configuration
1

Hello Community,

i’m struggeling to get a card change on specific time. I have the following code for a custom card (it’s from this thread https://www.reddit.com/r/homeassistant/comments/n1ci34/latest_dashboard_check_out_my_car_telemetry_card/, really nice and thanks @makeitttwork).

type: 'custom:vertical-stack-in-card'
cards:
  - type: markdown
    content: '<ha-icon icon="mdi:account-multiple"></ha-icon> Family'
    style: |
      ha-card { 
        #background: rgba(0,0,0,0);
        font-size: 20px;
      }
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: person.mad
        aspect_ratio: 4/4
        show_name: false
        show_icon: false
        styles:
          card:
            - padding: 4%
            - background-image: url("/local/xxx.png")
            - background-size: 99%
            - background-repeat: no-repeat
            - background-position: top center
          custom_fields:
            location:
              - text-transform: capitalize
              - position: absolute
              - left: 4%
              - top: 4%
              - color: >-
                  [[[ if (states["device_tracker.sm_g973f"].state == "not_home")
                  return "#e45649"; else return "#50A14F"; ]]]
            battery:
              - align-self: right
              - position: absolute
              - right: 4%
              - top: 4%
              - color: >-
                  [[[ if (states["sensor.sm_g973f_akkufullstand"].state <= 30)
                  return "#e45649"; if
                  (states["sensor.sm_g973f_akkufullstand"].state <= 50) return
                  "#ffa229"; else return "#50A14F"; ]]]
        custom_fields:
          location: |
            [[[
              if (states["device_tracker.sm_g973f"].state == "not_home")
                return `<ha-icon
                  icon="mdi:home-export-outline"
                  style="width: 22px; height: 22px;">
                  </ha-icon>`
              else 
                return `<ha-icon
                  icon="mdi:home"
                  style="width: 22px; height: 22px;">
                  </ha-icon>`
            ]]]
          battery: |
            [[[
              return `<ha-icon
                icon="mdi:battery"
                style="width: 20px; height: 20px;"></ha-icon
                <span>${states['sensor.sm_g973f_akkufullstand'].state}%</span>`
            ]]]
      - type: 'custom:button-card'
        entity: person.xxx
        aspect_ratio: 4/4
        show_name: false
        show_icon: false
        styles:
          card:
            - padding: 4%
            - background-image: url("/local/xxx.png")
            - background-size: 99%
            - background-repeat: no-repeat
            - background-position: top center
          custom_fields:
            location:
              - text-transform: capitalize
              - position: absolute
              - left: 4%
              - top: 4%
              - color: >-
                  [[[ if (states["device_tracker.sm_g960f"].state == "not_home")
                  return "#e45649"; else return "#50A14F"; ]]]
            battery:
              - align-self: right
              - position: absolute
              - right: 4%
              - top: 4%
              - color: >-
                  [[[ if (states["sensor.sm_g960f_akkufullstand"].state <= 30)
                  return "#e45649"; if
                  (states["sensor.sm_g960f_akkufullstand"].state <= 50) return
                  "#ffa229"; else return "#50A14F"; ]]]
        custom_fields:
          location: |
            [[[
              if (states["device_tracker.sm_g960f"].state == "not_home")
                return `<ha-icon
                  icon="mdi:home-export-outline"
                  style="width: 22px; height: 22px;">
                  </ha-icon>`
              else 
                return `<ha-icon
                  icon="mdi:home"
                  style="width: 22px; height: 22px;">
                  </ha-icon>`
            ]]]
          battery: |
            [[[
              return `<ha-icon
                icon="mdi:battery"
                style="width: 20px; height: 20px;"></ha-icon
                <span>${states['sensor.sm_g960f_akkufullstand'].state}%</span>`
            ]]]
  - type: map
    entities:
      - device_tracker.google_maps_xxxxxxxxxxxxxxxxxxxxxxx
      - device_tracker.google_maps_xxxxxxxxxxxxxxxxxxxxxxx
    dark_mode: >-
      [[[ if (states["sensor.time_hour_formatted"].state <= 7)
      return "true"; if
      (states["sensor.time_hour_formatted"].state >= 20) return
      "true"; else return "false"; ]]]

I want to change the dark mode depending on the time. sensor.time_hour_formatted is the actual hour (from 0-24), and the code after dark_mode: is from me thinking it should be like this (derived from the code above from makeitttwork). But it doesn’t work.
I’m not really good in templating, can anybody give me a hint how it should look like?

Thanks in Advance

Mike

2

[[[ and ]]] should be {{{ and }}}.
states is using parenthesis.

Test you templates in the Developer tools

image
image848×369 19.6 KB

And you probably want to use the sun state, rather than the time of day

3

Thanks, but doesn’t work either. i took [[[ because of the above code (there it works), normally (in the rest of my automations) its { . Its the first time for me to use an if in a card…

Mike

4

Try

 - type: map
    entities:
      - device_tracker.google_maps_xxxxxxxxxxxxxxxxxxxxxxx
      - device_tracker.google_maps_xxxxxxxxxxxxxxxxxxxxxxx
    dark_mode: >-
      {% if states("sun.sun") == 'above_horizon' %}
      false
      {% else %}
      true
      {% endif %}
1 Like
5

Even doesn’t work. I think within the card it’s not Jinja templating but javascript templating which has a different syntax (i found something look like this here GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant for another thing i’m doing now). In the template editor in ha it gives the correct result but within the card it stays dark.

Mike

1 Like
6

What “dark_mode” are you talking about?
This should change the dark mode of the map element.

If you’re talking about the custom card, does it even have a dark mode?

7

Right, the dark mode of the maps card, as seen in the docs Map Card - Home Assistant. The rest is really fine, but i want to have a bright map in the day and a dark map a night.
If i delete the dark_mode: on its bright, so the function ist there. But not in this if then else construct.

8

Arf, my mistake.
You cannot use templates in lovelace out-of-the-box

9

You can use Javascript templates in the custom button card. I’m just not very good at JS so can’t help, sorry.

10

I came to a similar point and simply got an conditional card and it works - buuut i will transfer the abovementioned if template - thanks for that @koying

11

Took a few days, but i will go with the solution of Flipso, conditional cards solves the problem (for me). It’s not that nice than use an template but works out of the box.
Thanks to all!