Browser dark theme is changing maps marker color

  • Hello,
    at first thank you for wonderful plugin. I’m using that fow few weeks. I got reported visual issue on android browser opera that markers has wrong colors.

    I finded that problem is at dark and light mode of browser. When i set light mode all is right. But I need some solution for users that doesn’t need any setup from their perspective.

    I finded good article A Complete Guide to Dark Mode on the Web with good explanation of problematic. But I can’t implement solution by myself. Can you please help me?
    I think that this problem can have all users of this map plugin.

    Screenshots:
    – error moment – Opera-touch-dark-theme-travelers-map
    – work’s fine – Opera-touch-light-theme-travelers-map

    • This topic was modified 2 years, 11 months ago by ShippeR. Reason: changing letter at word perspective

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • ?? It’s been just few days since I need help from Camille. I hope it’s the last time ??

    Plugin Author Camille V

    (@socrapop)

    Dear @shipper,

    This is a very hard one, because it’s caused by a browser experimental feature.

    The “forced dark mode” of some browser are inverting the colors of images or messing with them like in your example, which is not very smart because it causes this kind of unexpected behavior (and ugly images).

    I’m afraid I can’t do a lot, but here is a CSS snippet you can try, I’m not entirely sure it will work and not mess with other browsers dark modes, but you can try :

    @media (prefers-color-scheme: dark) {
.leaflet-container .leaflet-marker-pane img {
    filter: saturate(1000%) brightness(0.8);
}
}

    This code will add saturation and lower brightness on markers when dark mode is prefered in the browser settings. The filter here is working on your website but may be ugly on other markers types.

    I hope this can help, if it’s not working, I’m afraid I can’t do anything else because it’s a browser feature. A feature like this should not exist in my own opinion, images should only loose some brightness, not saturation…

    Have a nice day

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Browser dark theme is changing maps marker color’ is closed to new replies.