[dyad] Theme-Schalter hinzugefügt - wrote 2 file(s)

src/components/footer.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { Github, Twitter } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { changelogData } from "@/lib/changelog-data";
+import { ThemeToggle } from "./theme-toggle";
 
 export function Footer() {
   const latestVersion = changelogData[0]?.version;
@@ -24,6 +25,7 @@ export function Footer() {
               <Twitter className="h-4 w-4" />
             </Link>
           </Button>
+          <ThemeToggle />
         </div>
 
         <div className="flex items-center gap-4 text-sm text-muted-foreground">

src/components/theme-toggle.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <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" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Hell
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dunkel
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}