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.
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.
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';The hasNativeSupport boolean represents whether prefers-color-scheme is
supported by the browser.
The optional onChange function is run when the preferred color scheme is
changed, either from the OS or manually.
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.