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


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.

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.

1 Like

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

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.