https://github.com/trezy/react-color-mode
https://github.com/trezy/react-color-mode
colormode darkmode lightmode nextjs reactjs
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/trezy/react-color-mode
- Owner: trezy
- License: bsd-3-clause
- Created: 2020-12-22T16:28:45.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-07-14T03:48:38.000Z (almost 2 years ago)
- Last Synced: 2025-10-03T22:57:36.078Z (9 months ago)
- Topics: colormode, darkmode, lightmode, nextjs, reactjs
- Language: JavaScript
- Homepage: https://react-color-mode.trezy.com
- Size: 548 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
react-color-mode
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.
[![Version][version-badge]][package]
[![BSD-3-Clause License][license-badge]][license]
[![Downloads][downloads-badge]][npmtrends]
[![Bundle size][bundlephobia-badge]][bundlephobia]
[![Build status][build-status-badge]][build-status]
[![Code Coverage][coveralls-badge]][coveralls]
[![Dependencies][daviddm-badge]][daviddm]
[![Maintainability][codeclimate-badge]][codeclimate]
[![Code of Conduct][code-of-conduct-badge]][code-of-conduct]
[![PRs Welcome][prs-badge]][prs]
[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
[![Tweet][twitter-badge]][twitter]
## 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.
[bundlephobia]: https://bundlephobia.com/result?p=react-color-mode
[bundlephobia-badge]: https://img.shields.io/bundlephobia/minzip/react-color-mode.svg?style=flat-square
[build-status]: https://github.com/trezy/react-color-mode/actions
[build-status-badge]: https://img.shields.io/github/workflow/status/trezy/react-color-mode/Release?style=flat-square
[code-of-conduct]: CODE_OF_CONDUCT.md
[code-of-conduct-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[codeclimate]: https://codeclimate.com/github/trezy/react-color-mode
[codeclimate-badge]: https://img.shields.io/codeclimate/maintainability/trezy/react-color-mode.svg?style=flat-square
[coveralls]: https://coveralls.io/github/trezy/react-color-mode
[coveralls-badge]: https://img.shields.io/coveralls/trezy/react-color-mode.svg?style=flat-square
[daviddm]: https://david-dm.org/trezy/react-color-mode
[daviddm-badge]: https://img.shields.io/david/dev/trezy/react-color-mode.svg?style=flat-square
[downloads-badge]: https://img.shields.io/npm/dm/react-color-mode.svg?style=flat-square
[github-watch]: https://github.com/trezy/react-color-mode/watchers
[github-watch-badge]: https://img.shields.io/github/watchers/trezy/react-color-mode.svg?style=social
[github-star]: https://github.com/trezy/react-color-mode/stargazers
[github-star-badge]: https://img.shields.io/github/stars/trezy/react-color-mode.svg?style=social
[license]: LICENSE
[license-badge]: https://img.shields.io/npm/l/react-color-mode.svg?style=flat-square
[npmtrends]: https://www.npmtrends.com/react-color-mode
[package]: https://npmjs.com/package/react-color-mode
[prs]: CONTRIBUTING.md
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[twitter]: 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
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/trezy/react-color-mode.svg?style=social
[version-badge]: https://img.shields.io/npm/v/react-color-mode.svg?style=flat-square