xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-06-05 05:16:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify theme toggle implementation in HomeSidebar and ThemeToggle components

Browse Source
This commit is contained in:
Junyan Qin
2025-12-28 22:43:05 +08:00
parent 07ad846e96
commit ba5b481617
2 changed files with 35 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/components/ui/theme-toggle.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
import { Moon, Sun } from 'lucide-react';
import { Moon, Sun, Monitor } from 'lucide-react';
import { useTheme } from 'next-themes';
import { Button } from '@/components/ui/button';
@@ -13,11 +13,16 @@ export function ThemeToggle() {
<Button
variant="outline"
size="icon"
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
onClick={() =>
setTheme(
theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light',
)
}
className="h-9 w-9"
>
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
{theme === 'light' && <Sun className="h-[1.2rem] w-[1.2rem]" />}
{theme === 'dark' && <Moon className="h-[1.2rem] w-[1.2rem]" />}
{theme === 'system' && <Monitor className="h-[1.2rem] w-[1.2rem]" />}
</Button>
);
}