@nberlette/color-scheme-change

Detect when a user's system color scheme has changed, so you can serve up a different theme on your site to make them feel right at home.

Implementing it is easy and takes only a few seconds, but you can try it on RunKit if you want a sample!

---

Installation

yarn add @nberlette/color-scheme-change

npm install --save @nberlette/color-scheme-change

I highly recommend switching to Yarn for your package management if you haven't already.

CommonJS Usage (Node.js)

const { colorSchemeChange } = require('@nberlette/color-scheme-change')

colorSchemeChange(theme => console.log(`User's color scheme: ${theme}`))

ES6 Usage (browser)

import { colorSchemeChange } from '@nberlette/color-scheme-change'

colorSchemeChange(theme => console.log(`User's color scheme: ${theme}`))

Try it on RunKit!

---

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.

---

Licensed under MIT. Copyright (c) Nicholas Berlette

Original copyright (c) Feross Aboukhadijeh