Dark Mode

About

A Dark Mode is page based on a black background.

Implementation

This mode is implemented through a toggle that switch dynamically the styling of the document.

Example: between the following CSS rule definition

body.light-mode {
  background-color: #fff;
  color: #333;
  transition: background-color 0.3s ease;
}
body.dark-mode {
  background-color: #1a1919;
  color: #999;
}

Configuration

prefers-color-scheme. Set in the browser (For instance for chrome)

@media (prefers-color-scheme: light) {
  /* Light */
}

Support ?

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

Library

Color:

• https://github.com/sandoche/Darkmode.js
• https://github.com/donavon/use-dark-mode (React Hook)

Toogle:

• https://github.com/GoogleChromeLabs/dark-mode-toggle

Documentation / Reference

• https://web.dev/prefers-color-scheme/