Simple component for toggle between light
and dark
theme in your React app.
- It saves the theme in
localStorage
with the keytheme
. - If there is no theme in
localStorage
, the default is the user's preferred theme.
npm install @hrc/toggle-theme
First, import load-theme.js
in your index.html
:
<script
type="module"
src="/path/to/@hrc/toggle-theme/dist/load-theme.js"
></script>
Then, in your App.jsx
or another file:
import { ThemeButton } from "@hrc/toggle-theme";
function App() {
return (
<>
<ThemeButton
lightElement={<span>Light</span>}
darkElement={<span>Dark</span>}
fullRounded
/>
</>
);
}
Finally, you will need to add your styles manually:
:root {
--bg-color: #fff;
--text-color: #17181c;
}
[datat-theme="dark"] {
--bg-color: #17181c;
--text-color: #fff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}