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)