feat: add light/dark display switch mode

This commit is contained in:
qixinbo
2026-03-28 16:25:35 +08:00
parent bd731660ac
commit 27270063f7
21 changed files with 449 additions and 358 deletions
+9 -9
View File
@@ -66,9 +66,9 @@ export function Settings() {
};
return (
<div className="flex-1 flex flex-col h-full bg-zinc-50/30 overflow-hidden">
<div className="h-14 px-6 flex items-center justify-between border-b border-zinc-100 bg-white">
<div className="flex items-center gap-2 text-zinc-700 font-medium">
<div className="flex-1 flex flex-col h-full bg-muted/50/30 overflow-hidden">
<div className="h-14 px-6 flex items-center justify-between border-b border-border bg-background">
<div className="flex items-center gap-2 text-foreground/80 font-medium">
<Save className="h-5 w-5 text-indigo-500" />
</div>
@@ -79,7 +79,7 @@ export function Settings() {
{error && <div className="text-sm text-red-600 bg-red-50 border border-red-100 rounded-md p-3">{error}</div>}
{success && <div className="text-sm text-emerald-600 bg-emerald-50 border border-emerald-100 rounded-md p-3">{success}</div>}
<Card className="border-zinc-200 shadow-sm">
<Card className="border-border shadow-sm">
<CardHeader>
<CardTitle className="text-xl">{t('accountInfo')}</CardTitle>
<CardDescription>{t('modifyLoginEmailAndPassword')}</CardDescription>
@@ -91,9 +91,9 @@ export function Settings() {
id="username"
value={user?.username || ''}
disabled
className="bg-zinc-50 text-zinc-500"
className="bg-muted/50 text-muted-foreground"
/>
<p className="text-xs text-zinc-400">{t('usernameCannotBeModified')}</p>
<p className="text-xs text-muted-foreground">{t('usernameCannotBeModified')}</p>
</div>
<div className="space-y-2">
@@ -106,7 +106,7 @@ export function Settings() {
/>
</div>
<div className="space-y-2 pt-4 border-t border-zinc-100">
<div className="space-y-2 pt-4 border-t border-border">
<Label htmlFor="new-password">{t('newPassword')}</Label>
<Input
id="new-password"
@@ -135,8 +135,8 @@ export function Settings() {
{isPasswordMismatch && <p className="text-sm text-red-600">{t('passwordsDoNotMatch')}</p>}
</div>
</CardContent>
<CardFooter className="bg-zinc-50/50 border-t border-zinc-100 pt-6">
<Button onClick={handleSave} className="ml-auto bg-indigo-600 hover:bg-indigo-700 text-white" disabled={isSaving || isPasswordMismatch}>
<CardFooter className="bg-muted/50/50 border-t border-border pt-6">
<Button onClick={handleSave} className="ml-auto bg-indigo-600 hover:bg-indigo-700 text-primary-foreground" disabled={isSaving || isPasswordMismatch}>
{isSaving ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Save className="h-4 w-4 mr-2" />}
</Button>