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
spacegaier
(Philip Allgaier)
July 31, 2021, 10:08pm
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
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…
spacegaier
(Philip Allgaier)
August 1, 2021, 9:20am
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.
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)
August 2, 2021, 5:25pm
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).
Got your point, thank you.
tom_l
August 15, 2022, 10:05am
8
So the answer is “no, this can’t be done”?
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”.
2 Likes
guidok
(guido)
August 19, 2022, 9:56am
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)
Usernet
(Usernet)
July 22, 2023, 10:17am
11
A year later this problem is still relevant.
Is there a solution?
I noticed a PR seemed to fix the issue (or to change the whole look - so the issue will go away too).
home-assistant:dev
← christophwen:visual-map-issues
opened 02:16PM - 28 Jun 23 UTC
- hover background color of zoom control in dark mode
- map light mode when dar… k theme is used
- background color of zoom control with map dark mode when light theme is used
<!--
You are amazing! Thanks for contributing to our project!
Please, DO NOT DELETE ANY TEXT from this template! (unless instructed).
-->
## Breaking change
<!--
If your PR contains a breaking change for existing users, it is important
to tell them what breaks, how to make it work again and why we did this.
This piece of text is published with the release notes, so it helps if you
write it towards our users, not us.
Note: Remove this section if this PR is NOT a breaking change.
-->
## Proposed change
<!--
Describe the big picture of your changes here to communicate to the
maintainers why we should accept this pull request. If it fixes a bug
or resolves a feature request, be sure to link to that issue or discussion
in the additional information section.
-->
### This PR contains multiple fixes for different visual issues with the map (card).
1. The hover background color of the maps zoom control when the map is in dark mode is way to white
![ha-map-hover-zoom-fix](https://github.com/home-assistant/frontend/assets/43651938/b46913f3-8026-4948-897f-ca36d33bbbab)
3. When setting the map to light mode when dark theme is used, the map isn't shown in light mode (it is dark mode but with a bit more contrast)
![ha-map-force-light-theme-fix](https://github.com/home-assistant/frontend/assets/43651938/88edcf81-cd6a-42f9-8c44-96dde733358d)
4. The background color of the maps zoom control with the map in dark mode when light theme is used is white (should be dark, so that the icons are visible)
![ha-map-lt-dm-zoom-bg-fix](https://github.com/home-assistant/frontend/assets/43651938/1fcb3578-d1e3-4df7-b372-846fe496775d)
This summery shows how the map's look with all possible configurations:
![ha-map-differences](https://github.com/home-assistant/frontend/assets/43651938/ab0b61db-d200-464c-b8c8-093d05cf2d20)
## Type of change
<!--
What type of change does your PR introduce to the Home Assistant frontend?
NOTE: Please, check only 1! box!
If your PR requires multiple boxes to be checked, you'll most likely need to
split it into multiple PRs. This makes things easier and faster to code review.
-->
- [ ] Dependency upgrade
- [x] Bugfix (non-breaking change which fixes an issue)
- [x] New feature (thank you!)
- [ ] Breaking change (fix/feature causing existing functionality to break)
- [ ] Code quality improvements to existing code or addition of tests
## Example configuration
<!--
Supplying a configuration snippet, makes it easier for a maintainer to test
your PR.
-->
```yaml
```
## Additional information
<!--
Details are important, and help maintainers processing your PR.
Please be sure to fill out additional details, if applicable.
-->
- This PR fixes or closes issue: fixes #15587, #13333 (maybe, not sure)
- This PR is related to issue or discussion: #13227, #13333
- Link to documentation pull request:
## Checklist
<!--
Put an `x` in the boxes that apply. You can also fill these out after
creating the PR. If you're unsure about any of them, don't hesitate to ask.
We're here to help! This is simply a reminder of what we are going to look
for before merging your code.
-->
- [x] The code change is tested and works locally.
- [x] There is no commented out code in this PR.
- [ ] Tests have been added to verify that the new code works.
If user exposed functionality or configuration variables are added/changed:
- [ ] Documentation added/updated for [www.home-assistant.io][docs-repository]
<!--
Thank you for contributing <3
-->
[docs-repository]: https://github.com/home-assistant/home-assistant.io
Seems that works still in progress.
1 Like
Usernet
(Usernet)
July 22, 2023, 2:41pm
13
Ok, what is a PR?
Do you know how to apply the changes? Manually?
Pull request. Guess you need to build your own HA & then install it.
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
1 Like
Klagio
(Klagio)
January 18, 2024, 2:42pm
16
Agreed I have a dark theme which I love, but the map dark is very bad unreadable
gabrymed
(Gabriele)
January 30, 2024, 10:11am
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.
+1 for this. Surely it can’t be the intended behaviour?
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
(Usernet)
March 9, 2024, 10:21am
21
With version 2024.3 has there been any change?
Stupid dark mod on maps