diff --git a/src/app/(general)/_components/landing-page/navbar/index.tsx b/src/app/(general)/_components/landing-page/navbar/index.tsx
index 9f0e8fb2..e87dfde1 100644
--- a/src/app/(general)/_components/landing-page/navbar/index.tsx
+++ b/src/app/(general)/_components/landing-page/navbar/index.tsx
@@ -33,7 +33,9 @@ export const Navbar = () => {
               <SiDiscord className="size-4" />
             </Button>
           </Link>
-          <ColorModeToggle />
+          <div className="hidden sm:flex">
+            <ColorModeToggle />
+          </div>
         </HStack>
       </HStack>
     </HStack>
diff --git a/src/app/(general)/_components/sidebar/user.tsx b/src/app/(general)/_components/sidebar/user.tsx
index 867f079e..c0c16bab 100644
--- a/src/app/(general)/_components/sidebar/user.tsx
+++ b/src/app/(general)/_components/sidebar/user.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronRight, LogOut, Moon, Sun, User } from "lucide-react";
+import { ChevronRight, LogOut, Moon, Sun, User, Palette } from "lucide-react";
 import Link from "next/link";
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -19,7 +19,9 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar";
+import { ThemeSwitcher } from "@/components/theme";
 import { useTheme } from "next-themes";
+import { useTheme as useCustomTheme } from "@/contexts/theme";
 import { signOut } from "next-auth/react";
 
 export function NavUser({
@@ -33,6 +35,13 @@ export function NavUser({
 }) {
   const { isMobile } = useSidebar();
   const { theme, setTheme } = useTheme();
+  const { currentMode, toggleMode } = useCustomTheme();
+
+  const handleThemeToggle = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setTheme(theme === "light" ? "dark" : "light");
+    toggleMode();
+  };
 
   return (
     <SidebarMenu>
@@ -84,20 +93,25 @@ export function NavUser({
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onClick={(e) => {
-                e.preventDefault();
-                setTheme(theme === "light" ? "dark" : "light");
-              }}
-            >
-              {theme === "light" ? (
+            <DropdownMenuItem onClick={handleThemeToggle}>
+              {currentMode === "light" ? (
                 <Sun className="size-4" />
               ) : (
                 <Moon className="size-4" />
               )}
-              {theme === "light" ? "Light mode" : "Dark mode"}
+              {currentMode === "light" ? "Light mode" : "Dark mode"}
             </DropdownMenuItem>
             <DropdownMenuSeparator />
+            <ThemeSwitcher>
+              <DropdownMenuItem
+                onSelect={(e) => e.preventDefault()}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <Palette className="size-4" />
+                Theme
+              </DropdownMenuItem>
+            </ThemeSwitcher>
+            <DropdownMenuSeparator />
             <DropdownMenuItem onClick={() => signOut()}>
               <LogOut />
               Sign Out
diff --git a/src/app/_components/navbar/color-mode-toggle.tsx b/src/app/_components/navbar/color-mode-toggle.tsx
index fd31c90a..ac02245c 100644
--- a/src/app/_components/navbar/color-mode-toggle.tsx
+++ b/src/app/_components/navbar/color-mode-toggle.tsx
@@ -1,22 +1,30 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import { useTheme as useCustomTheme } from "@/contexts/theme";
 
 import { Button } from "@/components/ui/button";
 import { Moon, Sun } from "lucide-react";
 
 export const ColorModeToggle = () => {
   const { theme, setTheme } = useTheme();
+  const { currentMode, toggleMode } = useCustomTheme();
+
+  const handleToggle = () => {
+    // Toggle both next-themes and our custom theme
+    setTheme(theme === "light" ? "dark" : "light");
+    toggleMode();
+  };
 
   return (
     <>
       <Button
-        onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+        onClick={handleToggle}
         variant="outline"
-        aria-label={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+        aria-label={`Switch to ${currentMode === "light" ? "dark" : "light"} mode`}
         size="icon"
         suppressHydrationWarning
-        className="relative size-8"
+        className="relative size-9"
       >
         <Sun className="absolute size-5 rotate-0 opacity-100 transition-all duration-300 dark:-rotate-90 dark:opacity-0" />
         <Moon className="absolute size-5 rotate-90 opacity-0 transition-all duration-300 dark:rotate-0 dark:opacity-100" />
diff --git a/src/app/_components/navbar/index.tsx b/src/app/_components/navbar/index.tsx
index 13c865ad..901cd2f9 100644
--- a/src/app/_components/navbar/index.tsx
+++ b/src/app/_components/navbar/index.tsx
@@ -5,6 +5,7 @@ import { ColorModeToggle } from "./color-mode-toggle";
 import { HStack } from "@/components/ui/stack";
 import { auth } from "@/server/auth";
 import { SidebarTrigger } from "@/components/ui/sidebar";
+import { ThemeSwitcher } from "@/components/theme";
 import { Menu } from "lucide-react";
 
 export const Navbar = async () => {
@@ -26,6 +27,7 @@ export const Navbar = async () => {
       </HStack>
       <HStack>
         <AccountButton />
+        <ThemeSwitcher />
         <ColorModeToggle />
       </HStack>
     </HStack>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c8fcba0a..29931ac3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,6 +9,10 @@ import { TRPCReactProvider } from "@/trpc/react";
 import { Toaster } from "@/components/ui/sonner";
 
 import { EnvProvider } from "@/contexts/env";
+import {
+  ThemeProvider as CustomThemeProvider,
+  ThemeScript,
+} from "@/contexts/theme";
 
 import { env } from "@/env";
 
@@ -57,6 +61,7 @@ export default async function RootLayout({
     >
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <ThemeScript />
       </head>
       <body>
         <Analytics />
@@ -64,14 +69,16 @@ export default async function RootLayout({
 
         <TRPCReactProvider>
           <EnvProvider>
-            <ThemeProvider
-              attribute="class"
-              defaultTheme="system"
-              enableSystem
-              disableTransitionOnChange
-            >
-              {children}
-            </ThemeProvider>
+            <CustomThemeProvider>
+              <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+                disableTransitionOnChange
+              >
+                {children}
+              </ThemeProvider>
+            </CustomThemeProvider>
           </EnvProvider>
         </TRPCReactProvider>
         <Toaster />
diff --git a/src/components/theme/index.ts b/src/components/theme/index.ts
new file mode 100644
index 00000000..66408c90
--- /dev/null
+++ b/src/components/theme/index.ts
@@ -0,0 +1 @@
+export { ThemeSwitcher } from "./theme-switcher";
diff --git a/src/components/theme/theme-switcher.tsx b/src/components/theme/theme-switcher.tsx
new file mode 100644
index 00000000..e479a6d0
--- /dev/null
+++ b/src/components/theme/theme-switcher.tsx
@@ -0,0 +1,348 @@
+"use client";
+
+import React, { useState } from "react";
+import type { ThemePreset } from "@/contexts/theme/types";
+import { Search, Palette, Shuffle, Moon, Sun, Plus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+import { useThemeManagement } from "@/contexts/theme";
+import { cn } from "@/lib/utils";
+
+interface ThemeSwitcherProps {
+  children?: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function ThemeSwitcher({
+  children,
+  open: controlledOpen,
+  onOpenChange,
+}: ThemeSwitcherProps) {
+  const {
+    currentMode,
+    allThemes,
+    builtInThemes,
+    customThemes,
+    isLoading,
+    toggleMode,
+    applyPreset,
+    randomizeTheme,
+    resetToDefault,
+    getThemePreview,
+  } = useThemeManagement();
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [showImportDialog, setShowImportDialog] = useState(false);
+
+  // Use controlled or uncontrolled state
+  const isOpen = controlledOpen ?? internalOpen;
+  const setIsOpen = onOpenChange ?? setInternalOpen;
+
+  // Filter themes based on search
+  const filteredThemes = allThemes.filter((theme) =>
+    theme.name.toLowerCase().includes(searchQuery.toLowerCase()),
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      {children && <DialogTrigger asChild>{children}</DialogTrigger>}
+      {!children && (
+        <DialogTrigger asChild>
+          <Button variant="outline" size="icon">
+            <Palette className="h-4 w-4" />
+          </Button>
+        </DialogTrigger>
+      )}
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Palette className="h-5 w-5" />
+            Appearance
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Controls */}
+          <div className="flex items-center gap-2">
+            <div className="relative flex-1">
+              <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+              <Input
+                placeholder="Search themes..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="outline" size="icon" onClick={toggleMode}>
+                    {currentMode === "light" ? (
+                      <Moon className="h-4 w-4" />
+                    ) : (
+                      <Sun className="h-4 w-4" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  Switch to {currentMode === "light" ? "dark" : "light"} mode
+                </TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={randomizeTheme}
+                  >
+                    <Shuffle className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Random theme</TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={() => setShowImportDialog(true)}
+                  >
+                    <Plus className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Import custom theme</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+
+          {/* Theme Grid */}
+          <ScrollArea className="h-[400px] rounded-md">
+            <div className="space-y-4 pr-4 pl-2">
+              {/* Built-in Themes */}
+              {builtInThemes.length > 0 && (
+                <div>
+                  <h3 className="text-muted-foreground mb-2 text-sm font-medium">
+                    Built-in Themes
+                  </h3>
+                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+                    {builtInThemes
+                      .filter((theme) =>
+                        theme.name
+                          .toLowerCase()
+                          .includes(searchQuery.toLowerCase()),
+                      )
+                      .map((theme) => (
+                        <ThemeCard
+                          key={theme.name}
+                          theme={theme}
+                          onSelect={() => {
+                            applyPreset(theme);
+                            setIsOpen(false);
+                          }}
+                          previewColors={getThemePreview(theme)}
+                        />
+                      ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Custom Themes */}
+              {customThemes.length > 0 && (
+                <div>
+                  <h3 className="text-muted-foreground mb-2 text-sm font-medium">
+                    Custom Themes
+                  </h3>
+                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+                    {customThemes
+                      .filter((theme) =>
+                        theme.name
+                          .toLowerCase()
+                          .includes(searchQuery.toLowerCase()),
+                      )
+                      .map((theme) => (
+                        <ThemeCard
+                          key={theme.name}
+                          theme={theme}
+                          onSelect={() => {
+                            applyPreset(theme);
+                            setIsOpen(false);
+                          }}
+                          previewColors={getThemePreview(theme)}
+                        />
+                      ))}
+                  </div>
+                </div>
+              )}
+
+              {isLoading && (
+                <div className="flex items-center justify-center py-8">
+                  <div className="text-muted-foreground text-sm">
+                    Loading themes...
+                  </div>
+                </div>
+              )}
+
+              {!isLoading && filteredThemes.length === 0 && searchQuery && (
+                <div className="flex items-center justify-center py-8">
+                  <div className="text-muted-foreground text-sm">
+                    No themes found matching &quot;{searchQuery}&quot;
+                  </div>
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+
+          {/* Actions */}
+          <div className="flex justify-between">
+            <Button variant="outline" onClick={resetToDefault}>
+              Reset to Default
+            </Button>
+            <div className="text-muted-foreground text-sm">
+              {allThemes.length} theme{allThemes.length !== 1 ? "s" : ""}{" "}
+              available
+            </div>
+          </div>
+        </div>
+
+        <ImportThemeDialog
+          open={showImportDialog}
+          onOpenChange={setShowImportDialog}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface ThemeCardProps {
+  theme: ThemePreset;
+  onSelect: () => void;
+  previewColors: string[];
+}
+
+function ThemeCard({ theme, onSelect, previewColors }: ThemeCardProps) {
+  return (
+    <button
+      onClick={onSelect}
+      className={cn(
+        "group relative rounded-lg border p-3 text-left transition-all",
+        "hover:border-primary hover:shadow-md",
+        "focus:ring-primary focus:ring-1 focus:ring-offset-1 focus:outline-none",
+      )}
+    >
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium">{theme.name}</span>
+          {!(theme.isBuiltIn ?? false) && (
+            <Badge variant="secondary">Custom</Badge>
+          )}
+        </div>
+
+        {/* Color Preview */}
+        <div className="flex gap-1">
+          {previewColors.slice(0, 4).map((color, index) => (
+            <div
+              key={index}
+              className="border-border h-3 w-3 rounded-full border"
+              style={{ backgroundColor: color }}
+            />
+          ))}
+        </div>
+      </div>
+    </button>
+  );
+}
+
+interface ImportThemeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+function ImportThemeDialog({ open, onOpenChange }: ImportThemeDialogProps) {
+  const { importTheme, isImporting } = useThemeManagement();
+  const [url, setUrl] = useState("");
+  const [error, setError] = useState("");
+
+  const handleImport = async () => {
+    if (!url.trim()) {
+      setError("Please enter a theme URL");
+      return;
+    }
+
+    try {
+      setError("");
+      importTheme(url.trim());
+      setUrl("");
+      onOpenChange(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to import theme");
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Plus className="h-5 w-5" />
+            Import Custom Theme
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div>
+            <label className="text-sm font-medium">Theme URL</label>
+            <Input
+              placeholder="https://tweakcn.com/theme/..."
+              value={url}
+              onChange={(e) => {
+                setUrl(e.target.value);
+                setError("");
+              }}
+              className="mt-1"
+            />
+            {error && <p className="text-destructive mt-1 text-sm">{error}</p>}
+          </div>
+
+          <div className="text-muted-foreground text-sm">
+            <p>Supported formats:</p>
+            <ul className="mt-1 list-inside list-disc">
+              <li>tweakcn.com theme URLs</li>
+              <li>Direct JSON theme files</li>
+            </ul>
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleImport} disabled={isImporting}>
+              {isImporting ? "Importing..." : "Import Theme"}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/contexts/theme/apply-theme.ts b/src/contexts/theme/apply-theme.ts
new file mode 100644
index 00000000..6db6fa23
--- /dev/null
+++ b/src/contexts/theme/apply-theme.ts
@@ -0,0 +1,40 @@
+import type { ThemeState } from "./types";
+
+/**
+ * Applies theme CSS variables to a DOM element
+ * @param themeState - The theme state containing CSS variables
+ * @param element - The DOM element to apply the theme to (usually document.documentElement)
+ */
+export function applyThemeToElement(
+  themeState: ThemeState,
+  element: HTMLElement = document.documentElement,
+): void {
+  // Apply global theme variables
+  Object.entries(themeState.cssVars.theme).forEach(([key, value]) => {
+    element.style.setProperty(`--${key}`, value);
+  });
+
+  // Apply mode-specific variables
+  const modeVars = themeState.cssVars[themeState.currentMode];
+  Object.entries(modeVars).forEach(([key, value]) => {
+    element.style.setProperty(`--${key}`, value);
+  });
+
+  // Set data attribute for theme mode
+  element.setAttribute("data-theme", themeState.currentMode);
+
+  // Set classes for compatibility
+  element.classList.toggle("light", themeState.currentMode === "light");
+  element.classList.toggle("dark", themeState.currentMode === "dark");
+}
+
+/**
+ * Gets the preferred color scheme from user's system
+ */
+export function getPreferredColorScheme(): "light" | "dark" {
+  if (typeof window === "undefined") return "light";
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
diff --git a/src/contexts/theme/default-theme.ts b/src/contexts/theme/default-theme.ts
new file mode 100644
index 00000000..db74b8f3
--- /dev/null
+++ b/src/contexts/theme/default-theme.ts
@@ -0,0 +1,104 @@
+import type { ThemeState } from "./types";
+
+export const DEFAULT_THEME: ThemeState = {
+  currentMode: "light",
+  cssVars: {
+    // Global theme tokens (apply to both modes)
+    theme: {
+      // Typography
+      "font-sans": "Space Grotesk, serif",
+      "font-serif": "ui-serif, Georgia, Cambria, Times New Roman, Times, serif",
+      "font-mono": "JetBrains Mono, monospace",
+
+      // Border radius
+      radius: "0.5rem",
+
+      // Shadows
+      "shadow-2xs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)",
+      "shadow-xs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)",
+      "shadow-sm":
+        "0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1)",
+      shadow:
+        "0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1)",
+      "shadow-md":
+        "0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1)",
+      "shadow-lg":
+        "0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1)",
+      "shadow-xl":
+        "0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1)",
+      "shadow-2xl": "0 1px 3px 0px hsl(0 0% 0% / 0.25)",
+    },
+
+    // Light mode colors
+    light: {
+      background: "oklch(0.9551 0 0)",
+      foreground: "oklch(0.3211 0 0)",
+      card: "oklch(0.9702 0 0)",
+      "card-foreground": "oklch(0.3211 0 0)",
+      popover: "oklch(0.9702 0 0)",
+      "popover-foreground": "oklch(0.3211 0 0)",
+      primary: "#4299e1",
+      "primary-foreground": "#ffffff",
+      secondary: "oklch(0.9067 0 0)",
+      "secondary-foreground": "oklch(0.3211 0 0)",
+      muted: "oklch(0.9067 0 0)",
+      "muted-foreground": "oklch(0.5103 0 0)",
+      accent: "oklch(0.94 0 0)",
+      "accent-foreground": "oklch(0 0 0)",
+      destructive: "oklch(0.5594 0.19 25.8625)",
+      "destructive-foreground": "oklch(1 0 0)",
+      border: "oklch(0.8576 0 0)",
+      input: "oklch(0.9067 0 0)",
+      ring: "#4299e1",
+      "chart-1": "oklch(0.4891 0 0)",
+      "chart-2": "oklch(0.4863 0.0361 196.0278)",
+      "chart-3": "oklch(0.6534 0 0)",
+      "chart-4": "oklch(0.7316 0 0)",
+      "chart-5": "oklch(0.8078 0 0)",
+      sidebar: "oklch(0.937 0 0)",
+      "sidebar-foreground": "oklch(0.3211 0 0)",
+      "sidebar-primary": "oklch(0.4891 0 0)",
+      "sidebar-primary-foreground": "oklch(1 0 0)",
+      "sidebar-accent": "oklch(0.9067 0 0)",
+      "sidebar-accent-foreground": "oklch(0.3211 0 0)",
+      "sidebar-border": "oklch(0.8576 0 0)",
+      "sidebar-ring": "#4299e1",
+    },
+
+    // Dark mode colors
+    dark: {
+      background: "oklch(0.2178 0 0)",
+      foreground: "oklch(0.8853 0 0)",
+      card: "oklch(0.2435 0 0)",
+      "card-foreground": "oklch(0.8853 0 0)",
+      popover: "oklch(0.2435 0 0)",
+      "popover-foreground": "oklch(0.8853 0 0)",
+      primary: "#63b3ed",
+      "primary-foreground": "#0f1419",
+      secondary: "oklch(0.3092 0 0)",
+      "secondary-foreground": "oklch(0.8853 0 0)",
+      muted: "oklch(0.285 0 0)",
+      "muted-foreground": "oklch(0.5999 0 0)",
+      accent: "oklch(0.32 0 0)",
+      "accent-foreground": "oklch(1 0 0)",
+      destructive: "oklch(0.6591 0.153 22.1703)",
+      "destructive-foreground": "oklch(1 0 0)",
+      border: "oklch(0.329 0 0)",
+      input: "oklch(0.3092 0 0)",
+      ring: "#63b3ed",
+      "chart-1": "oklch(0.7058 0 0)",
+      "chart-2": "oklch(0.6714 0.0339 206.3482)",
+      "chart-3": "oklch(0.5452 0 0)",
+      "chart-4": "oklch(0.4604 0 0)",
+      "chart-5": "oklch(0.3715 0 0)",
+      sidebar: "oklch(0.2393 0 0)",
+      "sidebar-foreground": "oklch(0.8853 0 0)",
+      "sidebar-primary": "oklch(0.7058 0 0)",
+      "sidebar-primary-foreground": "oklch(0.2178 0 0)",
+      "sidebar-accent": "oklch(0.275 0 0)",
+      "sidebar-accent-foreground": "oklch(0.8853 0 0)",
+      "sidebar-border": "oklch(0.329 0 0)",
+      "sidebar-ring": "#63b3ed",
+    },
+  },
+};
diff --git a/src/contexts/theme/index.ts b/src/contexts/theme/index.ts
new file mode 100644
index 00000000..1d53d9d8
--- /dev/null
+++ b/src/contexts/theme/index.ts
@@ -0,0 +1,18 @@
+// Core theme functionality
+export { ThemeProvider, useTheme } from "./theme-provider";
+export { ThemeScript } from "./theme-script";
+export { useThemeManagement } from "./use-theme-management";
+
+// Theme utilities
+export { applyThemeToElement, getPreferredColorScheme } from "./apply-theme";
+export {
+  fetchThemeFromUrl,
+  extractThemeColors,
+  THEME_URLS,
+} from "./theme-utils";
+export { loadThemeFromStorage, saveThemeToStorage } from "./storage";
+
+// Default theme and types
+export { DEFAULT_THEME } from "./default-theme";
+export type { ThemeState, ThemePreset, ThemeContextType } from "./types";
+export type { FetchedTheme } from "./theme-utils";
diff --git a/src/contexts/theme/storage.ts b/src/contexts/theme/storage.ts
new file mode 100644
index 00000000..e9de47e9
--- /dev/null
+++ b/src/contexts/theme/storage.ts
@@ -0,0 +1,64 @@
+import type { ThemeState } from "./types";
+import { DEFAULT_THEME } from "./default-theme";
+import { getPreferredColorScheme } from "./apply-theme";
+
+const THEME_STORAGE_KEY = "toolkit-theme-state";
+
+/**
+ * Loads theme state from localStorage
+ */
+export function loadThemeFromStorage(): ThemeState {
+  if (typeof window === "undefined") {
+    return DEFAULT_THEME;
+  }
+
+  try {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    if (!stored) {
+      // If no theme is stored, use default with system preference
+      return {
+        ...DEFAULT_THEME,
+        currentMode: getPreferredColorScheme(),
+      };
+    }
+
+    const parsed = JSON.parse(stored) as ThemeState;
+
+    // Validate the structure
+    if (
+      parsed &&
+      typeof parsed === "object" &&
+      parsed.currentMode &&
+      parsed.cssVars?.theme &&
+      parsed.cssVars?.light &&
+      parsed.cssVars?.dark
+    ) {
+      return parsed;
+    }
+
+    // If invalid, return default
+    return {
+      ...DEFAULT_THEME,
+      currentMode: getPreferredColorScheme(),
+    };
+  } catch (error) {
+    console.warn("Failed to load theme from storage:", error);
+    return {
+      ...DEFAULT_THEME,
+      currentMode: getPreferredColorScheme(),
+    };
+  }
+}
+
+/**
+ * Saves theme state to localStorage
+ */
+export function saveThemeToStorage(themeState: ThemeState): void {
+  if (typeof window === "undefined") return;
+
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(themeState));
+  } catch (error) {
+    console.warn("Failed to save theme to storage:", error);
+  }
+}
diff --git a/src/contexts/theme/theme-provider.tsx b/src/contexts/theme/theme-provider.tsx
new file mode 100644
index 00000000..657cf78b
--- /dev/null
+++ b/src/contexts/theme/theme-provider.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+} from "react";
+import { applyThemeToElement } from "./apply-theme";
+import { DEFAULT_THEME } from "./default-theme";
+import { loadThemeFromStorage, saveThemeToStorage } from "./storage";
+import type { ThemeState, ThemePreset, ThemeContextType } from "./types";
+
+const ThemeContext = createContext<ThemeContextType | null>(null);
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const [themeState, setThemeStateInternal] =
+    useState<ThemeState>(DEFAULT_THEME);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  // Load theme from storage on mount
+  useEffect(() => {
+    const storedTheme = loadThemeFromStorage();
+    setThemeStateInternal(storedTheme);
+    setIsInitialized(true);
+  }, []);
+
+  // Apply theme to DOM whenever theme state changes
+  useEffect(() => {
+    if (isInitialized) {
+      applyThemeToElement(themeState);
+    }
+  }, [themeState, isInitialized]);
+
+  // Save theme to storage whenever it changes
+  const setThemeState = useCallback((newState: ThemeState) => {
+    setThemeStateInternal(newState);
+    saveThemeToStorage(newState);
+  }, []);
+
+  const toggleMode = useCallback(() => {
+    setThemeState({
+      ...themeState,
+      currentMode: themeState.currentMode === "light" ? "dark" : "light",
+    });
+  }, [themeState, setThemeState]);
+
+  const applyTheme = useCallback(
+    (preset: ThemePreset) => {
+      setThemeState({
+        currentMode: themeState.currentMode, // Keep current mode
+        cssVars: preset.cssVars,
+      });
+    },
+    [themeState.currentMode, setThemeState],
+  );
+
+  const resetToDefault = useCallback(() => {
+    setThemeState({
+      ...DEFAULT_THEME,
+      currentMode: themeState.currentMode, // Keep current mode
+    });
+  }, [themeState.currentMode, setThemeState]);
+
+  const value: ThemeContextType = {
+    themeState,
+    setThemeState,
+    currentMode: themeState.currentMode,
+    toggleMode,
+    applyTheme,
+    resetToDefault,
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
diff --git a/src/contexts/theme/theme-script.tsx b/src/contexts/theme/theme-script.tsx
new file mode 100644
index 00000000..80b40d86
--- /dev/null
+++ b/src/contexts/theme/theme-script.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { DEFAULT_THEME } from "./default-theme";
+
+/**
+ * Inline script component that runs before React hydration to prevent theme flash.
+ * This reads the stored theme from localStorage and applies it immediately.
+ */
+export function ThemeScript() {
+  const themeScript = `
+(function() {
+  try {
+    var THEME_STORAGE_KEY = "toolkit-theme-state";
+    var stored = localStorage.getItem(THEME_STORAGE_KEY);
+    var themeState;
+    
+    if (stored) {
+      try {
+        themeState = JSON.parse(stored);
+      } catch (e) {
+        themeState = null;
+      }
+    }
+    
+    // If no valid stored theme, use default with system preference
+    if (!themeState || !themeState.currentMode || !themeState.cssVars) {
+      var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      themeState = {
+        currentMode: prefersDark ? "dark" : "light",
+        cssVars: ${JSON.stringify(DEFAULT_THEME.cssVars)}
+      };
+    }
+    
+    // Apply theme variables immediately with !important to override CSS defaults
+    var element = document.documentElement;
+    
+    // Apply global theme variables
+    Object.entries(themeState.cssVars.theme || {}).forEach(function(entry) {
+      element.style.setProperty("--" + entry[0], entry[1], "important");
+    });
+    
+    // Apply mode-specific variables
+    var modeVars = themeState.cssVars[themeState.currentMode] || {};
+    Object.entries(modeVars).forEach(function(entry) {
+      element.style.setProperty("--" + entry[0], entry[1], "important");
+    });
+    
+    // Set data attribute and classes
+    element.setAttribute("data-theme", themeState.currentMode);
+    element.classList.toggle("light", themeState.currentMode === "light");
+    element.classList.toggle("dark", themeState.currentMode === "dark");
+  } catch (error) {
+    console.warn("Theme script error:", error);
+  }
+})();
+`;
+
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: themeScript,
+      }}
+    />
+  );
+}
diff --git a/src/contexts/theme/theme-utils.ts b/src/contexts/theme/theme-utils.ts
new file mode 100644
index 00000000..10b51a5b
--- /dev/null
+++ b/src/contexts/theme/theme-utils.ts
@@ -0,0 +1,136 @@
+import type { ThemePreset } from "./types";
+
+// Built-in theme URLs from tweakcn.com
+export const THEME_URLS = [
+  "https://tweakcn.com/themes/cmc335y45000n04ld51zg72j3",
+  "https://tweakcn.com/editor/theme?theme=mono",
+  "https://tweakcn.com/editor/theme?theme=t3-chat",
+  "https://tweakcn.com/editor/theme?theme=tangerine",
+  "https://tweakcn.com/editor/theme?theme=perpetuity",
+  "https://tweakcn.com/editor/theme?theme=modern-minimal",
+  "https://tweakcn.com/r/themes/vintage-paper.json",
+  "https://tweakcn.com/r/themes/amethyst-haze.json",
+  "https://tweakcn.com/editor/theme?theme=caffeine",
+  "https://tweakcn.com/editor/theme?theme=quantum-rose",
+  "https://tweakcn.com/editor/theme?theme=claymorphism",
+  "https://tweakcn.com/editor/theme?theme=pastel-dreams",
+  "https://tweakcn.com/editor/theme?theme=supabase",
+  "https://tweakcn.com/editor/theme?theme=vercel",
+  "https://tweakcn.com/editor/theme?theme=cyberpunk",
+];
+
+export type FetchedTheme = {
+  name: string;
+  preset: ThemePreset;
+  url: string;
+  error?: string;
+  type: "custom" | "built-in";
+};
+
+/**
+ * Converts a tweakcn editor URL to the JSON API endpoint
+ */
+function normalizeThemeUrl(url: string): string {
+  const baseUrl = "https://tweakcn.com/r/themes/";
+  const isBuiltInUrl = url.includes("editor/theme?theme=");
+
+  return (
+    url
+      .replace("https://tweakcn.com/editor/theme?theme=", baseUrl)
+      .replace("https://tweakcn.com/themes/", baseUrl) +
+    (isBuiltInUrl ? ".json" : "")
+  );
+}
+
+/**
+ * Gets the theme name from the data or generates a fallback
+ */
+function getThemeName(themeData: Record<string, unknown>): string {
+  if (typeof themeData.name === "string") {
+    return themeData.name
+      .replace(/[-_]/g, " ")
+      .replace(/\b\w/g, (l: string) => l.toUpperCase());
+  }
+  return "Custom Theme";
+}
+
+/**
+ * Fetches a theme from a URL and converts it to ThemePreset format
+ */
+export async function fetchThemeFromUrl(url: string): Promise<FetchedTheme> {
+  const transformedUrl = normalizeThemeUrl(url);
+
+  try {
+    const response = await fetch(transformedUrl);
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    const themeData = (await response.json()) as Record<string, unknown>;
+    const themeName = getThemeName(themeData);
+    const isBuiltIn = THEME_URLS.includes(url);
+
+    // Type-safe access to cssVars
+    const cssVarsRaw = themeData.cssVars as
+      | Record<string, Record<string, string>>
+      | undefined;
+    const cssVars = {
+      theme: cssVarsRaw?.theme ?? {},
+      light: cssVarsRaw?.light ?? {},
+      dark: cssVarsRaw?.dark ?? {},
+    };
+
+    return {
+      name: themeName,
+      preset: {
+        name: themeName,
+        isBuiltIn,
+        cssVars,
+      },
+      url,
+      type: isBuiltIn ? "built-in" : "custom",
+    };
+  } catch (err) {
+    const errorMessage =
+      err instanceof Error ? err.message : "Failed to fetch theme";
+    const themeName = getThemeName({});
+    const isBuiltIn = THEME_URLS.includes(url);
+
+    return {
+      name: themeName,
+      preset: {
+        name: themeName,
+        isBuiltIn,
+        cssVars: { theme: {}, light: {}, dark: {} },
+      },
+      url,
+      error: errorMessage,
+      type: isBuiltIn ? "built-in" : "custom",
+    };
+  }
+}
+
+/**
+ * Extracts color swatches for theme preview
+ */
+export function extractThemeColors(
+  preset: ThemePreset,
+  mode: "light" | "dark" = "light",
+): string[] {
+  const { light, dark, theme } = preset.cssVars;
+  const currentVars = { ...theme, ...(mode === "light" ? light : dark) };
+
+  const colorKeys = ["primary", "accent", "secondary", "background", "muted"];
+  const colors: string[] = [];
+
+  colorKeys.forEach((key) => {
+    const colorValue = currentVars[key];
+    if (colorValue && colors.length < 5) {
+      colors.push(
+        colorValue.includes("hsl") ? `hsl(${colorValue})` : colorValue,
+      );
+    }
+  });
+
+  return colors;
+}
diff --git a/src/contexts/theme/types.ts b/src/contexts/theme/types.ts
new file mode 100644
index 00000000..8f7e5144
--- /dev/null
+++ b/src/contexts/theme/types.ts
@@ -0,0 +1,27 @@
+export interface ThemeState {
+  currentMode: "light" | "dark";
+  cssVars: {
+    theme: Record<string, string>;
+    light: Record<string, string>;
+    dark: Record<string, string>;
+  };
+}
+
+export interface ThemePreset {
+  name: string;
+  isBuiltIn: boolean;
+  cssVars: {
+    theme: Record<string, string>;
+    light: Record<string, string>;
+    dark: Record<string, string>;
+  };
+}
+
+export interface ThemeContextType {
+  themeState: ThemeState;
+  setThemeState: (state: ThemeState) => void;
+  currentMode: "light" | "dark";
+  toggleMode: () => void;
+  applyTheme: (preset: ThemePreset) => void;
+  resetToDefault: () => void;
+}
diff --git a/src/contexts/theme/use-theme-management.ts b/src/contexts/theme/use-theme-management.ts
new file mode 100644
index 00000000..29f34c29
--- /dev/null
+++ b/src/contexts/theme/use-theme-management.ts
@@ -0,0 +1,174 @@
+"use client";
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { useTheme } from "./theme-provider";
+import {
+  fetchThemeFromUrl,
+  THEME_URLS,
+  extractThemeColors,
+  type FetchedTheme,
+} from "./theme-utils";
+import type { ThemePreset } from "./types";
+
+/**
+ * Hook for managing themes including fetching, applying, and custom imports
+ */
+export function useThemeManagement() {
+  const { themeState, toggleMode, applyTheme, resetToDefault } = useTheme();
+  const queryClient = useQueryClient();
+  const [customThemeUrls, setCustomThemeUrls] = useState<string[]>([]);
+
+  // Fetch built-in themes
+  const {
+    data: builtInThemes = [],
+    isLoading: isLoadingBuiltIn,
+    error: builtInError,
+  } = useQuery({
+    queryKey: ["themes", "built-in"],
+    queryFn: async () => {
+      const results = await Promise.allSettled(
+        THEME_URLS.map(fetchThemeFromUrl),
+      );
+
+      return results
+        .filter(
+          (result): result is PromiseFulfilledResult<FetchedTheme> =>
+            result.status === "fulfilled" && !result.value.error,
+        )
+        .map(
+          (result) =>
+            ({
+              ...result.value.preset,
+              name: result.value.name,
+              isBuiltIn: true,
+            }) as ThemePreset,
+        );
+    },
+    staleTime: 1000 * 60 * 30, // 30 minutes
+  });
+
+  // Fetch custom themes
+  const {
+    data: customThemes = [],
+    isLoading: isLoadingCustom,
+    error: customError,
+  } = useQuery({
+    queryKey: ["themes", "custom", customThemeUrls],
+    queryFn: async () => {
+      if (customThemeUrls.length === 0) return [];
+
+      const results = await Promise.allSettled(
+        customThemeUrls.map(fetchThemeFromUrl),
+      );
+
+      return results
+        .filter(
+          (result): result is PromiseFulfilledResult<FetchedTheme> =>
+            result.status === "fulfilled" && !result.value.error,
+        )
+        .map(
+          (result) =>
+            ({
+              ...result.value.preset,
+              name: result.value.name,
+              isBuiltIn: false,
+            }) as ThemePreset,
+        );
+    },
+    enabled: customThemeUrls.length > 0,
+    staleTime: 1000 * 60 * 5, // 5 minutes for custom themes
+  });
+
+  // Import theme mutation
+  const importThemeMutation = useMutation({
+    mutationFn: async (url: string) => {
+      const fetchedTheme = await fetchThemeFromUrl(url);
+      if (fetchedTheme.error) {
+        throw new Error(fetchedTheme.error);
+      }
+      return { theme: fetchedTheme.preset, url, name: fetchedTheme.name };
+    },
+    onSuccess: async ({ theme, url, name }) => {
+      applyTheme(theme);
+
+      // Add to custom themes if not already there
+      if (!customThemeUrls.includes(url)) {
+        setCustomThemeUrls((prev) => [...prev, url]);
+      }
+
+      // Invalidate queries to refresh the lists
+      await queryClient.invalidateQueries({ queryKey: ["themes"] });
+
+      toast.success(`Applied theme: ${name}`);
+    },
+    onError: (error) => {
+      toast.error(`Failed to import theme: ${error.message}`);
+    },
+  });
+
+  // Get all themes combined
+  const allThemes = [...builtInThemes, ...customThemes];
+  const isLoading =
+    isLoadingBuiltIn || isLoadingCustom || importThemeMutation.isPending;
+
+  // Apply a preset theme
+  const applyPreset = (preset: ThemePreset) => {
+    applyTheme(preset);
+    toast.success(`Applied theme: ${preset.name}`);
+  };
+
+  // Randomize theme
+  const randomizeTheme = () => {
+    if (allThemes.length === 0) return;
+
+    const randomTheme = allThemes[Math.floor(Math.random() * allThemes.length)];
+    if (randomTheme) {
+      applyPreset(randomTheme);
+    }
+  };
+
+  // Remove custom theme URL
+  const removeCustomTheme = async (url: string) => {
+    setCustomThemeUrls((prev) => prev.filter((u) => u !== url));
+    await queryClient.invalidateQueries({ queryKey: ["themes", "custom"] });
+    toast.success("Removed custom theme");
+  };
+
+  // Get preview colors for a theme
+  const getThemePreview = (preset: ThemePreset) => {
+    return extractThemeColors(preset, themeState.currentMode);
+  };
+
+  return {
+    // State
+    currentMode: themeState.currentMode,
+    themeState,
+
+    // Themes
+    builtInThemes,
+    customThemes,
+    allThemes,
+    isLoading,
+
+    // Actions
+    toggleMode,
+    applyPreset,
+    randomizeTheme,
+    resetToDefault,
+
+    // Custom theme management
+    importTheme: importThemeMutation.mutate,
+    isImporting: importThemeMutation.isPending,
+    removeCustomTheme,
+    customThemeUrls,
+
+    // Utilities
+    getThemePreview,
+
+    // Errors
+    error: builtInError ?? customError,
+  };
+}