Add dark mode to wp.org

[threadi]

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.