![Build Status](https://camo.githubusercontent.com/4aa39ed80156048e49f12bf22be00c294119d18810b3c08a7007ffcf4a4aad3a/68747470733a2f2f7472617669732d63692e6f72672f736361737469656c2f7573652d7468656d652e7376673f6272616e63683d6d6173746572)
# With NPM
$ npm install use-theme
# With Yarn
$ yarn add use-theme
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')
)