Future of CSS: Color Scheme
Tags: css, future, darkmode, design
Published: 2018-12-20 11:42:53

---
title: Future of CSS: Color Scheme
published: true
description: Looking at a CSS Level 5 spec
tags: CSS, future, dark-mode, design
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xksbgpdl6d1mw9sxjxwk.png
series: Future of CSS
---

There's been a lot of buzz around 'dark' modes recently with iOS, MacOS, Windows and Android all adding system-wide dark themes that can automatically enable dark mode for apps and programs. This sort of trend is great but it's a real shame your website can't hook onto this system-wide theme. Or can it?

Before I go on I should point out this feature is a proposed feature and is not in any browsers yet. It's great to learn about these things and even future-proof your projects with this in mind but don't try to roll this out for production just yet.

## prefers-color-scheme

Mozilla has a very comprehensive list of all native web technologies here is how they describe the feature.

> The **`prefers-color-scheme`** [CSS media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features) is used to detect if the user has requested the system use a light or dark color theme.

Let's unpack that a little bit. We see it's a `CSS media feature` so we know it's a media query. We can also see it has two options `light` or `dark`.

Which means it will look something like this.

```css
@media (prefers-color-scheme: dark) {
  :root {
    ...
  }
}
```
And sure enough, that's the syntax. Simple really!

## Options

Let's get the list of current options from Mozilla.

**no-preference**
> Indicates that the user has made no preference known to the system. This keyword value evaluates to false in the [boolean context](https://drafts.csswg.org/mediaqueries-5/#boolean-context).

**light**
> Indicates that user has notified the system that they prefer an interface that has a light theme.

**dark**
> Indicates that user has notified the system that they prefer an interface that has a dark theme.

If you look at the draft of the [spec](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme) there is a footnote that they're looking at including `forced` variables too.

> **ISSUE 8** Should we include `'forced-light'` and `'forced-dark'` values? We don’t necessarily want the page to try to undo what the system might be enforcing.

## Practical uses

As some of you may know this site, dev.to, is in the process of adding a dark mode. This site is also opensource so any of you can jump in and help with the process!

{% github https://github.com/thepracticaldev/dev.to/issues/134 %}

I've started moving major areas of the site over to CSS variables, this is, intentionally, a slow rollout but it's getting there.

{% github https://github.com/thepracticaldev/dev.to/issues/1377 %}

With this media query, we could do something like this.

 ```css
@media (prefers-color-scheme: dark) {
  :root {
    --theme-background: #303030;
    --theme-top-bar-background: #1C1C1C;
    --theme-top-bar-color: #FFFFFF;
    --theme-top-bar-search-background: #303030;
    --theme-top-bar-search-color: #FFFFFF;
    --theme-container-background: #424242;
    --theme-container-color: #FFFFFF;
  }
}
```

And, as if by magic, the whole site has a dark theme to match the OS.

![Quick Mock Up](https://thepracticaldev.s3.amazonaws.com/i/l347jqkddklugbjwf41i.png)

Of course, this isn't perfect we need a few more variables yet but you can see how easy it is the theme the whole website based on the users system preferences.

## Wrapping up

As I said earlier in the post this is not something we have yet, and it hasn't got an ETA but features like this push the web forward! If we're ready when it lands we can help get the feature out there. 

With CSS if the browser doesn't understand what you've written it's just ignored. So there really is no harm with getting this out there and ready as soon as it lands in one browser.

**Sources:**
[developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
[drafts.csswg.org](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme)
**Cover image:** [pexels.com](https://www.pexels.com/photo/blue-dark-dark-blue-long-984670/)