# prefers

> Detect system (or manually set) preferences for color scheme and reduced motion.

Latest version **1.0.0** (published 2020-05-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install prefers
pnpm add prefers
yarn add prefers
bun add prefers
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-05-13 |
| First published | 2020-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Colin van Eenige |
| Maintainers | vaneenige |
| Keywords | prefers-color-scheme, prefers-reduced-motion, system preference, dark mode |

## Links

- npm: https://www.npmjs.com/package/prefers
- npm.io page: https://npm.io/package/prefers

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-05-13
- 0.0.1-security — 2020-05-12

## README

# prefers

[![NPM](http://img.shields.io/npm/v/prefers.svg)](https://www.npmjs.com/package/prefers)
[![travis-ci](https://travis-ci.org/vaneenige/prefers.svg)](https://travis-ci.org/vaneenige/prefers)
[![gzip size](http://img.badgesize.io/https://unpkg.com/prefers/dist/index.js?compression=gzip)](https://unpkg.com/prefers)
[![TypeScript](https://img.shields.io/static/v1.svg?label=&message=TypeScript&color=294E80)](https://www.typescriptlang.org/)

Detect system (or manually set) preferences for color scheme and reduced motion.

Works in all modern browsers and the difference to user experience is day and night! 😬



---


### Detect color scheme

```js
import { prefers, setPrefers } from 'prefers';

// When system preference is light
prefers('color-scheme'); // light
prefers('color-scheme', 'light'); // true

// Manually set preference (in localStorage)
setPrefers('color-scheme', 'dark');
prefers('color-scheme'); // dark
prefers('color-scheme', 'dark'); // true

// Remove manually set preference
setPrefers('color-scheme', false); // removed

// When system has no preference, fallback to default
prefers('color-scheme', 'light', true); // light
prefers('color-scheme', 'dark', true); // dark
```

> Note: Manually set preference will take priority over system preference.

### Detect reduced motion

```js
import { prefers, setPrefers } from 'prefers';

// Assume reduced motion is turned off
prefers('reduced-motion'); // false
setPrefers('reduced-motion', 'reduce'); // turn on

// Assume reduced motion is turned on
prefers('reduced-motion'); // true
setPrefers('reduced-motion', 'no-preference'); // turn off
```

---

### Tip

For the best experience it's highly recommended to check for the preference as soon as possible. For example: If you use (p)react, call it before rendering the application. This way, if you're switching CSS variables or a class, the first render will match the preference.

### Other preferences?

There's a draft which describes more preferences we can possibly detect in the future. Once these actually become available, this library will include them!

Have a look at the [W3C Working Draft for Media Queries Level 5](https://www.w3.org/TR/mediaqueries-5/#media-descriptor-table).

### License

MIT © Colin van Eenige

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