Trying Out One-Line Dark Mode Tricks
Tags: css
Published: 2020-10-14 14:50:03

---
title: Trying Out One-Line Dark Mode Tricks
published: true
date: 2020-10-13 00:00:00 UTC
tags: css
canonical_url: https://jvarness.blog/trying-out-one-line-dark-mode-tricks/
---

I’ve read a few articles on the internet about how you can implement dark mode on your website in one line of CSS. Honestly, it’s a really nifty trick. For reference, here are the articles I have seen:

- [Dark Mode with only 1 CSS PROPERTY](https://dev.to/dip15739/dark-mode-with-only-1-css-property-17fl)
- [One line - Dark Mode using CSS](https://dev.to/akhilarjun/one-line-dark-mode-using-css-24li)
- [Dark Mode With One Line Of Code](https://dev.to/ekaterina_vu/dark-mode-with-one-line-of-code-4lkm)

It’s a neat trick, really it is. I’m a fan, and it works pretty well… For some websites. Since I now have a website, I thought to myself “self, why don’t you also include some kind of toggle for dark mode on your website using this trick!“.

So I tried it… And uh… Well, let’s get into why I don’t really like the idea very much.

## Trying with 1 CSS Style

Let’s just start with figuring out what this website looks like if we apply this filter style on my website in Chrome dev tools. Adding this CSS property on the `<html>` element yields interesting results for the site:

```css
filter: invert(1) hue-rotate(180deg);
```

All the colors are inverted, but it turns out the yellow color I chose doesn’t look all that great when it’s inverted:

[![My website after inverting the colors and a 180-degree hue rotation](https://jvarness.blog/static/8f6d0135ca3708c17287af4772259998/e3b18/dark-mode-initial.png "My website after inverting the colors and a 180-degree hue rotation")](/static/8f6d0135ca3708c17287af4772259998/e3b18/dark-mode-initial.png)

The whites turn black, the blacks turn white, and the yellow turns… Brown? Ew… Well, what if I just tried it without the `hue-rotate` style and just had `filter: invert(1)`? The result is a little bit better:

[![The yellows on the site turn blue instead](https://jvarness.blog/static/945668aa05f59a3d0a1b85a7d386155f/e3b18/blue-dark-mode.png "The yellows on the site turn blue instead")](/static/945668aa05f59a3d0a1b85a7d386155f/e3b18/blue-dark-mode.png)

[![The code highlighting looks pretty good](https://jvarness.blog/static/00825432b79e64ac451f834ba755c477/e3b18/code-highlighting.png "The code highlighting looks pretty good")](/static/00825432b79e64ac451f834ba755c477/e3b18/code-highlighting.png)

This looks a little bit better, even some of the posts don’t look too bad: the code snippets and inline highlighting don’t look all that bad. However, there are other subtle elements of the site that don’t really look right. The footer, for example, has a really poor contrast ratio between the links I have there and the now white background:

[![The footer with just invert(1)](https://jvarness.blog/static/4ad97793a76b507a7d138206e2f99f68/3d026/footer-with-blue.png "The footer with just invert(1)")](/static/4ad97793a76b507a7d138206e2f99f68/3d026/footer-with-blue.png)

My fear here is that users who have colorblindness might not be able to easily see some of these links. The icons look pretty good inverted though, so what I can do is make the links the same color as the icons, and that’ll solve that problem pretty easily, because they’ll turn the same blue as the icons:

[![Links are as blue as the icons on the footer](https://jvarness.blog/static/626a7a6bd0f8b03c917187ea0acc8d66/71ce0/blue-links.png "Links are as blue as the icons on the footer")](/static/626a7a6bd0f8b03c917187ea0acc8d66/71ce0/blue-links.png)

So this isn’t too bad still… But I’m not sure I really like the blue color still. I picked that yellow because I like it. I want it to stay that way. Plus, this is just a style: I still need to figure out a way to turn it off and on again, which will require some JavaScript on my part.

I’ll eventually get a dark mode added to my website, but I don’t think I’ll be using this method for it. I think for other websites that have simpler color schemes this might be a great technique to use! But for my website, it’s just not working the way I want it to.

## Other Examples

Other websites have great examples of how their dark mode is implemented. One notable one is Dan Abramov’s site [overreacted.io](https://overreacted.io/). Dan is the creator of React, and this blog was created using Gatsby! You can check out the source code [here](https://github.com/gaearon/overreacted.io).

Dan’s implementation is very elegant: the base color scheme for all the text and content just looks visually appealing regardless of whether or not the background is light or dark. The background becomes a different color based on classes added to the `body` of the page. Dan also has some code in here that will persist the selected theme between sessions so that the next time the site is visited it’s using the same theme.

The Gatsby community seems to agree that this is a pretty good implementation! Someone from the community decided to create a plugin that implements much of the code that Dan uses to persist the theme state and trigger updates to the theme. Source code for that plugin can be found [here](https://github.com/insin/gatsby-plugin-dark-mode). For anyone looking to implement similar themes or triggers, this is a good starting point!

## Wrapping Up

So what does this teach us about dark mode? You can certainly use a CSS style like `filter` to invert all of the colors on your website to achieve the desired effect, but as the color scheme I’m using can prove, it can be a little difficult to implement it using `filter`.

In a later blog post, if I’m ever going to be able to figure out how to make this work for my site, I’ll discuss how I overcame all these different challenges, and how I was able to actually implement it.