[openstreetmap/openstreetmap-website] Use CSS filter instead of dimming tiles (PR #5325)

[Alexis Markwick]

@Dr-Mx commented on this pull request.



> @@ -504,7 +504,13 @@ body.small-nav {
 @include color-mode(dark) {
   .leaflet-tile-container,
   .mapkey-table-entry td:first-child > * {
-    filter: brightness(.8);
+    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);

I have tried using a similar inversion filter on my own website `invert(90%) hue-rotate(180deg) contrast(80%);` (looks best imho), Upon testing this with various devices, there was a noticeable stuttering when panning the map with low-end/older devices.
It would be good to do some proper testing, especially with devices in 3rd world countries where phones aren't as powerful as ours. Or simply have dark-mode as an option, not default.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/5325#discussion_r1844232271
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/5325/review/2439258238 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20241115/e1cf5dce/attachment-0001.htm>