color-scheme-change

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, a free MIDI database. Works in the browser with browserify!

install

npm install color-scheme-change

usage

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.