Theme Switch

Component 72

About

Light/dark theme toggle for the Dali Agents console at daliagents.com, with five switch variants used across the Dali Agents UI.

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 DemoOne() {
  return (
    <div className="flex flex-col items-center gap-3">
      <ThemeSwitch />
      <a
        href="https://daliagents.com"
        target="_blank"
        rel="noreferrer"
        className="text-[10px] tracking-wide text-muted-foreground/60 transition-colors hover:text-muted-foreground"
      >
        daliagents.com
      </a>
    </div>
  );
}