@hrc/toggle-theme

Simple component for toggle between light and dark theme in your React app.

• It saves the theme in localStorage with the key theme.
• If there is no theme in localStorage, the default is the user's preferred theme.

Installation

npm install @hrc/toggle-theme

Usage

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);
}

Documentation

• Package Documentation