# How to add a simple dark mode

> 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.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2023-02-21 | Topics: [Tutorials](https://flaviocopes.com/tags/tutorial/) | Canonical: https://flaviocopes.com/how-to-add-a-simple-dark-mode/

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

```css
@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](https://flaviocopes.com/images/how-to-add-a-simple-dark-mode/1.webp)

![Website in dark mode after applying CSS filter invert showing dark background with light text](https://flaviocopes.com/images/how-to-add-a-simple-dark-mode/2.webp)