https://github.com/daveschumaker/react-dark-mode-hook

A React hook to determine if user's system / device has dark mode enabled
https://github.com/daveschumaker/react-dark-mode-hook

dark-mode hooks react reactjs styled-components

Last synced: 3 months ago
JSON representation

A React hook to determine if user's system / device has dark mode enabled

• Host: GitHub
• URL: https://github.com/daveschumaker/react-dark-mode-hook
• Owner: daveschumaker
• License: mit
• Created: 2020-05-07T04:36:09.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-06-02T16:26:32.000Z (about 6 years ago)
• Last Synced: 2025-07-20T08:46:11.430Z (11 months ago)
• Topics: dark-mode, hooks, react, reactjs, styled-components
• Language: JavaScript
• Size: 32.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
## React Dark Mode Hook

### Determine if user's device has dark mode enabled

![dark mode screenshot](https://raw.githubusercontent.com/daveschumaker/react-dark-mode-hook/master/hello_world.png)

### About

This is a simple hook for React to automatically detect a device's dark mode preference (as well as any changes to it) and style your web app accordingly, using something like `ThemeProvider` from `styled-components`.

It was developed as part of a side project I was hacking around on using my personal [React Starter Kit](https://github.com/daveschumaker/react-starter), which is my own React project for quickly getting prototypes and side projects up and running.

I've released this as a standard GitHub repo instead of an NPM module due to the simplicity of this hook, especially in light of [one-line packages breaking the Internet](https://news.ycombinator.com/item?id=22979245). To use it, just copy it into your project where needed.

I've released this under an [MIT license](https://github.com/daveschumaker/react-dark-mode-hook/blob/master/LICENSE.md). Feel free to use as-is, fork, copy, tear apart, profit, and share as you wish.

### Instructions

1. Copy `useDarkMode.js` into a relevant part of your web app. i.e., `app/hooks/useDarkMode.js`

2. Import `useDarkMode` into your web app's entry point and use it inside your functional component. Will return `true` or `false` based on your device's system-wide dark mode setting.

Alternatively:

You can also force a particular theme using localStorage. This has important implications for allowing a user to override system settings or for testing your themes.

`localStorage.setItem('theme', 'dark')`

`localStorage.setItem('theme', 'light')`

### Example

If you're using a library such as `styled-components`, you can do the following.

```

import React from 'react'

import { ThemeProvider } from 'styled-components'

import useDarkMode from 'app/hooks/useDarkMode'

import { lightTheme, darkTheme } from 'app/styles/theme'

const App = () => {

    const darkModeEnabled = useDarkMode()

    

        

    

}

```