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-schemeCSS 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
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;
}
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.
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)
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.Very interesting and exciting!
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.