Detects user’s color scheme preferences using the 'prefers-color-scheme' CSS3 level 5 media query.
npm install @magica11y/prefers-color-schemeprefersColorScheme()
======================
> Detects user’s color scheme preferences using the prefers-color-scheme CSS3 level 5 media query.











Quoting from the CSS3 level 5
media queries specfication…
> The 'prefers-color-scheme' media feature reflects the user’s desire that the page use a light or dark color theme.
:high_brightness: prefersColorScheme() is part of :crystal_ball: Magica11y,
which provides a suite of functions to detect “user-preference” and “environment” media features.
Magica11y functions are awesome because…
* They have zero dependencies
* They’re lightweight; e.g. prefersColorScheme() is just  minified, or  minified & gzipp’d
* They use the window.matchMedia API underneath
* They’re optimized for performance; all the module functions are designed in such a way that they exit early
* They provide a clean, well-documented and semantic API to work with
In addition to prefersColorScheme(), Magica11y also provides…
* :tv: environmentBlending()
* :art: forcedColors()
* :new_moon: invertedColors()
* ~:candle: lightLevel()~
* :high_brightness: prefersContrast()
* :roller_coaster: prefersReducedMotion()
* :gem: prefersReducedTransparency()
You can install prefersColorScheme() using a package manager such as yarn or npm…
``sh`
$ yarn add "@magica11y/prefers-color-scheme"OR
$ npm install --save "@magica11y/prefers-color-scheme"
You can also include prefersColorScheme() from a CDN on your page, such as jsDelivr or unpkg…
`html`
prefersColorScheme() is distributed as a UMD module, so you can use it as a browser global…
`js`
var preferredColorScheme = window.magica11y.prefersColorScheme.default();
var enableDarkTheme = (preferredColorScheme === window.magica11y.prefersColorScheme.colorSchemes.DARK);
… or as a CommonJS module…
`js`
const prefersColorScheme = require('@magica11y/prefers-color-scheme');
const preferredColorScheme = prefersColorScheme.default();
const enableDarkTheme = (preferredColorScheme === prefersColorScheme.colorSchemes.DARK);
… or as an ES module…
`js
import prefersColorScheme, { colorSchemes } from '@magica11y/prefersColorScheme';
const preferredColorScheme = prefersColorScheme();
const enableDarkTheme = (preferredColorScheme === colorSchemes.DARK);
`
The colorSchemes object contains all the possible values supported by the 'prefers-color-scheme' media query…
* colorSchemes.LIGHT (spec: 'light')colorSchemes.DARK
> Indicates that user has expressed the preference for a page that has a light theme (dark text on light background), or has not expressed an active preference (and thus should receive the "web default" of a light theme).
* (spec: 'dark')null
> Indicates that user has expressed the preference for a page that has a dark theme (light text on dark background).
*
> The user’s preference could not be determined.
You can import the Flow types from the provided libdefs
in node_modules/@magica11y/prefers-color-scheme/lib by configuring them in your .flowconfig…
``
[libs]
node_modules/@magica11y/prefers-color-scheme/lib
Now, you can use the Flow types as follows…
`js
// @flow
import prefersColorScheme, { type ColorScheme } from '@magica11y/prefers-color-scheme';
const preferredColorScheme: ?ColorScheme = prefersColorScheme();
`
:tophat: Note: prefersColorScheme() returns a nullableColorScheme
type (i.e. ). So using the ? prefix to indicate nullable types is recommended (i.e. ?ColorScheme`).

See LICENSE.md for more details.
Handcrafted with :heart: by Rishabh.
