1 | # Prefers Color Scheme [<img src="https://jonathantneal.github.io/js-logo.svg" alt="" width="90" height="90" align="right">][Prefers Color Scheme]
|
---|
2 |
|
---|
3 | [![NPM Version][npm-img]][npm-url]
|
---|
4 | [![Build Status][cli-img]][cli-url]
|
---|
5 | [![Support Chat][git-img]][git-url]
|
---|
6 |
|
---|
7 | [Prefers Color Scheme] lets you use light and dark color schemes in all
|
---|
8 | browsers, following the [Media Queries] specification.
|
---|
9 |
|
---|
10 | ## Usage
|
---|
11 |
|
---|
12 | From the command line, transform CSS files that use `prefers-color-scheme`
|
---|
13 | media queries:
|
---|
14 |
|
---|
15 | ```bash
|
---|
16 | npx css-prefers-color-scheme SOURCE.css TRANSFORMED.css
|
---|
17 | ```
|
---|
18 |
|
---|
19 | Next, use that transformed CSS with this script:
|
---|
20 |
|
---|
21 | ```html
|
---|
22 | <link rel="stylesheet" href="TRANSFORMED.css">
|
---|
23 | <script src="https://unpkg.com/css-prefers-color-scheme/browser.min"></script>
|
---|
24 | <script>
|
---|
25 | colorScheme = initPrefersColorScheme('dark') // apply "dark" queries (you can change it afterward, too)
|
---|
26 | </script>
|
---|
27 | ```
|
---|
28 |
|
---|
29 | Dependencies got you down? Don’t worry, this script is only 537 bytes.
|
---|
30 |
|
---|
31 | ## Usage
|
---|
32 |
|
---|
33 | - First, transform `prefers-color-scheme` queries using this
|
---|
34 | [PostCSS plugin](README-POSTCSS.md).
|
---|
35 | - Next, apply light and dark color schemes everywhere using this
|
---|
36 | [browser script](README-BROWSER.md).
|
---|
37 |
|
---|
38 | ---
|
---|
39 |
|
---|
40 | ## How does it work?
|
---|
41 |
|
---|
42 | [Prefers Color Scheme] uses a [PostCSS plugin](README-POSTCSS.md) to transform
|
---|
43 | `prefers-color-scheme` queries into `color-index` queries. This changes
|
---|
44 | `prefers-color-scheme: dark` into `(color-index: 48)`,
|
---|
45 | `prefers-color-scheme: light` into `(color-index: 70)`, and
|
---|
46 | `prefers-color-scheme: no-preference` into `(color-index: 22)`.
|
---|
47 |
|
---|
48 | The frontend receives these `color-index` queries, which are understood in all
|
---|
49 | major browsers going back to Internet Explorer 9. However, since browsers only
|
---|
50 | apply `color-index` queries of `0`, our color scheme values are ignored.
|
---|
51 |
|
---|
52 | [Prefers Color Scheme] uses a [browser script](README-BROWSER.md) to change
|
---|
53 | `(color-index: 48)` queries into `not all and (color-index: 48)` in order to
|
---|
54 | activate “dark mode” specific CSS, and it changes `(color-index: 70)` queries
|
---|
55 | into `not all and (color-index: 48)` to activate “light mode” specific CSS.
|
---|
56 |
|
---|
57 | ```css
|
---|
58 | @media (color-index: 70) { /* prefers-color-scheme: light */
|
---|
59 | body {
|
---|
60 | background-color: white;
|
---|
61 | color: black;
|
---|
62 | }
|
---|
63 | }
|
---|
64 | ```
|
---|
65 |
|
---|
66 | Since these media queries are accessible to `document.styleSheet`, no CSS
|
---|
67 | parsing is required.
|
---|
68 |
|
---|
69 | ## Why does the fallback work this way?
|
---|
70 |
|
---|
71 | The value of `48` is chosen for dark mode because it is the keycode for `0`,
|
---|
72 | the hexidecimal value of black. Likewise, `70` is chosen for light mode because
|
---|
73 | it is the keycode for `f`, the hexidecimal value of white.
|
---|
74 |
|
---|
75 | [cli-img]: https://img.shields.io/travis/csstools/css-prefers-color-scheme.svg
|
---|
76 | [cli-url]: https://travis-ci.org/csstools/css-prefers-color-scheme
|
---|
77 | [git-img]: https://img.shields.io/badge/support-chat-blue.svg
|
---|
78 | [git-url]: https://gitter.im/postcss/postcss
|
---|
79 | [npm-img]: https://img.shields.io/npm/v/css-prefers-color-scheme.svg
|
---|
80 | [npm-url]: https://www.npmjs.com/package/css-prefers-color-scheme
|
---|
81 |
|
---|
82 | [PostCSS]: https://github.com/postcss/postcss
|
---|
83 | [Prefers Color Scheme]: https://github.com/csstools/css-prefers-color-scheme
|
---|
84 | [Media Queries]: https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme
|
---|