-
Notifications
You must be signed in to change notification settings - Fork 918
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enable dark theme if user prefers dark color scheme - no javascript version #4761
Enable dark theme if user prefers dark color scheme - no javascript version #4761
Conversation
Was conflicting with scale control color fixes, now updated. |
f53c580
to
5e1093e
Compare
Looks good to me! I think it's worth starting with the automatic mode, since that should just work for most people (and will automatically support day/night switching for devices that do that). |
I like dark modes in general, but can someone (other than TH) explain the reason for the lack of choice & the dimmed tile window? |
Is my opinion not welcome then? What exactly have I done to upset you? |
Random OSM user passing by, but my guess is that, per gravitystorm/openstreetmap-carto#5044, there are actually no "official" dark tiles from osm-carto yet, so the dimming is a stop-gap measure to get dark mode published. I would expect the tile-dimming problem to be dealt with sometime later by someone else. |
We probably can enable dark mode now.
This version uses system settings with media queries and doesn't need javascript. It is enabled by the Bootstrap option
$color-mode-type: media-query
. Previous version #4653 used javascript to track system settings and changedata-bs-theme
attributes accordingly.The problem with this no-javascript approach is that
data-bs-theme
attributes are ignored. But we're already using them for inverting close buttons on dark banners. When in light mode, dark banners have their close buttons inverted because banners themselves have a dark theme attribute. Aside from not working with$color-mode-type: media-query
, this approach has another drawback: you can't invert buttons on light banners in dark mode. Once the entire webpage gets its dark mode attribute, you can't go back to light mode.The solution in this PR is:
$color-mode-type: media-query
that will take care of most of light/dark mode stylingdata-bs-theme
on bannersdata-bs-theme