Playground

Dark mode

← Back to Playground
Friday, 14 February 2020

I 've just updated this site to include the prefers-color-scheme CSS media feature. If you've set a preferred light or dark viewing preference scheme on your device, you'll see the respective colour scheme on this site.

By default this site has a light background with dark text (there is no need to declare any specific CSS classes for light mode), but if you have dark mode enabled then I switch the background and text colours.

(I'm a little undecided whether to set the light/dark mode automatically or enable the user to toggle the setting. For now, I'll go with the device setting.)

Light Mode
Normal (or light mode)
Light Mode
Dark mode

Read more about this at MDN web docs.


Example*
/* Default styles */
body {
  color: #191b21;
  background-color: #fff;
}

/* Required media query */
@media (prefers-color-scheme: dark) {
  {
    color: #fff;
    background-color: #191b21;
  }
}

*Be sure to declare the prefers-color-scheme values below your primary CSS.