├── .npmignore ├── .github └── FUNDING.yml ├── .travis.yml ├── index.js ├── package.json ├── LICENSE └── README.md /.npmignore: -------------------------------------------------------------------------------- 1 | .travis.yml 2 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: feross 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - lts/* 4 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = colorSchemeChange 2 | 3 | function colorSchemeChange (onChange) { 4 | const media = window.matchMedia('(prefers-color-scheme: dark)') 5 | 6 | handleChange() 7 | 8 | if ('addEventListener' in media) { 9 | media.addEventListener('change', handleChange) 10 | } else if ('addListener' in media) { 11 | media.addListener(handleChange) 12 | } 13 | 14 | return remove 15 | 16 | function handleChange () { 17 | const scheme = media.matches 18 | ? 'dark' 19 | : 'light' 20 | onChange(scheme) 21 | } 22 | 23 | function remove () { 24 | if ('removeEventListener' in media) { 25 | media.removeEventListener('change', handleChange) 26 | } else if ('removeListener' in media) { 27 | media.removeListener(handleChange) 28 | } 29 | onChange = null 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "color-scheme-change", 3 | "description": "Detect system color scheme changes on the web (Dark Mode)", 4 | "version": "1.0.1", 5 | "author": { 6 | "name": "Feross Aboukhadijeh", 7 | "email": "feross@feross.org", 8 | "url": "https://feross.org/" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/feross/color-scheme-change/issues" 12 | }, 13 | "dependencies": {}, 14 | "devDependencies": { 15 | "standard": "*" 16 | }, 17 | "homepage": "https://github.com/feross/color-scheme-change", 18 | "keywords": [ 19 | "color scheme", 20 | "dark mode", 21 | "detect", 22 | "system color", 23 | "color", 24 | "color-scheme", 25 | "prefers-color-scheme", 26 | "css", 27 | "media query", 28 | "light mode" 29 | ], 30 | "license": "MIT", 31 | "main": "index.js", 32 | "repository": { 33 | "type": "git", 34 | "url": "git://github.com/feross/color-scheme-change.git" 35 | }, 36 | "scripts": { 37 | "test": "standard" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Feross Aboukhadijeh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 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] 2 | 3 | [travis-image]: https://img.shields.io/travis/feross/color-scheme-change/master.svg 4 | [travis-url]: https://travis-ci.org/feross/color-scheme-change 5 | [npm-image]: https://img.shields.io/npm/v/color-scheme-change.svg 6 | [npm-url]: https://npmjs.org/package/color-scheme-change 7 | [downloads-image]: https://img.shields.io/npm/dm/color-scheme-change.svg 8 | [downloads-url]: https://npmjs.org/package/color-scheme-change 9 | [standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg 10 | [standard-url]: https://standardjs.com 11 | 12 | ### Detect system color scheme changes on the web (Dark Mode) 13 | 14 | Listen for changes to the system color scheme in the web browser. Detect when 15 | the system switches between Light Mode and Dark Mode. 16 | 17 | Built for and used on [BitMidi](https://bitmidi.com), a free MIDI database. Works in the browser with [browserify](https://browserify.org/)! 18 | 19 | ## install 20 | 21 | ``` 22 | npm install color-scheme-change 23 | ``` 24 | 25 | ## usage 26 | 27 | ```js 28 | import colorSchemeChange from 'color-scheme-change' 29 | 30 | colorSchemeChange(colorScheme => { 31 | console.log(`Entering ${colorScheme} mode`) 32 | // Prints either "Entering dark mode" or "Entering light mode" 33 | }) 34 | ``` 35 | 36 | ## API 37 | 38 | ### `remove = colorSchemeChange(onChange)` 39 | 40 | Listen for changes to the system color scheme in the web browser. Detect when 41 | the system switches between Light Mode and Dark Mode. 42 | 43 | #### `onChange` 44 | 45 | A callback function of the following interface: `function(colorScheme) {}` where 46 | `colorScheme` is either `'light'` or `'dark'`. The function is called whenever 47 | the system enters Light Mode or Dark Mode, respectively. 48 | 49 | #### `remove` 50 | 51 | When the returned `remove` function is called, all event listeners are cleaned 52 | up and the `onChange` function will no longer be called when the system color 53 | scheme changes. 54 | 55 | ## license 56 | 57 | MIT. Copyright (c) [Feross Aboukhadijeh](https://feross.org). 58 | --------------------------------------------------------------------------------