NEW DESIGN - Dark mode support

[teolemon]

What

https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme

Tasks

Beta Give feedback

1. Add dark mode versions of key assets (logos, images)
2. Extract colors that would be hardcoded
3. Create a dark mode colorset
4. Add a dark mode/light mode/system mode toggle
5. Change the colors based on the toggle

Previous attempts on the old theme

• feat: Make some images aware of dark mode #3911
• feat: New Dark Scheme Part 2 #3317
• Issue with the Environment tab in dark mode & light mode #4976

Part of

• 🎨 Look & Feel - Design (Tracker) #5513

Mockup

Here's what it could look like (note that we'll have to make Dark mode versions of some illustrations)

old

https://user-images.githubusercontent.com/1689815/66560750-4a6fc880-eb58-11e9-98a1-d2a98aab75c6.png

[teolemon]

Curious behaviour:

[teolemon]

Not sure this deserves a P2

[alifafaruk]

Hi! My team, @Jen-Lopez @lucasortizny want to work on this issue. We think it is a really useful feature! Can we get it assigned to us?

[Dorson]

Made a flexible solution for the Dark Mode on websites.

Try demo in here:
https://dorson.github.io/CSS-Dark-Mode-and-color-switch/

Works with basic CSS variables + short JavaScript.

Can be used inside existing CSS style files. Can be used to define multiple color themes in one CSS file.

Let's save our eyesight at night, and battery too :-)

Have fun using my code !

[teolemon]

We just deployed a new design, but without dark mode so far. Halloween is just around the corner. Can we turn the orange into a pumpkin by then ?

[teolemon]

[teolemon]

[teolemon]

https://x.com/Wikipedia/status/1813696345024151702