diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index b07bc36..5a72549 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -1,5 +1,6 @@
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
+import { ThemeProvider } from "next-themes"
import "./globals.css"
import { ConfigProvider } from "@/lib/config-context"
import { AuthProvider } from "@/lib/auth-context"
@@ -26,15 +27,17 @@ export default function RootLayout({
children: React.ReactNode
}>) {
return (
-
+
-
-
- {children}
-
-
+
+
+
+ {children}
+
+
+
)
diff --git a/web/src/components/site-header.tsx b/web/src/components/site-header.tsx
index 46a63a8..17172fb 100644
--- a/web/src/components/site-header.tsx
+++ b/web/src/components/site-header.tsx
@@ -2,6 +2,7 @@
import { Separator } from "@/components/ui/separator"
import { SidebarTrigger } from "@/components/ui/sidebar"
+import { ThemeToggle } from "@/components/theme-toggle"
export function SiteHeader({ title }: { title: string }) {
return (
@@ -13,6 +14,9 @@ export function SiteHeader({ title }: { title: string }) {
className="mx-2 data-[orientation=vertical]:h-4"
/>
{title}
+
+
+
)
diff --git a/web/src/components/theme-toggle.tsx b/web/src/components/theme-toggle.tsx
new file mode 100644
index 0000000..8dd426d
--- /dev/null
+++ b/web/src/components/theme-toggle.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { IconSun, IconMoon, IconDeviceDesktop } from "@tabler/icons-react"
+
+import { Button } from "@/components/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ThemeToggle() {
+ const { setTheme } = useTheme()
+
+ return (
+
+
+
+
+
+ setTheme("light")}>
+
+ Light
+
+ setTheme("dark")}>
+
+ Dark
+
+ setTheme("system")}>
+
+ System
+
+
+
+ )
+}