"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

type ThemeOption = "light" | "dark" | "system";

interface ThemeSwitcherProps {
  className?: string;
  value?: ThemeOption;
  defaultValue?: ThemeOption;
  onChange?: (value: ThemeOption) => void;
}

const options: Array<{ value: ThemeOption; label: string }> = [
  { value: "light", label: "Light" },
  { value: "dark", label: "Dark" },
  { value: "system", label: "System" },
];

export function ThemeSwitcher({
  className,
  value,
  defaultValue = "system",
  onChange,
}: ThemeSwitcherProps) {
  const [internalValue, setInternalValue] = React.useState<ThemeOption>(defaultValue);
  const activeValue = value ?? internalValue;

  const handleSelect = (nextValue: ThemeOption) => {
    if (!value) {
      setInternalValue(nextValue);
    }
    onChange?.(nextValue);
  };

  return (
    <div
      className={cn(
        "inline-flex items-center rounded-full border border-border bg-background p-1",
        className
      )}
      role="radiogroup"
      aria-label="Theme preference"
    >
      {options.map((option) => {
        const isActive = activeValue === option.value;
        return (
          <button
            key={option.value}
            type="button"
            role="radio"
            aria-checked={isActive}
            onClick={() => handleSelect(option.value)}
            className={cn(
              "inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm font-medium transition",
              isActive
                ? "bg-muted text-primary"
                : "text-muted-foreground hover:bg-muted hover:text-foreground"
            )}
          >
            <ThemeIcon value={option.value} />
            <span>{option.label}</span>
          </button>
        );
      })}
    </div>
  );
}

function ThemeIcon({ value }: { value: ThemeOption }) {
  if (value === "light") {
    return (
      <svg
        aria-hidden="true"
        viewBox="0 0 24 24"
        className="h-4 w-4"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <circle cx="12" cy="12" r="4" />
        <path d="M12 2v2" />
        <path d="M12 20v2" />
        <path d="M4.93 4.93l1.41 1.41" />
        <path d="M17.66 17.66l1.41 1.41" />
        <path d="M2 12h2" />
        <path d="M20 12h2" />
        <path d="M4.93 19.07l1.41-1.41" />
        <path d="M17.66 6.34l1.41-1.41" />
      </svg>
    );
  }

  if (value === "dark") {
    return (
      <svg
        aria-hidden="true"
        viewBox="0 0 24 24"
        className="h-4 w-4"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <path d="M21 12.4A8.5 8.5 0 0 1 11.6 3a7 7 0 1 0 9.4 9.4z" />
      </svg>
    );
  }

  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      className="h-4 w-4"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect x="3" y="4" width="18" height="12" rx="2" />
      <path d="M8 20h8" />
      <path d="M12 16v4" />
    </svg>
  );
}
Theme Switcher

Dependencies

Files

Installation
