|
1
|
import { Button } from "@/components/ui/button"; |
|
2
|
import { |
|
3
|
DropdownMenu, |
|
4
|
DropdownMenuContent, |
|
5
|
DropdownMenuItem, |
|
6
|
DropdownMenuSeparator, |
|
7
|
DropdownMenuTrigger, |
|
8
|
DropdownMenuLabel, |
|
9
|
} from "@/components/ui/dropdown-menu"; |
|
10
|
import { useTheme } from "@/contexts/theme-context"; |
|
11
|
|
|
12
|
export function ThemeToggle() { |
|
13
|
const { theme, setTheme } = useTheme(); |
|
14
|
|
|
15
|
const getThemeDisplay = () => { |
|
16
|
switch (theme) { |
|
17
|
case "light": |
|
18
|
return { icon: "light_mode", label: "Light Theme" }; |
|
19
|
case "dark": |
|
20
|
return { icon: "dark_mode", label: "Dark Theme" }; |
|
21
|
case "amoled": |
|
22
|
return { icon: "phone_android", label: "AMOLED Theme" }; |
|
23
|
case "system": |
|
24
|
return { icon: "computer", label: "System Theme" }; |
|
25
|
default: |
|
26
|
return { icon: "palette", label: "Theme" }; |
|
27
|
} |
|
28
|
}; |
|
29
|
|
|
30
|
const currentTheme = getThemeDisplay(); |
|
31
|
|
|
32
|
return ( |
|
33
|
<DropdownMenu> |
|
34
|
<DropdownMenuTrigger asChild> |
|
35
|
<Button variant="ghost" size="sm" className="h-9 px-3"> |
|
36
|
<i className="material-icons text-base mr-2">{currentTheme.icon}</i> |
|
37
|
<span className="hidden lg:inline text-sm">{currentTheme.label}</span> |
|
38
|
<span className="lg:hidden text-sm">Theme</span> |
|
39
|
</Button> |
|
40
|
</DropdownMenuTrigger> |
|
41
|
<DropdownMenuContent align="end" className="w-48"> |
|
42
|
<DropdownMenuLabel>Appearance</DropdownMenuLabel> |
|
43
|
<DropdownMenuSeparator /> |
|
44
|
<DropdownMenuItem |
|
45
|
onClick={() => setTheme("light")} |
|
46
|
className={theme === "light" ? "bg-accent" : ""} |
|
47
|
> |
|
48
|
<i className="material-icons mr-2 text-base">light_mode</i> |
|
49
|
<div className="flex flex-col"> |
|
50
|
<span>Light</span> |
|
51
|
<span className="text-xs text-muted-foreground">Bright and clean</span> |
|
52
|
</div> |
|
53
|
{theme === "light" && <i className="material-icons ml-auto text-sm">check</i>} |
|
54
|
</DropdownMenuItem> |
|
55
|
<DropdownMenuItem |
|
56
|
onClick={() => setTheme("dark")} |
|
57
|
className={theme === "dark" ? "bg-accent" : ""} |
|
58
|
> |
|
59
|
<i className="material-icons mr-2 text-base">dark_mode</i> |
|
60
|
<div className="flex flex-col"> |
|
61
|
<span>Dark</span> |
|
62
|
<span className="text-xs text-muted-foreground">Easy on the eyes</span> |
|
63
|
</div> |
|
64
|
{theme === "dark" && <i className="material-icons ml-auto text-sm">check</i>} |
|
65
|
</DropdownMenuItem> |
|
66
|
<DropdownMenuItem |
|
67
|
onClick={() => setTheme("amoled")} |
|
68
|
className={theme === "amoled" ? "bg-accent" : ""} |
|
69
|
> |
|
70
|
<i className="material-icons mr-2 text-base">phone_android</i> |
|
71
|
<div className="flex flex-col"> |
|
72
|
<span>AMOLED</span> |
|
73
|
<span className="text-xs text-muted-foreground">Pure black for OLED</span> |
|
74
|
</div> |
|
75
|
{theme === "amoled" && <i className="material-icons ml-auto text-sm">check</i>} |
|
76
|
</DropdownMenuItem> |
|
77
|
<DropdownMenuSeparator /> |
|
78
|
<DropdownMenuItem |
|
79
|
onClick={() => setTheme("system")} |
|
80
|
className={theme === "system" ? "bg-accent" : ""} |
|
81
|
> |
|
82
|
<i className="material-icons mr-2 text-base">computer</i> |
|
83
|
<div className="flex flex-col"> |
|
84
|
<span>System</span> |
|
85
|
<span className="text-xs text-muted-foreground">Follows device setting</span> |
|
86
|
</div> |
|
87
|
{theme === "system" && <i className="material-icons ml-auto text-sm">check</i>} |
|
88
|
</DropdownMenuItem> |
|
89
|
</DropdownMenuContent> |
|
90
|
</DropdownMenu> |
|
91
|
); |
|
92
|
} |