Files
evanpage/frontend/components/theme-toggle.tsx
root 694b02e848 frontend: rebuild bookmark page with drag-and-drop, search, and theme system
- bookmark management with dnd-kit reordering, bulk edit, search,
  category filter/rename, and meta auto-fetch
- migrate /bookmarks → /dashboard/bookmarks under (main) layout
- homepage redesign with category grid, /-key search, dock tooltips
- theme toggle + use-theme, sonner toasts, alert-dialog/skeleton,
  visual refresh of auth pages

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-02 22:53:17 +00:00

27 lines
697 B
TypeScript

"use client";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "@/lib/use-theme";
export function ThemeToggle({ className }: { className?: string }) {
const { theme, toggle, mounted } = useTheme();
return (
<button
type="button"
onClick={toggle}
aria-label={mounted ? (theme === "dark" ? "切换到浅色" : "切换到深色") : "切换主题"}
className={
className ??
"flex h-full w-full items-center justify-center text-foreground/80 hover:text-foreground"
}
>
{mounted && theme === "dark" ? (
<Sun className="h-5 w-5" />
) : (
<Moon className="h-5 w-5" />
)}
</button>
);
}