React Theme Toggle

A modern, accessible dark/light theme toggle component for React.

Live demo · npm

Installation

npm install react-theme-toggle

bun add react-theme-toggle

yarn add react-theme-toggle

Usage

import { useState } from "react";
import { ToggleTheme } from "react-theme-toggle";

export default function App() {
  const [theme, setTheme] = useState("light");

  return (
    <div className={theme === "dark" ? "dark" : "light"}>
      <ToggleTheme selectedTheme={theme} onChange={setTheme} />
    </div>
  );
}

Props

| Prop | Type | Description | | -------------- | ------------------- | -------------------------------------------- | | selectedTheme| "light" \| "dark" | The currently selected theme. | | onChange | (theme) => void | Called with the new theme on toggle. | | id | string | Input id. Default "toggle-theme-switch". | | className | string | Extra classes for the visual toggle. | | size | number | Track width in px. Default 70. | | disabled | boolean | Disables the toggle. | | ariaLabel | string | Accessible label. Default "Toggle theme". |

Development

bun install
bun run dev        # demo site
bun run build:lib  # build the npm package (tsup)
bun run lint       # ESLint
bun run typecheck  # tsc --noEmit

Contributing

See CONTRIBUTING.md.

Branches

• main — the 2026 rewrite (this codebase)
• legacy — the original v1.x version (Rollup + CSS modules)