Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rfoel/use-prefers-color-scheme
React hook for determining the preferred color scheme
https://github.com/rfoel/use-prefers-color-scheme
dark-mode dark-theme hacktoberfest hooks prefers-color-scheme react
Last synced: about 2 months ago
JSON representation
React hook for determining the preferred color scheme
- Host: GitHub
- URL: https://github.com/rfoel/use-prefers-color-scheme
- Owner: rfoel
- Created: 2020-05-11T16:47:19.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-06T09:17:40.000Z (over 1 year ago)
- Last Synced: 2024-07-17T18:34:05.046Z (2 months ago)
- Topics: dark-mode, dark-theme, hacktoberfest, hooks, prefers-color-scheme, react
- Language: TypeScript
- Homepage: https://rfoel.github.io/use-prefers-color-scheme
- Size: 3.84 MB
- Stars: 25
- Watchers: 1
- Forks: 5
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# use-prefers-color-scheme
> React hook for determining the preferred color scheme
[![NPM](https://img.shields.io/npm/v/use-prefers-color-scheme.svg)](https://www.npmjs.com/package/use-prefers-color-scheme)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)## Features:
- SSR support
- Written in Typescript## Install
```bash
npm install --save use-prefers-color-scheme
```## Usage
> **Tip** When rendered in node (SSR) the hook returns `no-preference`.
```jsx
import React from 'react'import usePrefersColorScheme from 'use-prefers-color-scheme'
const App = () => {
const prefersColorScheme = usePrefersColorScheme()
const isDarkMode = prefersColorScheme === 'dark'return (
You are using {isDarkMode ? 'Dark Mode 🌚' : 'Light Mode 🌞'}!
)
}
```## Online Demo
[![Open Codesanbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/use-prefers-color-scheme-example-xb134y?file=/src/App.js)
## License
MIT © [rfoel](https://github.com/rfoel)