Map card: set "dark_mode" dependingly on theme mode

Configuration Frontend
1

The stock Map card has a "dark_mode" attribute.
How to set this attribute dependingly on whether a light or dark theme mode is set?
What I need is something like a global variable “dark_mode”…

1 Like
2

If you don’t set a value specifically for the card, it automatically follows the used theme mode.

If you already toggled the switch, go to YAML mode and remove the parameter to reset to the automatic behavior.

1 Like
3

Thanks a lot for a quick reply!

Anyway, is it possible to know which mode is set? I am talking about that global variable “dark mode”.
That should be another topic, I need to set some graph’s color dependingly on the current theme…

4

The frontend coding knows it. So if you are talking about some custom frontend coding, you can get that info from this.hass.themes.darkMode.

I am not sure if you can currently define own graph colors via CSS vars yet. There was/is a PR that would add that. I have also a release ago added the option to specify for a custom theme a dark and light variant. So if those two tings are combined then you could set custom colors in a theme for the graph.

5

Not clear.
This expression gives an error in “Templates” dev tool.
if using in a custom “config-template-card”, it does not work too.

6

This only works directly in JS/TS code in the frontend. That is not HA template code (since templates run on backend data, but the active dark/light mode is a frontend decision).

7

Got your point, thank you.

8

So the answer is “no, this can’t be done”?

9

There is smth strange about this “dark_mode” option.

Consider this card in Panel mode:

type: horizontal-stack
cards:
  - type: map
    entities:
      - person.ildar
  - type: map
    entities:
      - person.ildar
    dark_mode: false
  - type: map
    entities:
      - person.ildar
    dark_mode: true

Testing with default light theme:

image
image1867×621 220 KB

Default dark theme:

image
image1869×623 183 KB

Note a difference in dark theme dependingly on “dark_mode”.

Old vs New:
2022.7:
image
2022.8:
image

Also, in both versions it does not work accordingly to docs:
image
In both versions “dark_mode: default” is not the same as “dark_mode: false”.

2 Likes
10

Thanks Ildar for pointing to this. I have the same issue and would welcome if HA staff can revert to the dark mode setup as it was before (2022.7)

11

A year later this problem is still relevant.
Is there a solution?

002

12

I noticed a PR seemed to fix the issue (or to change the whole look - so the issue will go away too).

Seems that works still in progress.

1 Like
13

Ok, what is a PR?
Do you know how to apply the changes? Manually?

14

Pull request. Guess you need to build your own HA & then install it.

15

2023.12

Situation changed a bit, there is no different contrast.
Still in dark theme there is no difference if “dark_mode” option is “true” or “false”.

изображение

Imho the dark_mode option should (kind of a FR):
– force the map to be dark - if TRUE
– force the map to be light - if FALSE
– force the map to follow a current theme - if not defined.

Light theme:

изображение
изображение1881×954 127 KB

Dark theme:

изображение
изображение1875×1033 144 KB

  - type: horizontal-stack
    cards:
      - type: map
        entities:
          - person.ildar
      - type: map
        entities:
          - person.ildar
        dark_mode: false
      - type: map
        entities:
          - person.ildar
        dark_mode: true
1 Like
16

Agreed I have a dark theme which I love, but the map dark is very bad unreadable

18

Same problem. I hope this issue will be solved soon, i’d like to have a clear map with a dark mode theme too.

19

+1 for this. Surely it can’t be the intended behaviour?

20

Same behavior for me. Setting dark_mode to false doesn’t display the light card if my phone’s theme is set to dark mode.

21

With version 2024.3 has there been any change?
Stupid dark mod on maps :weary: