React Theme Toggle

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

Current theme: light

Usage

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

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

  return (
    <ToggleTheme
      selectedTheme={theme}
      onChange={setTheme}
    />
  );
}

Props

Prop	Type	Description
selectedTheme	"light" \| "dark"	The currently selected theme.
onChange	(theme: 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".