Map card: set "dark_mode" dependingly on theme mode

[spacegaier (Philip Allgaier)]

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.

[Ildar_Gabdullin]

@spacegaier

you can get that info from this.hass.themes.darkMode.

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

[spacegaier (Philip Allgaier)]

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).

[Ildar_Gabdullin]

@spacegaier

This only works directly in JS/TS code in the frontend.

Got your point, thank you.

[tom_l]

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

[Ildar_Gabdullin]

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:

Default dark theme:

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

Old vs New:
2022.7:

2022.8:

Also, in both versions it does not work accordingly to docs:

In both versions “dark_mode: default” is not the same as “dark_mode: false”.

[guidok (guido)]

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)

[Usernet]

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

[Ildar_Gabdullin]

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

Fix visual map issues (#15587)

Seems that works still in progress.

[Usernet]

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

[Ildar_Gabdullin]

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

[Ildar_Gabdullin]

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:

Dark theme:

  - 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

[Klagio]

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

[gabrymed (Gabriele)]

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

[nickelliott (Nick)]

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

[itsturtletime]

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.

[Usernet]

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

[otiel]

No change.

[Picard16 (Helmut)]

It seems that there might be a solution in at #20541 a few days ago.
Hope, that it works, because I am facing the same problem.

[Ildar_Gabdullin]

fixed in 2024.5

Default light theme:

Default dark theme:

  - type: horizontal-stack
    cards:
      - type: map
        entities: &ref_markers
          - person.abc
          - zone.abc

      - type: map
        entities: *ref_markers
        theme_mode: light

      - type: map
        entities: *ref_markers
        theme_mode: dark

      - type: map
        entities: *ref_markers
        theme_mode: auto