You Can Give A Website Dark Mode With Just One CSS Property
Tags: darkmode, css, html
Published: 2021-06-27 10:04:07

---
title: You Can Give A Website Dark Mode With Just One CSS Property
published: true
date: 2021-06-27 10:02:51 UTC
tags: [darkmode, css, html]
canonical_url: https://codelab.farai.xyz/posts/til/color-scheme/
---

_[You Can Give A Website Dark Mode With Just One CSS Property](https://codelab.farai.xyz/posts/til/color-scheme/) was first published on [Farai's Codelab](https://codelab.farai.xyz/)._
* * *

I’m too lazy to do all the work required to make a proper dark mode for now so I’m trying to find a quick fix. I tried to use `filter: invert(100%)` on the body but it would literally invert everything, including images and emojis. I was about to give up on it before I came across [Jim Nielsen’s post on the `color-scheme` property](https://blog.jim-nielsen.com/2021/css-system-colors/) which tells the browser what color schemes a site (or element) supports and changes the default color based on the user’s preferences. To use it, you just need to specify the `color-scheme` property on the `:root` element.

```
:root {
    color-scheme: light dark;
}

```

This supports both light and dark mode. You can also just set `light` or `dark` as well as apply the `color-scheme` property to a specific element. In some environments (like email), you can also apply a `<meta name="color-scheme">` tag.

Note that it doesn’t work in Firefox yet.

## Issues

When I tried this the link colors didn’t change in Safari resulting in this ugly and inaccessible style. It worked perfectly fine in Chromium browsers however.

![The site’s header with the logo and navigation links in full blue against a black background](https://codelab.farai.xyz/posts/til/color-scheme/dark-mode-header.png)

Jim had the same issue. Because of that, I ended up implementing some sort of dark mode using Apple’s [dynamic system colors](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/#dynamic-system-colors). The [CSS Colors Module 4](https://www.w3.org/TR/css-color-4/#css-system-colors) has system colors corresponding to the OS’s UI but they don’t have good support so I just copy-pasted the RGB values. [Temper Temper explains how to “fix” dark mode on Safari](https://www.tempertemper.net/blog/fixing-safaris-html-only-dark-mode-bug) better than I have.

Also, looking at [color scheme’s spec](https://www.w3.org/TR/css-color-adjust-1/), there was this scary warning noting that they don’t guarantee a color palette.

> **The light and dark color schemes don’t represent an exact color palette (such as black-and-white), but a range of possible palettes. To guarantee specific colors, authors must specify those colors themselves.** Note also that, consequently, pairing default or <system-color> colors with author-specified colors cannot guarantee any particular contrast level; it might be necessary to set both foreground and background colors together to ensure legibility.

Given those issues my attempt to implement dark mode lazily has become the start of an interesting journey. Still, it’s worth putting in.

## Additional Reading

- [Improved dark mode default styling with the `color-scheme` CSS property and the corresponding meta tag on web.dev](https://web.dev/color-scheme/)
- [Dark Mode Support in WebKit on webkit.org](https://webkit.org/blog/8840/dark-mode-support-in-webkit/)

* * *

Thanks for reading! If you liked this post, consider [supporting my work](https://codelab.farai.xyz/support/) by:

- sharing my work,
- refering me for a job (or hire me for freelance work),
- sponsoring me on [Patreon](https://patreon.com/faraixyz),
- [buying Me A Coffee](https://www.buymeacoffee.com/faraixyz),
- [buying Me A Ko-Fi](https://ko-fi.com/faraixyz),
- [sending me a tip on Paypal](https://paypal.me/fgandiya),
- ~~[buy something on Amazon with my affiliate link](https://amazon.com/?tag=faraixyz03-20) (I’ll earn a commision on this as an amazon affiliate)~~,
- or [buy a domain on Namecheap with my affiliate link](https://shareasale.com/r.cfm?b=467188&u=2110247&m=46483&urllink=www%2Enamecheap%2Ecom%2F&afftrack=).

You can also [subscribe to my newsletter](https://buttondown.email/faraiscodelab).

Have feedback? Send an email to [gandiyafarai+feedback at gmail dot com](mailto:gandiyafarai+feedback@gmail.com?body%3dHey%2bI%2bread%2bthat%2bpost%2band%2bI%2bthought%2bit%2bwas%2bamazing%2521%2bAnd%2byet%252C%2bI%2breally%2bthink%2bthat%25E2%2580%2594I%2btotally%2bdidn%2527t%2buse%2bthe%2bprepopulated%2bemail.%26subject%3dFeedback%2bon%2bYou%2bCan%2bGive%2bA%2bWebsite%2bDark%2bMode%2bWith%2bJust%2bOne%2bCSS%2bProperty)