Skip to content
React hooks utilities to use dark theme.
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
.gitignore
.npmignore
.nvmrc
.prettierrc
.travis.yml
LICENSE
README.md
jest.config.js
package.json
tsconfig.build.json
tsconfig.json
tslint.json
yarn.lock

README.md

Build Status

Install

# With NPM
$ npm install use-theme

# With Yarn
$ yarn add use-theme

Usage

import React, { useCallback } from 'react'
import { useTheme, ThemeProvider } from 'use-theme'

const ChangeThemeButton = ({ children, theme }) => {
  const [currentTheme, setTheme] = useTheme()
  const changeTheme = useCallback(() => setTheme(theme), [theme, setTheme])
  return (
    <button
      className={theme === currentTheme ? 'active' : ''}
      onClick={changeTheme}
    >
      {children}
    </button>
  )
}

const App = () => {
  const [theme, setTheme] = useTheme()
  return (
    <div className={theme}>
      <ChangeThemeButton theme="dark">Dark theme</ChangeThemeButton>
      <ChangeThemeButton theme="light">Light theme</ChangeThemeButton>
    </div>
  )
}

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById('app')
)
You can’t perform that action at this time.