# Introduction

Make it easy to support your user's color mode preference, whether they like light mode, dark mode, or they want you to respect their system settings.

[![](https://img.shields.io/npm/v/react-color-mode.svg?style=flat-square)](https://npmjs.com/package/react-color-mode) [![](https://img.shields.io/npm/l/react-color-mode.svg?style=flat-square)](https://github.com/trezy/react-color-mode/tree/518665d4f6b4ff1f643bfc62486954618eabb3d6/LICENSE/README.md) [![](https://img.shields.io/npm/dm/react-color-mode.svg?style=flat-square)](https://www.npmtrends.com/react-color-mode) [![](https://img.shields.io/bundlephobia/minzip/react-color-mode.svg?style=flat-square)](https://bundlephobia.com/result?p=react-color-mode)

[![](https://img.shields.io/github/workflow/status/trezy/react-color-mode/Release?style=flat-square)](https://github.com/trezy/react-color-mode/actions) [![](https://img.shields.io/coveralls/trezy/react-color-mode.svg?style=flat-square)](https://coveralls.io/github/trezy/react-color-mode) [![](https://img.shields.io/david/dev/trezy/react-color-mode.svg?style=flat-square)](https://david-dm.org/trezy/react-color-mode) [![](https://img.shields.io/codeclimate/maintainability/trezy/react-color-mode.svg?style=flat-square)](https://codeclimate.com/github/trezy/react-color-mode)

[![](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://react-color-mode.trezy.com/other-important-stuff/code_of_conduct) [![](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/trezy/react-color-mode/tree/518665d4f6b4ff1f643bfc62486954618eabb3d6/CONTRIBUTING.md)

[![](https://img.shields.io/github/watchers/trezy/react-color-mode.svg?style=social)](https://github.com/trezy/react-color-mode/watchers) [![](https://img.shields.io/github/stars/trezy/react-color-mode.svg?style=social)](https://github.com/trezy/react-color-mode/stargazers) [![](https://img.shields.io/twitter/url/https/github.com/trezy/react-color-mode.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20out%20react-color-mode%20by%20%40TrezyCodes%20https%3A%2F%2Fgithub.com%2Ftrezy%2Freact-color-mode%20%F0%9F%91%8D)

## Quick Start

### Requirements

* npm or Yarn
* Node.js
* React 16.8+

### Installation

```bash
npm install react-color-mode

# OR

yarn add react-color-mode
```

## Acknowledgments

* Thanks to [@joshwcomeau](https://github.com/joshwcomeau) for his [excellent article](https://www.joshwcomeau.com/react/dark-mode/) on setting up dark mode in a React app.