Dark Mode With One Line Of Code
Tags: css, webdev
Published: 2020-08-22 13:24:20

---
title: Dark Mode With One Line Of Code
published: true
description: Dark mode can be implemented with just one line code.
tags: css, webdev
---

Dark mode can be implemented with a single line of code. Let’s see how it's done and the benefits and drawbacks of this simple approach.

## filter: invert(100%)

`invert()` function as the value of the `filter` property will take the number from 0 to 1 or percentages from 0% to 100% to invert the colors of the element and its children. **Applying `filter: invert(1)` or `filter: invert(100%)` results in fully inverted colors**.

You can use this single line of CSS to switch the color scheme from light to dark (or the other way around).

To invert the colors of the entire website, you need to apply `filter: invert(100%)` on the highest-level element of the DOM:

```css 
:root {
  filter: invert(100%);
}
```
## Applying filter with toggle button

To switch the theme, you need a toggle button and a class with dark mode styles to be toggled on the button click. Check the Codepen example below and click the button in the middle to change the color scheme:

{% codepen https://codepen.io/Ekaterina_Vu/pen/pogMjNB %}

The `filter` property inside the `.dark-mode` class is responsible for changing the colors. 

```css
/* this class will be toggled */
.dark-mode {
  filter: invert(100%)
}
```
We must employ some basic JavaScript by targeting the `document.documentElement` inside the listener function. Then we can toggle the `.dark-mode` class on the top of the DOM hierarchy to apply the `filter: invert(100%)` sitewide.

```javascript
let button = document.querySelector('.btn')

 // press the button to toggle the .dark-mode class
button.addEventListener('click', () => {
  document.documentElement.classList.toggle('dark-mode')
})
```

## The pros and cons of inverting all the pixels

The benefits of making your entire site switch from the light to the dark mode with `filter: invert(100%)` are obvious: **it's a quick and dirty solution**. And, like every quick solution, it also has some significant downfalls. 

`filter` applied on the top of the DOM tree is going to cascade down and affect all the child elements. It’s going to invert **all the colors**. It results with the following list of problems (and let’s pretend that every bullet point ends with: “Additional code is necessary to fix this”):

* Media like images and videos gets inverted, and it never looks good (but you probably still want to have the SVGs inverted). 


<figure>
<img src = "https://lh3.googleusercontent.com/kS_f8Mpp8-iXekVZTGmWHUAKezRUYuPptv13LoKoDefHJlVvSWr2Nf_DOcy_mzNvqY9Ci8f6J-FE6N4xRPF20OUox-v2z4_buYzlAUOTRxP9_cWpT8QRCSnV2Y8WIc247T-ysN20eA" width="600" height="315" />
<figcaption>All pixels are inverted, including the image</figcaption>
</figure>



* All dark box-shadows will become highlights. 

* If your website has colors other than black, white, or grayish nuances, you might be surprised by how bad some colors look inverted. 

<figure>
<img src = "https://lh3.googleusercontent.com/zawE5zEprOH-ZYQ7rFKNbPlmYXTCAG3KlIBqo203ifmnLIwmfjmEZ967cA8QvBMOgjNxv3o7eIjB8sLoaC-JrJW6YazXBtdjtbfTGzpHkYrw1bAUPEN5ByaP0DiWzgrW51YUOZKDCA" width="600" height="261" />
<figcaption>Light blue color becomes not-so-pretty brown color </figcaption>
<figure>

* Where there was once a sufficient contrast on the light background, things can change when color gets inverted and when it's against the dark background.

<figure>
<img src = "https://lh3.googleusercontent.com/ZqhUt3hzkswoniTD2QzzrTqOi_uQMVQAXfTdw8nmv3K1moY1vlDqlK9KQQUxwdJaCmnf4hck7Tz1s6h50hUPeWlmHPq9NXccB2klLFRlh9LPjsbOH9kVxv5yJ8crgplMkxsZ8L9mBg" width="600" height="269" />
<figcaption>The contrast of the inverted color on the dark background is very low</figcaption>
<figure>


* Think about `hover`, `focus`, `active`, `visited`, and all other special element states. Do colors convey the state of the elements when inverted or is the color meaning lost? What about interactives?

* Some advanced UI advice by Steve Schoger that adds to the point
https://twitter.com/steveschoger/status/1151160261170126850

This list could go on and on, dealing with all kinds of usability and accessibility details that would be sorely missed when inverting the entire color scheme. The point is - you expected to implement the dark mode with a single line of code and spent the entire day writing CSS to fix all the problems.

## To invert or not to invert? 

The final verdict for `filter: invert(100%)` is: it is super-useful for making the details look good. You could use it to switch the colors of the entire site though if your site is very simple and monochromatic.

In all other cases, you should probably try some content-aware techniques instead. For example, here is the [Dark Mode - The prefers-color-scheme Website Tutorial article ](https://www.ditdot.hr/en/dark-mode-website-tutorial)(and its [GitHub repository](https://github.com/ditdot-dev/dark-mode-example)) I wrote on implementing the dark mode with `prefers-color-scheme` media-query, variables, and JavaScript.