Split Theme Switch

Buttons 2

About

A toggle button that switches a page between light and dark theme with an animated sun/moon icon swap.

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

Code

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

Usage.tsx

"use client";

import ThemeSwitch, { type Theme } from "@/components/ui/theme-switch-split";
import { useState } from "react";

export default function ThemeSwitchSplitDemo() {
  const [theme, setTheme] = useState<Theme>("light");

  return (
    <div
      className="flex w-full h-screen items-center justify-center"
      style={{ background: "var(--background)", color: "var(--foreground)" }}
      data-theme={theme}
    >
      <ThemeSwitch
        theme={theme}
        variant="split"
        onThemeChange={(next) => setTheme(next)}
      />
    </div>
  );
}