DEV Community

Cover image for Future of CSS: Color Scheme
Andrew Bone
Andrew Bone

Posted on

Future of CSS: Color Scheme

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 {
    ...
  }
}
Enter fullscreen mode Exit fullscreen mode

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 posted on

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-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;
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

Collapse
 
tomayac profile image
Thomas Steiner

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.

Collapse
 
chiangs profile image
Stephen Chiang

Very interesting and exciting!

Collapse
 
link2twenty profile image
Andrew Bone

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.