Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (60 sloc) 2.99 KB

Prefers Color Scheme

NPM Version Build Status Support Chat

Prefers Color Scheme applies color schemes with fallbacks provided by the Prefers Color Scheme PostCSS plugin.

// initialize prefersColorScheme (applies the current OS color scheme, if available)
const prefersColorScheme = require('css-prefers-color-scheme')();

// apply "dark" queries (you can also apply "light")
prefersColorScheme.scheme = 'dark';

Prefers Color Scheme works in all major browsers, including Safari 6+ and Internet Explorer 9+ without any polyfills. See it for yourself.

To maintain compatibility with browsers supporting prefers-color-scheme, the library will remove prefers-color-scheme media queries in favor of cross-browser compatible color-index media queries. This ensures a seemless experience, even when JavaScript is unable to run.

Usage

Use Prefers Color Scheme to activate your prefers-color-scheme queries:

const prefersColorScheme = require('css-prefers-color-scheme')();

By default, the current OS color scheme is applied if your browser supports it. Otherwise, the light color scheme is applied. You may override this by passing in a color scheme.

const prefersColorScheme = require('css-prefers-color-scheme')('dark');

The prefersColorScheme object returns the following properties — value, hasNativeSupport, onChange, and removeListener.

value

The value property returns the currently preferred color scheme, and it can be changed.

const prefersColorScheme = require('css-prefers-color-scheme')();

// log the preferred color scheme
console.log(prefersColorScheme.scheme);

// apply "dark" queries
prefersColorScheme.scheme = 'dark';

hasNativeSupport

The hasNativeSupport boolean represents whether prefers-color-scheme is supported by the browser.

onChange

The optional onChange function is run when the preferred color scheme is changed, either from the OS or manually.

removeListener

The removeListener function removes the native prefers-color-scheme listener, which may or may not be applied, depending on your browser support. This is provided to give you complete control over plugin cleanup.