openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import { useTheme } from "next-themes";
4
5import { Button } from "@openstatus/ui/src/components/button";
6import {
7 DropdownMenu,
8 DropdownMenuContent,
9 DropdownMenuItem,
10 DropdownMenuTrigger,
11} from "@openstatus/ui/src/components/dropdown-menu";
12
13import { Icons } from "@/components/icons";
14
15export function ThemeToggle() {
16 const { setTheme } = useTheme();
17
18 return (
19 <DropdownMenu>
20 <DropdownMenuTrigger asChild>
21 <Button variant="outline" size="icon">
22 <Icons.sun className="dark:-rotate-90 h-4 w-4 rotate-0 scale-100 transition-all dark:scale-0" />
23 <Icons.moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24 <span className="sr-only">Toggle theme</span>
25 </Button>
26 </DropdownMenuTrigger>
27 <DropdownMenuContent align="end">
28 <DropdownMenuItem onClick={() => setTheme("light")}>
29 <Icons.sun className="mr-2 h-4 w-4" />
30 <span>Light</span>
31 </DropdownMenuItem>
32 <DropdownMenuItem onClick={() => setTheme("dark")}>
33 <Icons.moon className="mr-2 h-4 w-4" />
34 <span>Dark</span>
35 </DropdownMenuItem>
36 <DropdownMenuItem onClick={() => setTheme("system")}>
37 <Icons.laptop className="mr-2 h-4 w-4" />
38 <span>System</span>
39 </DropdownMenuItem>
40 </DropdownMenuContent>
41 </DropdownMenu>
42 );
43}