SerinaNya
c33857ffac
- Add transactions_dirty table and zero-tolerance cleansing action - Implement bookkeeping workbench (/bookkeeping) with searchable Combobox channel selector and card suffix / account identifier - Implement transaction ledger (/transactions) with date groupings, multi-currency metrics, and filters - Update AGENTS.md guidelines for Base UI Select and Combobox bindings
48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { useTheme } from "next-themes"
|
|
import { MoonIcon, SunIcon } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
export function ThemeToggle() {
|
|
const { resolvedTheme, setTheme } = useTheme()
|
|
const mounted = React.useSyncExternalStore(
|
|
() => () => {},
|
|
() => true,
|
|
() => false
|
|
)
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
aria-label="Toggle theme"
|
|
className="text-muted-foreground"
|
|
>
|
|
<span className="size-4" />
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
const isDark = resolvedTheme === "dark"
|
|
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => setTheme(isDark ? "light" : "dark")}
|
|
aria-label="Toggle color theme"
|
|
title={isDark ? "切换为浅色模式" : "切换为深色模式"}
|
|
className="text-muted-foreground transition-colors hover:text-foreground"
|
|
>
|
|
{isDark ? (
|
|
<SunIcon data-icon="inline-start" />
|
|
) : (
|
|
<MoonIcon data-icon="inline-start" />
|
|
)}
|
|
</Button>
|
|
)
|
|
}
|