Skip to content

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

License

Notifications You must be signed in to change notification settings

feross/color-scheme-change

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

color-scheme-change travis npm downloads javascript style guide

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.