Re: [openstreetmap/openstreetmap-website] Dark Mode (#2332)
> As an alternative to reverting, I have created PR #5325 as a quick fix that > basically uses one of the filters from this issue. Please be aware of the performance issues with adding multiple css filters, old hardware will struggle. -- Reply to this email directly or view it on GitHub: https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-2477805318 You are receiving this because you are subscribed to this thread. Message ID: ___ rails-dev mailing list rails-dev@openstreetmap.org https://lists.openstreetmap.org/listinfo/rails-dev
Re: [openstreetmap/openstreetmap-website] Use CSS filter instead of dimming tiles (PR #5325)
I quite like the new dark mode. I've used that inversion filter OP mentioned on my own website, but wasn't a fan due to the terrible performance on old devices. I think adding `contrast(1.1)` to the filter would help readability. -- Reply to this email directly or view it on GitHub: https://github.com/openstreetmap/openstreetmap-website/pull/5325#issuecomment-2477788956 You are receiving this because you are subscribed to this thread. Message ID: ___ rails-dev mailing list rails-dev@openstreetmap.org https://lists.openstreetmap.org/listinfo/rails-dev
Re: [openstreetmap/openstreetmap-website] Use CSS filter instead of dimming tiles (PR #5325)
@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:
___
rails-dev mailing list
rails-dev@openstreetmap.org
https://lists.openstreetmap.org/listinfo/rails-dev
Re: [openstreetmap/openstreetmap-website] Use CSS filter instead of dimming tiles (PR #5325)
@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%);
@pkrasicki Telling people to ignore comments based on your own anecdotal
experience isn't exploring the issue. I have first hand experience of
performance drop on older smart phones using multiple filters.
--
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/5325#discussion_r1844177748
You are receiving this because you are subscribed to this thread.
Message ID:
___
rails-dev mailing list
rails-dev@openstreetmap.org
https://lists.openstreetmap.org/listinfo/rails-dev
Re: [openstreetmap/openstreetmap-website] Use CSS filter instead of dimming tiles (PR #5325)
@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%);
No PR should be accepted without testing.
--
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/5325#discussion_r1844336657
You are receiving this because you are subscribed to this thread.
Message ID:
___
rails-dev mailing list
rails-dev@openstreetmap.org
https://lists.openstreetmap.org/listinfo/rails-dev
