Dark Mode compatability

[yeti08]

Hi, my site has a dark theme. The inreach-mapshare plugin is set up for a light theme. That is perfectly fine, and I don't really care what the map looks like, but the plugin takes text colors from my site's general color scheme, and other colors like the background white appear set in the plugin.

For example, with a dark overall theme on my site, the text on the site is very light in color. Since inreach-mapshare uses system settings and overlays this on the set light/white background colors, which makes much of the text unreadable. I can't change my site colors since that would affect other areas of my site. I have played around with the code of the plugin, but I am no expert and could not get anywhere.

Any suggestions on which CSS to override to set colors? Alternatively, could there be some sort of toggle in the plugin in the future for light or dark mode?

Thank you for the fantastic work on this plugin, and I used it for people to follow me on a 5 month thru-hike!

[morehawes]

Hi @yeti08,

Thank you for reaching out, I'm glad to see you found the plugin useful. Congratulations on completing the PCT!

I think better compatibility with dark themes is a good idea, I will think about that for the future.

For now, I quickly put together some CSS rules that should help you customise the sidebar colours:

.inmap-wrap .inmap-info .inmap-info-item.inmap-active, .inmap-wrap .inmap-info .inmap-info-item.inmap-hover {
  background: red;
}
.inmap-wrap .inmap-info .inmap-info-item.inmap-active.inmap-hide-extended .inmap-info-desc .inmap-info-expand,
.inmap-wrap .inmap-info {
  background: blue;
}
.inmap-wrap .inmap-info .inmap-info-item .inmap-info-desc .inmap-info-title span {
  color: green;
}

I hope this helps.

Cheers!

Joe

[yeti08]

Thank you Joe, it works!

[morehawes]

…and thank you for being my first sponsor!! It is greatly appreciated :)

Joe