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

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

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

Feature Request: Night Mode #134

ghost posted on Jan 10, 2018

Feature Request

It would be awesome if there was a "night mode" which would switch the site's colors to a darker version which would look better under some conditions.

View on GitHub

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

[WIP] Theme-able CSS Variables #1377

Link2Twenty posted on Dec 20, 2018

I thought we ought to have a place where we keep a note of the current CSS Variables and also propose different variables that should be included.

Currently included:

Variable	Description	Default
--theme-background	Background color of the main body	#f9f9fa
--theme-color	Text color for the main body	#0a0a0a
--theme-secondary-color	Secondary text color for the main body	#557de8
--theme-top-bar-background	Background color of the top bar	#fdf9f3
--theme-top-bar-color	Text and icon color for the top bar	#0a0a0a
--theme-top-bar-search-background	Background color of the search box in the top bar	#e8e7e7
--theme-top-bar-search-color	Text color for the search box, and its placeholder, in the top bar	#0a0a0a
--theme-top-bar-write-background	Background color of the write button in the top bar	#66e2d5
--theme-top-bar-write-color	Text and border color for the write button in the top bar	#0a0a0a
--theme-container-box-shadow	Box shadow settings for articles and nav-elements	3px 3px 0px #bababa
--theme-container-border	border settings for articles and nav-elements	1px solid #d6d6d6
--theme-container-background	Background color of the articles and nav-elements	#ffffff
--theme-container-background-hover	Hover background for nav-elements	#f5f6f7
--theme-container-color	Text color for the articles and nav-elements	#0a0a0a

Pull request pending:

Variable	Description	Default

Proposed:

Variable	Description	Default

I think the best thing to do is leave a comment below of further proposals and I will update the main post.

Test theme:

Dark:

:root {
    --theme-background: #161f2b;
    --theme-color: #fff;
    --theme-secondary-color: #cedae2;
    --theme-top-bar-background: #141d26;
    --theme-top-bar-color: #fff;
    --theme-top-bar-search-background: #424a54;
    --theme-top-bar-search-color: #fff;
    --theme-top-bar-write-background: #00af81;
    --theme-top-bar-write-color: #fff;
    --theme-container-background: #27374c;
    --theme-container-background-hover: #37475c;
    --theme-container-color: #fff;
    --theme-container-box-shadow: none;
    --theme-container-border: 1px solid #141d26;
}

Also, feel free to do pull requests to help roll these out.

View on GitHub

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

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

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
drafts.csswg.org
Cover image: pexels.com