Theme Switch

Buttons

About

A cookie-backed light/dark/auto theme picker with segmented, select or icon-menu variants, that sets a data attribute on the html element and syncs across every switch on the page.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Theme Switch to your project and fits it to your theme.

Code

How Theme Switch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ThemeSwitch from "@/components/ui/theme-switch";

export default function ThemeSwitchMenuDemo() {
  return (
    <div className="flex min-h-[200px] w-full items-center justify-center bg-background p-10">
      <ThemeSwitch
        variant="menu"
        cookie="sb-theme-demo3"
        attribute="data-demo-theme"
        themes={["auto", "deep-space", "nebula", "daylight"]}
      />
    </div>
  );
}