[wp-meta] [Making WordPress.org] #8082: Add dark mode to wp.org

[Making WordPress.org]

#8082: Add dark mode to wp.org
--------------------------------+--------------------
 Reporter:  threadi             |      Owner:  (none)
     Type:  enhancement         |     Status:  new
 Priority:  normal              |  Milestone:
Component:  WordPress.org Site  |   Keywords:
--------------------------------+--------------------
 Dark mode ensures that a website is displayed against a dark background
 instead of a light one. This reduces eye strain for visitors and also
 increases the efficiency of OLED displays. In some countries, such a mode
 is also legally required for some websites as part of accessibility (e.g.,
 in Germany, according to the Accessibility Improvement Act).

 Currently, wp.org only uses light backgrounds, which, depending on the
 component, are at least slightly toned down for a more pleasant reading
 experience. Dark mode would help many visitors view the content more
 gently.

 Examples of websites with dark mode:

 * https://developer.apple.com
 * https://developer.microsoft.com
 * https://www.google.com

 There are various ways to offer dark mode when visiting a website:

 * Offer an option for the user to enable and disable it.
 * Automatic detection of the preferred style via media query:
 {{{
 @media( prefers-color-scheme: dark )
 }}}
  (Source: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-
 color-scheme)
 * A mix of the two options.

 There are also different ways to implement dark mode:

 * Invert colors using:
 {{{
 html { filter: invert(1) }
 }}}
  - seems impressive at first, but looks ugly.
 * Invert colors and then exclude individual elements, for example:
 {{{
 html, img, video, iframe, .resolved::before, a.bbp-topic-permalink::before
 {
 filter: invert(1);
 }
 }}}
  - this way, you can improve the ugly inversion to achieve a presentable
 result.
 * Decide for each element on a website individually how it should look in
 dark mode. Very time-consuming, but with really good results.

 One of these approaches should be implemented for the theme that wp.org is
 using (https://github.com/WordPress/wporg-parent-2021). I would be in
 favor of using automatic detection via CSS and extensive color inversion,
 but I'm more of a technician than a designer, so I would appreciate a
 draft of this to help us achieve and close the goal of this ticket.

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/8082>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org