Skip to content
🎨 Get a user's preferred color scheme using CSS @​media(prefers-color-scheme)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.travis.yml
LICENSE
README.md
_config.yml
index.html
index.test.ts
index.ts
package.json
tsconfig.json
yarn.lock

README.md

🎨 Prefers color scheme

Travis CI Coverage Status GitHub Vulnerabilities NPM type definitions NPM Minzipped size

NPM

Prefers color scheme is a package that tells you a user's preferred color scheme. It's based on the CSS @media (prefers-color-scheme). It's around 700 bytes minified, 300 bytes gzipped.

⭐ Usage

Add the dependency from NPM:

npm install prefers-color-scheme

Import the package:

import prefersColorScheme from "prefers-color-scheme";

Then call the function:

const colorScheme = prefersColorScheme();
// Returns "light" or "dark"

💡 Browser support

This package only works in browsers that natively support @media (prefers-color-scheme), so it just returns "light" in unsupported browsers. Current browser support

By passing false as the argument, you can get "unsupported" as the value for unsupported browsers:

const colorScheme = prefersColorScheme(false);
// Returns "light", "dark", or "unsupported"

🛠️ Development

Install dependencies:

yarn

Compile Typescript to ES6 before publishing to NPM:

yarn build

📝 License

MIT

You can’t perform that action at this time.