How to add a simple dark mode

Feb 21, 2023

Learn how to add a simple dark mode with a few lines of CSS, using prefers-color-scheme and filter invert(100%) while re-inverting images, code, and emoji.

~~~

I’ve used these few lines of CSS to apply dark mode to my website:

@media (prefers-color-scheme: dark) {
  body {
    filter: invert(100%);
    background-color: rgb(29, 32, 31) !important;
  }
  img,
  .astro-code,
  .emoji,
  iframe /* for recaptcha */ {
    filter: invert(100%) !important;
  }
}

Looks pretty good!

Website in light mode showing default white background with dark text and colorful elements

Website in dark mode after applying CSS filter invert showing dark background with light text

Tagged: Tutorials · All topics

~~~