# css-prefers-interface

> Use “dark mode” media queries in CSS

Latest version **1.0.0** (published 2018-06-21) · CC0-1.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install css-prefers-interface
pnpm add css-prefers-interface
yarn add css-prefers-interface
bun add css-prefers-interface
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-06-21 |
| First published | 2018-06-21 |
| Weekly downloads | 0 |
| License | CC0-1.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6.0.0 |
| Dependencies | 1 |
| Unpacked size | 13.4 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 98 |
| Author | Jonathan Neal |
| Maintainers | jonathantneal |
| Keywords | postcss, css, postcss-plugin, dark, light, modes, interface, medias, query, queries |

## Links

- npm: https://www.npmjs.com/package/css-prefers-interface
- Repository: https://github.com/csstools/css-prefers-interface
- Homepage: https://github.com/csstools/css-prefers-interface#readme
- Issues: https://github.com/csstools/css-prefers-interface/issues
- npm.io page: https://npm.io/package/css-prefers-interface

## Dependencies (1)

- [postcss](https://npm.io/package/postcss.md) ^6.0.23

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-06-21

## README

# CSS Prefers Interface [<img src="https://jonathantneal.github.io/dom-logo.svg" alt="PostCSS" width="90" height="90" align="right">][CSS Prefers Interface]

[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]

[CSS Prefers Interface] lets you use “dark mode” media queries in CSS.

```bash
npm install css-prefers-interface
```

```css
@media (--prefers-interface: dark) {
  :root {
    --site-bgcolor: #1b1b1b;
    --site-color: #fff;
  }
}

body {
  background-color: var(--site-bgcolor, #f9f9f9);
  color: var(--site-color, #111);
  font: 100%/1.5 system-ui;
}
```

[PostCSS] transforms these into cross-browser compatible `color-index` queries:

```css
@media (color-index: 48) {
  :root {
    --site-bgcolor: #1b1b1b;
    --site-color: #fff;
  }
}

body {
  background-color: var(--site-bgcolor, #f9f9f9);
  color: var(--site-color, #111);
  font: 100%/1.5 system-ui;
}
```

`CSS._prefersInterface()` applies these “light mode” and “dark mode” queries to
documents on the fly. The entire frontend script is less than 300 bytes.

[CSS Prefers Interface] works in all major browsers, including Safari 6+ and
Internet Explorer 9+.
[See it for yourself.](https://app.crossbrowsertesting.com/public/i76b092cd2b52b86/screenshots/z25c0ccdfcc9c9b8956f?size=medium&type=windowed)

```js
import 'css-prefers-interface';

// apply "dark" queries
CSS._prefersInterface('dark');

// apply "light" queries (also disabling "dark" queries)
CSS._prefersInterface('light');
```

## PostCSS Usage

Add [CSS Prefers Interface] to your project:

```bash
npm install css-prefers-interface --save-dev
```

Use [CSS Prefers Interface] to process your CSS:

```js
import postcssPrefersInterface from 'css-prefers-interface/postcss';

postcssPrefersInterface.process(YOUR_CSS /*, processOptions, pluginOptions */);
```

Or use it as a [PostCSS] plugin:

```js
import postcss from 'postcss';
import postcssPrefersInterface from 'css-prefers-interface/postcss';

postcss([
  postcssPrefersInterface(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
```

[CSS Prefers Interface] runs in all Node environments, with special
instructions for:

| [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
| --- | --- | --- | --- | --- |

---

## How does the frontend work?

The `color-index` media query is understood in all major browsers going back to
Internet Explorer 9, but all implementations only seem to allow a `color-index`
of `0`.

This script changes `(color-index: 48)` queries into
`not all and (color-index: 48)` to activate “dark mode” specific CSS, and then
it inverts `(color-index: 70)` queries into `not all and (color-index: 48)`
to activate “light mode” specific CSS.

```css
@media (color-index: 70) { /* "light" query */
  body {
    background-color: white;
    color: black;
  }
}
```

These valid queries are accessible to `document.styleSheet`, so no css parsing
is required to use this library, which is how the script is less than 300 bytes.

## Why does the frontend 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.

[cli-img]: https://img.shields.io/travis/csstools/css-prefers-interface.svg
[cli-url]: https://travis-ci.org/csstools/css-prefers-interface
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/postcss/postcss
[npm-img]: https://img.shields.io/npm/v/css-prefers-interface.svg
[npm-url]: https://www.npmjs.com/package/css-prefers-interface

[PostCSS]: https://github.com/postcss/postcss
[CSS Prefers Interface]: https://github.com/csstools/css-prefers-interface

---
_Source: https://npm.io/package/css-prefers-interface · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._