Spaces:
Paused
Paused
File size: 3,057 Bytes
5a81b95 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | import { Sun, Moon, Monitor, Palette, Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
DropdownMenuLabel,
} from '@/components/ui/dropdown-menu';
import { useTheme, SKINS, SkinId } from '@/contexts/ThemeContext';
import { cn } from '@/lib/utils';
const ThemeToggle = () => {
const { theme, setTheme, resolvedTheme, skin, setSkin, currentSkin } = useTheme();
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="gap-2">
<Palette className="w-5 h-5" />
<span className="hidden sm:inline text-xs">{currentSkin.name}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56 bg-card border-border">
<DropdownMenuLabel className="text-xs text-muted-foreground">Tema</DropdownMenuLabel>
<DropdownMenuItem
onClick={() => setTheme('light')}
className={cn("cursor-pointer", theme === 'light' && "bg-primary/10")}
>
<Sun className="w-4 h-4 mr-2" />
Lys
{theme === 'light' && <Check className="w-4 h-4 ml-auto" />}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => setTheme('dark')}
className={cn("cursor-pointer", theme === 'dark' && "bg-primary/10")}
>
<Moon className="w-4 h-4 mr-2" />
Mørk
{theme === 'dark' && <Check className="w-4 h-4 ml-auto" />}
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => setTheme('system')}
className={cn("cursor-pointer", theme === 'system' && "bg-primary/10")}
>
<Monitor className="w-4 h-4 mr-2" />
System
{theme === 'system' && <Check className="w-4 h-4 ml-auto" />}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuLabel className="text-xs text-muted-foreground">Skin</DropdownMenuLabel>
{(Object.keys(SKINS) as SkinId[]).map((skinId) => {
const skinOption = SKINS[skinId];
return (
<DropdownMenuItem
key={skinId}
onClick={() => setSkin(skinId)}
className={cn("cursor-pointer flex items-center gap-3", skin === skinId && "bg-primary/10")}
>
<div
className="w-4 h-4 rounded-full border border-border/50"
style={{ background: `hsl(${skinOption.colors.primary})` }}
/>
<div className="flex-1">
<div className="text-sm">{skinOption.name}</div>
<div className="text-xs text-muted-foreground">{skinOption.description}</div>
</div>
{skin === skinId && <Check className="w-4 h-4 shrink-0" />}
</DropdownMenuItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
);
};
export default ThemeToggle;
|