README.md

react-theme-select

Reusable React theme picker component.

Jump to the theme gallery.

Install

pnpm add react-theme-select

Usage

import { ThemeSelect, defaultPalettes } from "react-theme-select";

const themes = Object.keys(defaultPalettes);

<ThemeSelect
  theme={theme}
  setTheme={setTheme}
  availableThemes={themes}
/>

This component expects CSS variables for --background, --surface, --text, --border, --primary, --success, --warning, --danger, --info, and optionally --muted.

See examples/basic/README.md for a full working snippet.

Build

pnpm run build

The build outputs ESM to dist/ and copies the CSS module alongside the JS output.

Theme gallery

Generate screenshots with:

pnpm run screenshots

If Playwright browsers are missing:

pnpm exec playwright install chromium

Show all themes