@hdoc-react/toggle-theme

@hdoc-react/toggle-theme

Simple button 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 @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:

body {
  background-color: var(--color-bg, #fff);
  color: var(--color-text, #000);
}

.my-class {
  color: var(--my-color-text, #000);
}

/* FOR LIGHT THEME: */
/* This is usually unnecessary. */
[data-theme="light"] {
  --color-bg: #fff;
  --color-text: #000;
  --my-color-text: #000;
}
[data-theme="light"] .my-class {
  --my-color-text: #000;
  /* or */
  color: #000;
}

/* FOR DARK THEME: */
[data-theme="dark"] {
  --color-bg: #242424;
  --color-text: #fff;
  --my-color-text: #fff;
}
[data-theme="dark"] .my-class {
  --my-color-text: #fff;
  /* or */
  color: #fff;
}

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