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.
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"
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"
Install dependencies:
yarn
Compile Typescript to ES6 before publishing to NPM:
yarn build
- 🙅
prefers-reduced-motion
· GitHub · NPM - 🎨
prefers-color-scheme
· GitHub · NPM - 🕶️
prefers-contrast
· GitHub · NPM - 🎞️
prefers-reduced-transparency
· GitHub · NPM - 🌑
inverted-colors
· GitHub · NPM - 🧖
environment-blending
· GitHub · NPM - 💡
light-level
· GitHub · NPM
MIT