Inserting a different OSM map when in dark mode or day mode

support
1

Hello,

I am using the “OpenStreetMap shortcode for hugo” GitHub - hanzei/hugo-component-osm: OpenStreetMap shortcode for hugo for my little blog to insert maps.

I have a blog where readers can switch to dark mode layout if they wish. I insert a map in a .md post. I can have a standard map created with Umap uMap. , but I can also insert a dark mode map created with Umap uMap…

Light map:

Dark map:

My goal is to automatically switch the light map for the dark map when readers read my post in dark mode.

How can I do this?

Thank you for any suggestions.

2

First off: From the image I’d suggest to not use the dark mode map – it seems completely illegible.

As to your question: This is not related to Hugo. Perhaps it’s possible to style the map using CSS. If so, you can use that. Otherwise, JavaScript might be a possibility. Both are still not related to Hugo.

3

Thinking about it, it seems you are right, not very legible…