3 theme modes (light, sunset, dark)

.gitignore

@@ -38,4 +38,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
+.env
+CLAUDE.md

app/globals.css

@@ -3,6 +3,8 @@
 @plugin "tailwindcss-animate";
 
 @custom-variant dark (&:is(.dark *));
+@custom-variant sunset (&:is(.sunset *));
+@custom-variant black (&:is(.black *));
 
 :root {
   --background: oklch(0.99 0.01 56.32);
@@ -98,6 +100,100 @@
   --shadow-2xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.22);
 }
 
+.sunset {
+  --background: oklch(0.98 0.03 80.00);
+  --foreground: oklch(0.34 0.01 2.77);
+  --card: oklch(1.00 0 0);
+  --card-foreground: oklch(0.34 0.01 2.77);
+  --popover: oklch(1.00 0 0);
+  --popover-foreground: oklch(0.34 0.01 2.77);
+  --primary: oklch(0.65 0.26 34.00);
+  --primary-foreground: oklch(1.00 0 0);
+  --secondary: oklch(0.96 0.05 60.00);
+  --secondary-foreground: oklch(0.56 0.13 32.74);
+  --muted: oklch(0.97 0.02 39.40);
+  --muted-foreground: oklch(0.49 0.05 26.45);
+  --accent: oklch(0.83 0.22 50.00);
+  --accent-foreground: oklch(0.34 0.01 2.77);
+  --destructive: oklch(0.61 0.21 22.24);
+  --destructive-foreground: oklch(1.00 0 0);
+  --border: oklch(0.93 0.06 60.00);
+  --input: oklch(0.93 0.06 60.00);
+  --ring: oklch(0.65 0.26 34.00);
+  --chart-1: oklch(0.65 0.26 34.00);
+  --chart-2: oklch(0.83 0.22 50.00);
+  --chart-3: oklch(0.88 0.15 54.93);
+  --chart-4: oklch(0.82 0.20 40.89);
+  --chart-5: oklch(0.64 0.18 32.07);
+  --sidebar: oklch(0.97 0.04 70.00);
+  --sidebar-foreground: oklch(0.34 0.01 2.77);
+  --sidebar-primary: oklch(0.65 0.26 34.00);
+  --sidebar-primary-foreground: oklch(1.00 0 0);
+  --sidebar-accent: oklch(0.83 0.22 50.00);
+  --sidebar-accent-foreground: oklch(0.34 0.01 2.77);
+  --sidebar-border: oklch(0.93 0.06 60.00);
+  --sidebar-ring: oklch(0.65 0.26 34.00);
+  --font-sans: Montserrat, sans-serif;
+  --font-serif: Merriweather, serif;
+  --font-mono: Ubuntu Mono, monospace;
+  --radius: 0.625rem;
+  --shadow-2xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
+  --shadow-xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
+  --shadow-sm: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09);
+  --shadow: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09);
+  --shadow-md: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 2px 4px -4px hsl(0 0% 0% / 0.09);
+  --shadow-lg: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 4px 6px -4px hsl(0 0% 0% / 0.09);
+  --shadow-xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 8px 10px -4px hsl(0 0% 0% / 0.09);
+  --shadow-2xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.22);
+}
+
+.black {
+  --background: oklch(0.15 0.01 350.00);
+  --foreground: oklch(0.95 0.01 60.00);
+  --card: oklch(0.20 0.01 340.00);
+  --card-foreground: oklch(0.95 0.01 60.00);
+  --popover: oklch(0.20 0.01 340.00);
+  --popover-foreground: oklch(0.95 0.01 60.00);
+  --primary: oklch(0.45 0.10 35.00);
+  --primary-foreground: oklch(1.00 0 0);
+  --secondary: oklch(0.25 0.01 340.00);
+  --secondary-foreground: oklch(0.95 0.01 60.00);
+  --muted: oklch(0.22 0.01 340.00);
+  --muted-foreground: oklch(0.86 0.01 60.00);
+  --accent: oklch(0.70 0.09 58.00);
+  --accent-foreground: oklch(0.15 0.01 350.00);
+  --destructive: oklch(0.45 0.16 20.00);
+  --destructive-foreground: oklch(1.00 0 0);
+  --border: oklch(0.25 0.01 340.00);
+  --input: oklch(0.25 0.01 340.00);
+  --ring: oklch(0.45 0.10 35.00);
+  --chart-1: oklch(0.45 0.10 35.00);
+  --chart-2: oklch(0.70 0.09 58.00);
+  --chart-3: oklch(0.80 0.06 54.00);
+  --chart-4: oklch(0.75 0.08 40.00);
+  --chart-5: oklch(0.55 0.10 32.00);
+  --sidebar: oklch(0.15 0.01 350.00);
+  --sidebar-foreground: oklch(0.95 0.01 60.00);
+  --sidebar-primary: oklch(0.40 0.06 34.00);
+  --sidebar-primary-foreground: oklch(1.00 0 0);
+  --sidebar-accent: oklch(0.60 0.07 56.00);
+  --sidebar-accent-foreground: oklch(0.15 0.01 350.00);
+  --sidebar-border: oklch(0.25 0.01 340.00);
+  --sidebar-ring: oklch(0.45 0.10 35.00);
+  --font-sans: Montserrat, sans-serif;
+  --font-serif: Merriweather, serif;
+  --font-mono: Ubuntu Mono, monospace;
+  --radius: 0.625rem;
+  --shadow-2xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
+  --shadow-xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
+  --shadow-sm: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09);
+  --shadow: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09);
+  --shadow-md: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 2px 4px -4px hsl(0 0% 0% / 0.09);
+  --shadow-lg: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 4px 6px -4px hsl(0 0% 0% / 0.09);
+  --shadow-xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 8px 10px -4px hsl(0 0% 0% / 0.09);
+  --shadow-2xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.22);
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -170,6 +266,7 @@
   /* Hide scrollbar for IE, Edge and Firefox */
   .no-scrollbar {
     -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+    /* Use Firefox-specific scrollbar hiding when supported */
+    scrollbar-width: none;
   }
 }

app/providers.tsx

@@ -30,8 +30,9 @@ export function Providers({ children }: { children: ReactNode }) {
       <ThemeProvider
         attribute="class"
         defaultTheme="system"
-        enableSystem
+        enableSystem={true}
         disableTransitionOnChange
+        themes={["light", "dark", "sunset", "black"]}
       >
         <MCPProvider>
           <SidebarProvider defaultOpen={sidebarOpen} open={sidebarOpen} onOpenChange={setSidebarOpen}>

components/theme-toggle.tsx

@@ -1,24 +1,44 @@
 "use client"
 
 import * as React from "react"
-import { Moon, Sun } from "lucide-react"
+import { CircleDashed, Flame, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
 import { Button } from "./ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu"
+import { cn } from "@/lib/utils"
 
 export function ThemeToggle({ className, ...props }: React.ComponentProps<typeof Button>) {
   const { theme, setTheme } = useTheme()
 
   return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-      className={`rounded-md h-8 w-8 ${className}`}
-      {...props}
-    >
-      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 hover:text-sidebar-accent" />
-      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 hover:text-sidebar-accent" />
-      <span className="sr-only">Toggle theme</span>
-    </Button>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild={true}>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn(`rounded-md h-8 w-8`, className)}
+          {...props}
+        >
+          <Flame className="h-4 w-4 rotate-0 scale-100 transition-all light:scale-0 light:-rotate-90 black:scale-0 black:-rotate-90 hover:text-sidebar-accent" />
+          <Sun className="absolute h-4 w-4 rotate-90 scale-0 transition-all light:rotate-0 light:scale-100 black:scale-0 black:rotate-0 hover:text-sidebar-accent" />
+          <CircleDashed className="absolute h-4 w-4 rotate-90 scale-0 transition-all black:rotate-0 black:scale-100 light:scale-0 light:rotate-0 hover:text-sidebar-accent" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onSelect={() => setTheme("dark")}>
+          <Flame className="mr-2 h-4 w-4" />
+          <span>Sunset</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => setTheme("light")}>
+          <Sun className="mr-2 h-4 w-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => setTheme("black")}>
+          <CircleDashed className="mr-2 h-4 w-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
-} 
+}

lib/context/mcp-context.tsx

@@ -42,7 +42,8 @@ interface MCPContextType {
 
 const MCPContext = createContext<MCPContextType | undefined>(undefined);
 
-export function MCPProvider({ children }: { children: React.ReactNode }) {
+export function MCPProvider(props: { children: React.ReactNode }) {
+  const { children } = props;
   const [mcpServers, setMcpServers] = useLocalStorage<MCPServer[]>(
     STORAGE_KEYS.MCP_SERVERS, 
     []

package.json

@@ -53,6 +53,7 @@
     "next": "^15.3.1",
     "next-auth": "^4.24.11",
     "next-themes": "^0.4.6",
+    "or": "^0.2.0",
     "pg": "^8.14.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",