Dark mode on TeslaMate Dashboard

[spacecosmos]

The title kind of says it all. Any way to implement it? :)

I think it would look good with Grafana already being in dark mode as well. (Just a thought and not a very important feature of course.)

[adriankumpf]

Yeah, a dark mode would be awesome! Shouldn't be that difficult to implement. I'll see what I can do.

[tobiasehlert]

This should maybe be not too hard to implement with the CSS media feature prefers-color-scheme

[Niek]

Fixed in #461

[roadrash2108]

PR #461 never got merged, so this issue is still open. Is this issue still worked on?

[khelge]

Any news here? Still bleeds my eyes to death looking at the dashboard before I get into Grafana which is dark and nice

[LightBringer81]

I'm also for dark mode. I check my stats regularly at night, when the room is dark and my eyes would love to be able to check teslamate in a darker version. Preferably with options to a dark blue and a complete black design.

[gryghst72]

Bump

[NirKli]

Bump

I made a small POC, not sure if its the best solution for dark mode (controlled by the OS setting).
I'm using invert color, one of the reason why I'm using invert colors is because there's no dark mode support for the map.

@spacecosmos @gryghst72

(main)

(settings)

[tobiasehlert]

There are plugins för Leaflet JS, with which you can get a dark map.

Checkout this page to see how the map could look like in other themes:
https://leaflet-extras.github.io/leaflet-providers/preview

I think that Stadia.AlidadeSmoothDark would be the best alternative :)

[NirKli]

There are plugins för Leaflet JS, with which you can get a dark map.

Checkout this page to see how the map could look like in other themes:

https://leaflet-extras.github.io/leaflet-providers/preview

I think that Stadia.AlidadeSmoothDark would be the best alternative :)

It looks better than my solution

[NirKli]

There are plugins för Leaflet JS, with which you can get a dark map.

Checkout this page to see how the map could look like in other themes: https://leaflet-extras.github.io/leaflet-providers/preview

I think that Stadia.AlidadeSmoothDark would be the best alternative :)

I think this map theme looks a little empty when using geo-fence, so I replaced it with the old map theme with invert color.
I have attached some videos, I think its not the best solution but its much better in the dark

Overview page

screen-capture.webm

settings.webm

geofence.webm

[tobiasehlert]

Well, it's not that often that you are inside the geo-fence or settings page anyways, so if it does look slightly empty is not a reason for it.
The map should be using a dark theme in addition to the rest of the gui and the front page will look good enough I think.

I do at least like the image you added in your previous comment #236 (reply in thread) regarding the theme.. on top of that with some other coloring on the rest of the page it would look good I think :)

[NirKli]

Well, it's not that often that you are inside the geo-fence or settings page anyways, so if it does look slightly empty is not a reason for it. The map should be using a dark theme in addition to the rest of the gui and the front page will look good enough I think.

I do at least like the image you added in your previous comment #236 (reply in thread) regarding the theme.. on top of that with some other coloring on the rest of the page it would look good I think :)

map.webm

[NirKli]

@tobiasehlert @spacecosmos @Niek

Created PR :)
Added dark mode support for teslamate UI #2730

[NirKli]

@tobiasehlert

Like you said, its feeling more relaxing to the eyes when looking greyish colors