[openstreetmap/openstreetmap-website] Introduce Dark Mode (WIP) (#3028)

Michal Migurski notifications at github.com
Fri Jan 1 23:21:34 UTC 2021


This PR offers an alternative approach to browser dark mode, noted by @fishcharlie in #2332 and initially implemented by @bezdna in #2532. Before I spend more than a few hours on this, I’m seeking feedback on an approach that accommodates @gravitystorm’s notes on the prior PR:

> … having lots of overrides and !important flags and so on is fine when a user style is the only available option. But that's not a good approach when we have full control over the CSS sent to the user. … To implement a dark mode, I would ideally like to see out-of-the-box support from bootstrap itself. If that's not available, then maybe 10-20 lines of code to set some colour variables, but little more than that. – https://github.com/openstreetmap/openstreetmap-website/pull/2532#issuecomment-588163551

The alternative implementation here defines `*-color` and `*-invcolor` parameters as suggested though they’re somewhat duplicative because `common.scss` had a large number of bare color literals. I migrated all of these to the parameters file without attempting to interpret their meaning. To support dynamic color mode switching these are referenced in media queries near the default definition of each class. Example:

```
body {
  font-family: 'Helvetica Neue',Arial,sans-serif;
  font-size: $typeheight;
  line-height: 1.6666;
  color: $common-body-color;
  background-color: $common-body-background-color;
  margin: 0px;
  padding: 0px;
  text-align: left;
  height: 100%;
}

@media (prefers-color-scheme:dark)
{
  body {
    color: $common-body-invcolor;
    background-color: $common-body-background-invcolor;
  }
}
```

I’m also interested in help from anyone who’d like to collaborate on this PR to make it suitable for use! Some sample items left to be done are:

- [ ] Invert or adjust map colors per @pkrasicki’s suggestion – https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-727266980
- [ ] Figure out why `.dropdown-menu` is not yet working
- [ ] Decide on visual approach for map toolbar
- [ ] Update custom CSS on pages like `/help` and `/about`

Here’s a short video showing how this implementation of dark mode behaves.

https://user-images.githubusercontent.com/58730/103447801-daf66500-4c44-11eb-9d9d-b175c9ec046d.mov


You can view, comment on, or merge this pull request online at:

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

-- Commit Summary --

  * Moved all CSS color literals into parameters.scss variable definitions
  * Moved remaining CSS color names into parameters.scss variable definitions
  * Renamed remaining color variables to include "-color" suffix
  * Added media queries with in -invcolor usage for dark mode
  * Defined all -invcolor variables
  * Redefined all -invcolor variables

-- File Changes --

    M app/assets/stylesheets/common.scss (992)
    M app/assets/stylesheets/parameters.scss (160)
    M app/assets/stylesheets/small.scss (24)

-- Patch Links --

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

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/3028
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20210101/a9660ba0/attachment.htm>


More information about the rails-dev mailing list