Files
Snip/src/components/ThemeToggle.tsx
T
sittichok OuamsiriandClaude Opus 5.5 2e1133e39c feat: redesign UI and UX around design-engineering principles
- Ink-first palette, drop gradients/glow; tabular numbers
- Home: form stays put, results stack below and auto-copy; paste shortens instantly
- Hold-to-delete replaces the delete confirm modal
- Copy buttons morph to a check instead of toasting
- Motion: CSS press feedback, custom ease-out, origin-aware menu, faster exits,
  no animation on frequent/keyboard actions, reduced-motion respected
- Fix: scheme-less URLs ("example.com") were blocked by native validation

Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-10 00:11:22 +07:00

21 lines
594 B
TypeScript

import { useTheme } from "../context/ThemeContext";
import { Sun, Moon } from "./icons";
export function ThemeToggle() {
const { theme, toggle } = useTheme();
const dark = theme === "dark";
return (
<button
onClick={toggle}
aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
className="press focusable grid h-9 w-9 place-items-center rounded-lg text-muted hover:bg-surface-2 hover:text-ink"
>
<span className="swap">
<Sun size={17} data-off={dark} />
<Moon size={17} data-off={!dark} />
</span>
</button>
);
}