[6a3a178] | 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
|
---|