Site Yönetimi,Kullanıcı Girişi,Karanlık mod özellikleri db bağlantıları.

components/dashboard/appearance-form.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Card, CardContent, CardTitle, CardHeader } from "@/components/ui/card"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { useEffect, useState } from "react"
+
+export function AppearanceForm() {
+    const { theme, setTheme } = useTheme()
+    const [mounted, setMounted] = useState(false)
+
+    // Avoid hydration mismatch
+    useEffect(() => {
+        setMounted(true)
+    }, [])
+
+    if (!mounted) {
+        return (
+            <Card>
+                <CardHeader>
+                    <CardTitle>Görünüm</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <div className="flex items-center justify-between space-y-2">
+                        <Label htmlFor="dark-mode" className="flex flex-col space-y-1">
+                            <span>Karanlık Mod</span>
+                            <span className="font-normal text-xs text-muted-foreground">Koyu temayı etkinleştir.</span>
+                        </Label>
+                        <Switch id="dark-mode" disabled />
+                    </div>
+                </CardContent>
+            </Card>
+        )
+    }
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Görünüm</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <div className="flex items-center justify-between space-y-2">
+                    <Label htmlFor="dark-mode" className="flex flex-col space-y-1">
+                        <span>Karanlık Mod</span>
+                        <span className="font-normal text-xs text-muted-foreground">Koyu temayı etkinleştir.</span>
+                    </Label>
+                    <Switch
+                        id="dark-mode"
+                        checked={theme === 'dark'}
+                        onCheckedChange={(checked) => setTheme(checked ? 'dark' : 'light')}
+                    />
+                </div>
+            </CardContent>
+        </Card>
+    )
+}