[openstreetmap/openstreetmap-website] Enable dark theme if user prefers dark color scheme - no javascript version (PR #4761)

[Anton Khorev]

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`](https://getbootstrap.com/docs/5.3/customize/color-modes/#building-with-sass). Previous version #4653 used javascript to track system settings and change `data-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:
- use `$color-mode-type: media-query` that will take care of most of light/dark mode styling
- use `data-bs-theme` on banners
- add css to enable/disable close button inversion inside elements with `data-bs-theme`
You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/4761

-- Commit Summary --

  * Set both light and dark banner themes
  * Override Bootstrap close button inversion inside themed elements
  * Enable dark mode using media queries

-- File Changes --

    M app/assets/stylesheets/common.scss (10)
    M app/assets/stylesheets/parameters.scss (1)
    M app/views/layouts/_banner.html.erb (2)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/4761.patch
https://github.com/openstreetmap/openstreetmap-website/pull/4761.diff

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

Message ID: <openstreetmap/openstreetmap-website/pull/4761 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240506/b41b1376/attachment.htm>