loading...
Cover image for Future of CSS: Color Scheme

Future of CSS: Color Scheme

link2twenty profile image Andrew Bone ・3 min read

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 avatar
ghost commented 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.

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

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-top-bar-background Background color of the top bar #fdf9f3

Pull request pending:

Variable Description Default
--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

Proposed:

Variable Description Default
--theme-color Text color for the main body #0a0a0a
--theme-container-background Background color of the articles and nav-elements #ffffff
--theme-container-color Text color for the articles and nav-elements #0a0a0a

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

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

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.

Quick Mock Up

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

Posted on by:

link2twenty profile

Andrew Bone

@link2twenty

A British Front-end developer, that is passionate about web accessibility.

Discussion

markdown guide
 

Just discovered the dark theme in the misc settings, love it. One idea could be to initially respect prefers-color-scheme, but to also allow for manual overriding. The custom element <dark-mode-toggle> does exactly that, read more about it in the article.

 
 

There's lots of good stuff in the CSS pipeline.
It really feels like we're getting close to the web giving a native experience.