Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/csstools/css-prefers-color-scheme
Use light or dark color themes in CSS
https://github.com/csstools/css-prefers-color-scheme
Last synced: 3 months ago
JSON representation
Use light or dark color themes in CSS
- Host: GitHub
- URL: https://github.com/csstools/css-prefers-color-scheme
- Owner: csstools
- License: cc0-1.0
- Archived: true
- Created: 2018-06-20T17:04:46.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2021-12-16T12:02:50.000Z (about 3 years ago)
- Last Synced: 2024-04-14T01:02:16.580Z (10 months ago)
- Language: JavaScript
- Homepage: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme
- Size: 449 KB
- Stars: 99
- Watchers: 8
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README-BROWSER.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Prefers Color Scheme [
][Prefers Color Scheme]
[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]
[Prefers Color Scheme] applies color schemes with fallbacks provided by the
[Prefers Color Scheme PostCSS plugin](README-POSTCSS.md).
```js
// 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.](https://app.crossbrowsertesting.com/public/i76b092cd2b52b86/screenshots/z25c0ccdfcc9c9b8956f?size=medium&type=windowed)
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:
```js
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.
```js
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.
```js
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.
[cli-img]: https://img.shields.io/travis/csstools/css-prefers-color-scheme/master.svg
[cli-url]: https://travis-ci.org/csstools/css-prefers-color-scheme
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/postcss/postcss
[npm-img]: https://img.shields.io/npm/v/css-prefers-color-scheme.svg
[npm-url]: https://www.npmjs.com/package/css-prefers-color-scheme
[PostCSS]: https://github.com/postcss/postcss
[Prefers Color Scheme]: https://github.com/csstools/css-prefers-color-scheme