@hrc/toggle-theme

@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

• 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 />} />;
  }
  

• 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