Use light or dark color themes in CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit ba8003a Nov 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src 3.1.1 Nov 10, 2018
test 3.0.0 Nov 4, 2018
.editorconfig 1.0.0 Sep 25, 2018
.gitignore 2.0.0 Nov 4, 2018
.rollup.js 2.0.0 Nov 4, 2018
.tape.js 1.0.0 Sep 25, 2018
.travis.yml 1.0.0 Sep 25, 2018
CHANGELOG.md 3.1.0 Nov 10, 2018
CONTRIBUTING.md 1.0.0 Sep 25, 2018
INSTALL.md 2.0.0 Nov 4, 2018
LICENSE.md 1.0.0 Sep 25, 2018
README-BROWSER.md 3.1.0 Nov 10, 2018
README-POSTCSS.md 3.1.0 Nov 10, 2018
README.md 3.1.0 Nov 10, 2018
cli.js 3.1.1 Nov 10, 2018
package.json 3.1.1 Nov 10, 2018

README.md

Prefers Color Scheme

NPM Version Build Status Support Chat

Prefers Color Scheme lets you use light and dark color schemes in all browsers, following the Media Queries specification.

Usage

From the command line, transform CSS files that use prefers-color-scheme media queries:

npx css-prefers-color-scheme SOURCE.css TRANSFORMED.css

Next, use that transformed CSS with this script:

<link rel="stylesheet" href="TRANSFORMED.css">
<script src="https://unpkg.com/css-prefers-color-scheme/browser.min"></script>
<script>
colorScheme = initPrefersColorScheme('dark') // apply "dark" queries (you can change it afterward, too)
</script>

Dependencies got you down? Don’t worry, this script is only 537 bytes.

Usage

  • First, transform prefers-color-scheme queries using this PostCSS plugin.
  • Next, apply light and dark color schemes everywhere using this browser script.

How does it work?

Prefers Color Scheme uses a PostCSS plugin to transform prefers-color-scheme queries into color-index queries. This changes prefers-color-scheme: dark into (color-index: 48), prefers-color-scheme: light into (color-index: 70), and prefers-color-scheme: no-preference into (color-index: 22).

The frontend receives these color-index queries, which are understood in all major browsers going back to Internet Explorer 9. However, since browsers only apply color-index queries of 0, our color scheme values are ignored.

Prefers Color Scheme uses a browser script to change (color-index: 48) queries into not all and (color-index: 48) in order to activate “dark mode” specific CSS, and it changes (color-index: 70) queries into not all and (color-index: 48) to activate “light mode” specific CSS.

@media (color-index: 70) { /* prefers-color-scheme: light */
  body {
    background-color: white;
    color: black;
  }
}

Since these media queries are accessible to document.styleSheet, no CSS parsing is required.

Why does the fallback work this way?

The value of 48 is chosen for dark mode because it is the keycode for 0, the hexidecimal value of black. Likewise, 70 is chosen for light mode because it is the keycode for f, the hexidecimal value of white.