@hdoc/react-toggle-theme

@hdoc/react-toggle-theme

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

Installation

npm install @hdoc/react-toggle-theme

Usage

First, import load-theme.js in your index.html:

<script
  type="module"
  src="/path/to/@hdoc/react-toggle-theme/dist/load-theme.js"
></script>

Then, in your App.jsx or another file:

import { ThemeButton } from "@hdoc/react-toggle-theme";

function App() {
  return (
    <>
      <ThemeButton
        lightElement={<span>Light</span>}
        darkElement={<span>Dark</span>}
        fullRounded
      />
    </>
  );
}

Finally, you will need to add your styles manually:

/* For light theme: */
[data-theme="light"] { ... }
[data-theme="light"] .my-class { ... }

/* For dark theme: */
[data-theme="dark"] { ... }
[data-theme="dark"] .my-class { ... }

Props

lightElement

Element to render when the theme is light.

Type: ReactNode

darkElement

Element to render when the theme is dark.

Type: ReactNode

fullRounded

Whether to render the button with rounded corners as a circle.

Type: boolean

CSS classes

theme-button

Default class name

theme-button--full-rounded

Styles the button as a circle when fullRounded=true

Customization

You can customize the background color of the button with the following CSS custom properties:

.theme-button {
  --button-bg: #fff;
  --button-bg-hover: #eee;
  --button-bg-active: #ddd;
}

/* The same custom properties applies for dark theme. */
[data-theme="dark"] .theme-button {
  --button-bg: #333;
  --button-bg-hover: #444;
  --button-bg-active: #555;
}