Theme Switcher

A three-way toggle for switching between system, light, and dark color themes. Sets the data-vesper-theme attribute on the document element to control the active theme.

import { ThemeSwitcher } from "@tenstorrent/vesper/theme-switcher";

export default function ThemeSwitcherDemo() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: "var(--vesper-spacing-2)",
      }}
    >
      <ThemeSwitcher size="lg" />
      <ThemeSwitcher size="sm" />
    </div>
  );
}

Options

Prop	Type	Description	Default
`size`	`"sm" \| "lg"`	The size of the theme switcher.	`"lg"`

Examples

Render a ThemeSwitcher without any props. By default it renders at lg size:

import { ThemeSwitcher } from "@tenstorrent/vesper/theme-switcher";

export default function BasicThemeSwitcher() {
  return <ThemeSwitcher />;
}

To specify a size, pass size="sm" or size="lg":

import { ThemeSwitcher } from "@tenstorrent/vesper/theme-switcher";

export default function ThemeSwitcherSizes() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: "var(--vesper-spacing-2)",
      }}
    >
      <ThemeSwitcher size="sm" />
      <ThemeSwitcher size="lg" />
    </div>
  );
}