feat: Add comprehensive theme management with mode and color selectors, alongside new fonts.

src/app/dashboard/settings/_components/color-theme-selector.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Check, Palette } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { Button } from "~/components/ui/button";
+
+export function ColorThemeSelector() {
+  const { theme, setTheme } = useTheme();
+
+  const themes = [
+    { name: "theme-ocean", label: "Ocean" },
+    { name: "theme-sunset", label: "Sunset" },
+    { name: "theme-forest", label: "Forest" },
+  ];
+
+  const currentTheme = themes.find((t) => t.name === theme)?.label ?? "Ocean";
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="space-y-1.5">
+        <label className="font-medium">Color Theme</label>
+        <p className="text-muted-foreground text-xs leading-snug">
+          Select a color theme for the application.
+        </p>
+      </div>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" className="w-40 justify-between">
+            <span>{currentTheme}</span>
+            <Palette className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {themes.map((t) => (
+            <DropdownMenuItem
+              key={t.name}
+              className="flex justify-between"
+              onClick={() => setTheme(t.name)}
+            >
+              <span>{t.label}</span>
+              {theme === t.name && <Check className="h-4 w-4" />}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

src/app/dashboard/settings/_components/mode-switcher.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Sun, Moon, Laptop } from "lucide-react";
+import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
+
+export function ModeSwitcher() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <div className="flex items-center justify-between">
+       <div className="space-y-1.5">
+        <label className="font-medium">Appearance</label>
+        <p className="text-muted-foreground text-xs leading-snug">
+          Select a light or dark mode, or sync with your system.
+        </p>
+      </div>
+      <Tabs defaultValue={theme} onValueChange={setTheme} className="w-auto">
+        <TabsList>
+          <TabsTrigger value="light">
+            <Sun className="h-4 w-4" />
+          </TabsTrigger>
+          <TabsTrigger value="dark">
+            <Moon className="h-4 w-4" />
+          </TabsTrigger>
+          <TabsTrigger value="system">
+            <Laptop className="h-4 w-4" />
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  );
+}

src/app/dashboard/settings/_components/settings-content.tsx

@@ -62,7 +62,8 @@ import { Textarea } from "~/components/ui/textarea";
 import { api } from "~/trpc/react";
 import { Switch } from "~/components/ui/switch";
 import { Slider } from "~/components/ui/slider";
-import { ThemeSelector } from "./theme-selector";
+import { ModeSwitcher } from "./mode-switcher";
+import { ColorThemeSelector } from "./color-theme-selector";
 import { useAnimationPreferences } from "~/components/providers/animation-preferences-provider";
 
 export function SettingsContent() {
@@ -628,8 +629,9 @@ export function SettingsContent() {
             Customize the look and feel of the application
           </CardDescription>
         </CardHeader>
-        <CardContent>
-          <ThemeSelector />
+        <CardContent className="space-y-6">
+          <ModeSwitcher />
+          <ColorThemeSelector />
         </CardContent>
       </Card>