https://github.com/feross/color-scheme-change

Detect system color scheme changes on the web (Dark Mode)
https://github.com/feross/color-scheme-change

color-scheme css dark-mode javascript media-query nodejs prefers-color-scheme web

Last synced: about 2 months ago
JSON representation

Detect system color scheme changes on the web (Dark Mode)

• Host: GitHub
• URL: https://github.com/feross/color-scheme-change
• Owner: feross
• License: mit
• Created: 2019-06-23T19:10:35.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-05-11T17:22:48.000Z (over 4 years ago)
• Last Synced: 2024-05-02T05:38:46.572Z (5 months ago)
• Topics: color-scheme, css, dark-mode, javascript, media-query, nodejs, prefers-color-scheme, web
• Language: JavaScript
• Homepage: https://bitmidi.com
• Size: 4.88 KB
• Stars: 58
• Watchers: 3
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# color-scheme-change [![travis][travis-image]][travis-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript style guide][standard-image]][standard-url]

[travis-image]: https://img.shields.io/travis/feross/color-scheme-change/master.svg

[travis-url]: https://travis-ci.org/feross/color-scheme-change

[npm-image]: https://img.shields.io/npm/v/color-scheme-change.svg

[npm-url]: https://npmjs.org/package/color-scheme-change

[downloads-image]: https://img.shields.io/npm/dm/color-scheme-change.svg

[downloads-url]: https://npmjs.org/package/color-scheme-change

[standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg

[standard-url]: https://standardjs.com

### Detect system color scheme changes on the web (Dark Mode)

Listen for changes to the system color scheme in the web browser. Detect when

the system switches between Light Mode and Dark Mode.

Built for and used on [BitMidi](https://bitmidi.com), a free MIDI database. Works in the browser with [browserify](https://browserify.org/)!

## install

```

npm install color-scheme-change

```

## usage

```js

import colorSchemeChange from 'color-scheme-change'

colorSchemeChange(colorScheme => {

  console.log(`Entering ${colorScheme} mode`)

  // Prints either "Entering dark mode" or "Entering light mode"

})

```

## API

### `remove = colorSchemeChange(onChange)`

Listen for changes to the system color scheme in the web browser. Detect when

the system switches between Light Mode and Dark Mode.

#### `onChange`

A callback function of the following interface: `function(colorScheme) {}` where

`colorScheme` is either `'light'` or `'dark'`. The function is called whenever

the system enters Light Mode or Dark Mode, respectively.

#### `remove`

When the returned `remove` function is called, all event listeners are cleaned

up and the `onChange` function will no longer be called when the system color

scheme changes.

## license

MIT. Copyright (c) [Feross Aboukhadijeh](https://feross.org).