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 1 year 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 (about 6 years ago)
• Default Branch: main
• Last Pushed: 2023-03-06T09:17:40.000Z (over 3 years ago)
• Last Synced: 2025-05-30T23:07:21.381Z (about 1 year 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: 28
• Watchers: 0
• 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)