0.0.2 • Published 3 years ago
@madebysid/usetheme v0.0.2
useTheme
Simple-to-use React hook to add light/dark modes to your React app.
✅️ Respects user OS preference ✅️️ Respects manual theme overrides ✅️ Snaps back to OS preference if needed ✅️ Syncs theme across tabs and windows
Installation
npm i @madebysid/usetheme
--OR--
yarn add @madebysid/usetheme
Usage
- Wrap your app in a
ThemeProvider
:
import { ThemeProvider } from "useTheme";
ReactDOM.render(
<React.StrictMode>
<ThemeProvider>{/* ... Rest of your app */}</ThemeProvider>
</React.StrictMode>,
document.getElementById("root")
);
- Use the
useTheme
hook whenever you need access to the theme:
import { useTheme } from "useTheme";
function Component() {
const { theme, setTheme } = useTheme();
return (
<>
Current theme: {theme}
<button onClick={setTheme("dark")}>🌚</button>
<button onClick={setTheme("light")}>🌝</button>
</>
);
}