A dark-mode toggle pill with a sun/moon icon swap. The track shifts from deep indigo gradient to amber gradient. The knob slides with spring and crossfades between a moon (off) and a sun with rays (on) — each icon counter-rotates 90° as it enters/exits.
Goal: Create an "Icon" toggle — a dark/light mode switch with sun and moon icons.
Visual behavior: A 60×32px pill. Off state: deep indigo gradient track, faint white knob holding a moon SVG. On state: amber gradient track with glow, bright white knob holding a sun SVG with 8 rays. The knob slides with spring overshoot (translateX 28px). The moon exits by rotating 90° and fading; the sun enters counter-rotating from -90°. All transitions are CSS — no keyframes needed.
Technique: React useState for on/off. Two absolutely-positioned SVGs inside the knob, each toggled via transform + opacity transitions. No library dependencies.
Accessibility: role="switch" + aria-checked + dynamic aria-label ("Switch to dark/light mode"). Transitions skipped under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.