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

[Andy Allan]

When I start to review this and see "Large diffs are not rendered by default" and parameters.css getting to 150 lines, I don't think that fits my definition of "maybe 10-20 lines of code to set some colour variables, but little more than that." :smile:

This approach has a couple of major drawbacks. The first is that you have changed the name of colour variables like `$blue` to `$blue-color`, but bootstrap uses some of these colour variables too! This is how the primary button colour on the bootstrap forms matches our house blue.

The second is that you are having to invent an entire colour scheme from scratch, as can be seen with the talk about black backgrounds and coloured buttons. I'd prefer to offload those design choices elsewhere, if possible. For example, to an existing "bootstrap-dark" colour scheme where someone else has evaluated what the primary button colours should be, or just how different should the greys used in the background vs `btn btn-light` in order to meet accessibility guidelines. I'm really not keen on us making that up from scratch, but if it needs to be done then it needs to be done for all of the colours used in bootstrap. Have a look at https://github.com/twbs/bootstrap-rubygem/blob/4.5-stable/assets/stylesheets/bootstrap/_variables.scss to see what variables are available.

On a more minor point, I don't like the 'inv' naming since they aren't inverted - I don't think we'll be highlighting danger messages in cyan, for example!

You are right to pick out that there are many colours defined in custom.css that need addressing. However, I'd prefer to see them sorted out first in one (or more) separate PRs. For example, by using the bootstrap variables instead of specific RGB values, or even better by refactoring the code to use bootstrap instead of having any custom CSS in the first place. This will at least bring some structure, and reduce the maintenance burden for supporting dark mode later on.

As for the exact mechanism for how to support dark mode - I can't assess if this is the best option. But if you need to define `@media (prefers-color-scheme:dark)` over and over again, then I don't think it's maintainable. I also don't see how this changes the colour of anything (like form buttons or dropdown menus) where the colours are defined by bootstrap.

Refs https://github.com/twbs/bootstrap/issues/27514

-- 
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#issuecomment-755497804
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20210106/66c7b3f5/attachment.htm>