@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 by default
• If there is no theme in localStorage, the default is the user's preferred theme

Installation

npm install @hrc/toggle-theme

Usage

1. Use the component in your project:

   import { ThemeButton } from "@hrc/toggle-theme";
   import { Icon } from "@hrc/material-icons";
   
   const Light = () => {
     return (
       <>
         <Icon name="light_mode" size="large" color="warning" />
         <span>Light</span>
       </>
     );
   };
   
   const Dark = () => {
     return (
       <>
         <Icon name="dark_mode" size="large" color="info" />
         <span>Dark</span>
       </>
     );
   };
   
   export function PackageDemo() {
     return <ThemeButton lightElement={<Light />} darkElement={<Dark />} />;
   }

2. Add your styles:

   :root {
     --bg-color: #fff;
     --text-color: #17181c;
   }
   [data-theme="dark"] {
     --bg-color: #17181c;
     --text-color: #fff;
   }
   
   body {
     background-color: var(--bg-color);
     color: var(--text-color);
   }

Documentation

• Package Documentation