mustansirr · mustansirr · Jun 28, 2026 · Jun 22, 2026 · Jun 28, 2026
diff --git a/frontend/app/dashboard/page.tsx b/frontend/app/dashboard/page.tsx
@@ -19,8 +19,8 @@ export default async function DashboardPage() {
 
   return (
     <DashboardWrapper>
-      <div className="flex min-h-screen bg-[#FFF6F6] font-sans text-gray-900 relative selection:bg-[#FFDFDF] selection:text-[#e8609a]">
-        <div className="fixed inset-0 z-0 bg-[linear-gradient(to_right,#FFDFDF_1px,transparent_1px),linear-gradient(to_bottom,#FFDFDF_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
+      <div className="flex min-h-screen bg-[#FFF6F6] dark:bg-background font-sans text-gray-900 dark:text-foreground relative selection:bg-[#FFDFDF] dark:selection:bg-primary/20 selection:text-[#e8609a] dark:selection:text-primary transition-colors">
+        <div className="fixed inset-0 z-0 bg-[linear-gradient(to_right,#FFDFDF_1px,transparent_1px),linear-gradient(to_bottom,#FFDFDF_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.05)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
 
         {/* Sidebar - Fixed Left */}
         <Sidebar className="hidden md:block w-64 flex-shrink-0 z-10" />
@@ -33,7 +33,7 @@ export default async function DashboardPage() {
             <div className="flex flex-col items-center justify-start min-h-full">
               {/* Hero Heading */}
               <div className="text-center mb-8 mt-12">
-                <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
+                <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-foreground mb-3">
                   What&apos;s today&apos;s lesson or concept?
                 </h1>
               </div>

diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter, Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
 
 const inter = Inter({
   variable: "--font-inter",
@@ -36,11 +37,13 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="scroll-smooth">
+    <html lang="en" className="scroll-smooth" suppressHydrationWarning>
       <body
         className={`${inter.variable} ${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/frontend/app/library/page.tsx b/frontend/app/library/page.tsx
@@ -18,8 +18,8 @@ export default async function LibraryPage() {
 
   return (
     <DashboardWrapper>
-      <div className="flex min-h-screen bg-[#FFF6F6] font-sans text-gray-900 relative selection:bg-[#FFDFDF] selection:text-[#e8609a]">
-        <div className="fixed inset-0 z-0 bg-[linear-gradient(to_right,#FFDFDF_1px,transparent_1px),linear-gradient(to_bottom,#FFDFDF_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
+      <div className="flex min-h-screen bg-[#FFF6F6] dark:bg-background font-sans text-gray-900 dark:text-foreground relative selection:bg-[#FFDFDF] dark:selection:bg-primary/20 selection:text-[#e8609a] dark:selection:text-primary transition-colors">
+        <div className="fixed inset-0 z-0 bg-[linear-gradient(to_right,#FFDFDF_1px,transparent_1px),linear-gradient(to_bottom,#FFDFDF_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.05)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
 
         {/* Sidebar - Fixed Left */}
         <Sidebar className="hidden md:block w-64 flex-shrink-0 z-10" />
@@ -30,8 +30,8 @@ export default async function LibraryPage() {
 
           <main className="flex-1 overflow-auto p-4 md:p-6">
             <div className="mb-6">
-              <h1 className="text-2xl font-bold text-gray-900">My Library</h1>
-              <p className="text-sm text-gray-500 mt-1">
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-foreground">My Library</h1>
+              <p className="text-sm text-gray-500 dark:text-muted-foreground mt-1">
                 View, play, and manage your generated videos
               </p>
             </div>

diff --git a/frontend/components/dashboard/GenerationPipeline.tsx b/frontend/components/dashboard/GenerationPipeline.tsx
@@ -100,10 +100,10 @@ export function GenerationPipeline() {
 
   return (
     <div className="w-full max-w-3xl mx-auto mt-10 animate-in fade-in slide-in-from-bottom-4 duration-500">
-      <div className="rounded-xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+      <div className="rounded-xl border border-gray-200 dark:border-border bg-white dark:bg-card shadow-sm overflow-hidden">
         {/* Header */}
-        <div className="px-5 py-3 border-b bg-gray-50/60 flex items-center justify-between">
-          <span className="text-sm font-medium text-gray-700 flex items-center gap-2">
+        <div className="px-5 py-3 border-b dark:border-border bg-gray-50/60 dark:bg-transparent flex items-center justify-between">
+          <span className="text-sm font-medium text-gray-700 dark:text-card-foreground flex items-center gap-2">
             Generation Progress
             {isPolling && (
               <span className="flex items-center gap-1 text-[10px] font-normal text-muted-foreground">
@@ -148,21 +148,21 @@ export function GenerationPipeline() {
                           ? "bg-green-200"
                           : state === "active"
                           ? "bg-[#F875AA]/30"
-                          : "bg-gray-100"
+                          : "bg-gray-100 dark:bg-muted"
                       )}
                     />
                   )}
 
                   {/* Icon */}
-                  <div className="relative z-10 flex h-8 w-8 items-center justify-center flex-shrink-0 bg-white rounded-full ring-4 ring-white">
+                  <div className="relative z-10 flex h-8 w-8 items-center justify-center flex-shrink-0 bg-white dark:bg-card rounded-full ring-4 ring-white dark:ring-card">
                     {state === "completed" && (
                       <CheckCircle2 className="h-6 w-6 text-green-500" />
                     )}
                     {state === "active" && (
                       <Loader2 className="h-5 w-5 text-[#F875AA] animate-spin" />
                     )}
                     {state === "pending" && (
-                      <Circle className="h-5 w-5 text-gray-200" />
+                      <Circle className="h-5 w-5 text-gray-200 dark:text-muted" />
                     )}
                   </div>
 
@@ -176,8 +176,8 @@ export function GenerationPipeline() {
                           state === "active"
                             ? "text-[#e8609a]"
                             : state === "completed"
-                            ? "text-gray-700"
-                            : "text-gray-400"
+                            ? "text-gray-700 dark:text-card-foreground"
+                            : "text-gray-400 dark:text-muted-foreground"
                         )}
                       >
                         {step.label}

diff --git a/frontend/components/dashboard/Header.tsx b/frontend/components/dashboard/Header.tsx
@@ -3,6 +3,7 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Bell, LogOut, User } from "lucide-react";
+import { ThemeToggle } from "@/components/theme-toggle";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -15,12 +16,13 @@ import { signOut } from "@/app/auth/actions";
 
 export function Header() {
   return (
-    <header className="flex h-16 items-center gap-4 border-b border-slate-200 bg-white/70 backdrop-blur-md px-6 w-full justify-between sticky top-0 z-50">
-      <div className="flex items-center gap-2 font-semibold text-lg text-gray-800">
+    <header className="flex h-16 items-center gap-4 border-b border-border bg-background/70 backdrop-blur-md px-6 w-full justify-between sticky top-0 z-50 transition-colors">
+      <div className="flex items-center gap-2 font-semibold text-lg text-foreground">
         Welcome back, Scholar
       </div>
       <div className="flex items-center gap-4">
-        <Button variant="ghost" size="icon" className="text-gray-500">
+        <ThemeToggle />
+        <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground">
           <Bell className="h-5 w-5" />
           <span className="sr-only">Toggle notifications</span>
         </Button>

diff --git a/frontend/components/dashboard/PromptInput.tsx b/frontend/components/dashboard/PromptInput.tsx
@@ -129,7 +129,7 @@ export function PromptInput() {
   return (
     <div className="w-full max-w-3xl mx-auto">
       {/* Prompt box with inline actions */}
-      <div className="relative rounded-xl border border-gray-200 bg-white shadow-sm focus-within:ring-2 focus-within:ring-[#F875AA]/20 focus-within:border-[#F875AA]/40 transition-all">
+      <div className="relative rounded-xl border border-gray-200 dark:border-border bg-white dark:bg-card shadow-sm focus-within:ring-2 focus-within:ring-[#F875AA]/20 focus-within:border-[#F875AA]/40 transition-all">
         <Textarea
           id="prompt"
           value={prompt}
@@ -153,8 +153,8 @@ export function PromptInput() {
               type="button"
               className={`p-1.5 rounded-md transition-colors ${
                 uploadState.file
-                  ? "text-[#e8609a] bg-[#FFF6F6]"
-                  : "text-gray-400 hover:text-gray-600 hover:bg-gray-100"
+                  ? "text-[#e8609a] bg-[#FFF6F6] dark:bg-primary/20 dark:text-primary"
+                  : "text-gray-400 dark:text-muted-foreground hover:text-gray-600 dark:hover:text-foreground hover:bg-gray-100 dark:hover:bg-muted"
               }`}
               onClick={handleUploadClick}
               disabled={isGenerating}
@@ -169,7 +169,7 @@ export function PromptInput() {
               )}
             </button>
             {uploadState.file && (
-              <span className="text-[11px] text-gray-500 truncate max-w-[150px]">
+              <span className="text-[11px] text-gray-500 dark:text-muted-foreground truncate max-w-[150px]">
                 {uploadState.file.name}
               </span>
             )}

diff --git a/frontend/components/dashboard/ScriptReview.tsx b/frontend/components/dashboard/ScriptReview.tsx
@@ -208,7 +208,7 @@ export function ScriptReview({ onClose }: ScriptReviewProps) {
 
   if (scenes.length === 0) {
     return (
-      <Card className="border shadow-sm bg-white">
+      <Card className="border dark:border-border shadow-sm bg-white dark:bg-card">
         <CardContent className="p-6 text-center text-muted-foreground">
           <FileText className="w-8 h-8 mx-auto mb-2 opacity-50" />
           <p className="text-sm">No scripts generated yet.</p>
@@ -220,8 +220,8 @@ export function ScriptReview({ onClose }: ScriptReviewProps) {
   // ── Render ───────────────────────────────────────────────────────────────
 
   return (
-    <Card className="border shadow-sm bg-white max-h-[70vh] overflow-hidden flex flex-col">
-      <CardHeader className="pb-3 border-b bg-gray-50/50 flex-shrink-0">
+    <Card className="border dark:border-border shadow-sm bg-white dark:bg-card max-h-[70vh] overflow-hidden flex flex-col">
+      <CardHeader className="pb-3 border-b dark:border-border bg-gray-50/50 dark:bg-transparent flex-shrink-0">
         <CardTitle className="text-base font-semibold flex justify-between items-center">
           <span className="flex items-center gap-2">
             <Eye className="w-4 h-4 text-[#F875AA]" />
@@ -247,8 +247,8 @@ export function ScriptReview({ onClose }: ScriptReviewProps) {
               key={scene.id}
               className={`border rounded-lg p-4 space-y-3 transition-colors ${
                 isSuggestMode
-                  ? "bg-amber-50/40 border-amber-200"
-                  : "bg-gray-50/50"
+                  ? "bg-amber-50/40 dark:bg-amber-900/10 border-amber-200 dark:border-amber-900/30"
+                  : "bg-gray-50/50 dark:bg-muted/30 dark:border-border"
               }`}
             >
               <div className="flex items-center justify-between">
@@ -281,11 +281,11 @@ export function ScriptReview({ onClose }: ScriptReviewProps) {
                       onChange={(e) =>
                         updateSceneEdit(scene.id, "narration_script", e.target.value)
                       }
-                      className="text-sm min-h-[80px] resize-y border-amber-300 focus-visible:ring-amber-400 bg-white"
+                      className="text-sm min-h-[80px] resize-y border-amber-300 dark:border-amber-700 focus-visible:ring-amber-400 bg-white dark:bg-card dark:text-foreground"
                       placeholder="Edit narration script…"
                     />
                   ) : (
-                    <p className="text-sm text-gray-700 bg-white p-2 rounded border">
+                    <p className="text-sm text-gray-700 dark:text-card-foreground bg-white dark:bg-muted p-2 rounded border dark:border-border">
                       {scene.narration_script}
                     </p>
                   )}
@@ -305,11 +305,11 @@ export function ScriptReview({ onClose }: ScriptReviewProps) {
                       onChange={(e) =>
                         updateSceneEdit(scene.id, "visual_plan", e.target.value)
                       }
-                      className="text-sm min-h-[80px] resize-y font-mono border-amber-300 focus-visible:ring-amber-400 bg-white"
+                      className="text-sm min-h-[80px] resize-y font-mono border-amber-300 dark:border-amber-700 focus-visible:ring-amber-400 bg-white dark:bg-card dark:text-foreground"
                       placeholder="Edit visual plan…"
                     />
                   ) : (
-                    <p className="text-sm text-gray-700 bg-white p-2 rounded border font-mono">
+                    <p className="text-sm text-gray-700 dark:text-card-foreground bg-white dark:bg-muted p-2 rounded border dark:border-border font-mono">
                       {scene.visual_plan}
                     </p>
                   )}
@@ -321,7 +321,7 @@ export function ScriptReview({ onClose }: ScriptReviewProps) {
 
         {/* Feedback / Notes Section */}
         {isWaitingApproval && (
-          <div className="space-y-2 pt-2 border-t">
+          <div className="space-y-2 pt-2 border-t dark:border-border">
             <label className="text-xs font-medium text-muted-foreground">
               {isSuggestMode
                 ? "Additional notes (optional)"
@@ -335,7 +335,7 @@ export function ScriptReview({ onClose }: ScriptReviewProps) {
                   ? "Any extra context for your suggested edits…"
                   : "Provide feedback if you want changes..."
               }
-              className="min-h-[60px] resize-none text-sm"
+              className="min-h-[60px] resize-none text-sm dark:bg-card dark:text-foreground dark:border-border"
             />
           </div>
         )}
@@ -361,7 +361,7 @@ export function ScriptReview({ onClose }: ScriptReviewProps) {
 
       {/* Action Buttons */}
       {isWaitingApproval && (
-        <div className="p-4 border-t bg-gray-50/50 flex gap-2 justify-end flex-shrink-0 flex-wrap">
+        <div className="p-4 border-t dark:border-border bg-gray-50/50 dark:bg-transparent flex gap-2 justify-end flex-shrink-0 flex-wrap">
           {isSuggestMode ? (
             /* ── Suggest-mode actions ── */
             <>

diff --git a/frontend/components/dashboard/Sidebar.tsx b/frontend/components/dashboard/Sidebar.tsx
@@ -11,7 +11,7 @@ export function Sidebar({ className }: { className?: string }) {
   const pathname = usePathname();
 
   return (
-    <div className={cn("pb-12 w-64 border-r border-slate-200 bg-white/60 backdrop-blur-xl min-h-screen hidden md:block", className)}>
+    <div className={cn("pb-12 w-64 border-r border-slate-200 dark:border-border bg-white/60 dark:bg-background/60 backdrop-blur-xl min-h-screen hidden md:block transition-colors", className)}>
       <div className="space-y-4 py-4">
         <div className="px-3 py-2">
           <div className="mb-2 px-4">
@@ -25,7 +25,7 @@ export function Sidebar({ className }: { className?: string }) {
           </div>
         </div>
         <div className="px-3 py-2">
-          <h2 className="mb-2 px-4 text-xs font-semibold tracking-tight uppercase text-gray-500">
+          <h2 className="mb-2 px-4 text-xs font-semibold tracking-tight uppercase text-gray-500 dark:text-muted-foreground">
             Menu
           </h2>
           <div className="space-y-1">
@@ -35,8 +35,8 @@ export function Sidebar({ className }: { className?: string }) {
                 className={cn(
                   "w-full justify-start font-medium transition-colors",
                   pathname === "/dashboard" 
-                    ? "bg-slate-200/80 hover:bg-slate-300/80 text-slate-900" 
-                    : "text-slate-600 hover:bg-slate-200/60 hover:text-slate-900"
+                    ? "bg-slate-200/80 dark:bg-muted hover:bg-slate-300/80 dark:hover:bg-muted/80 text-slate-900 dark:text-foreground" 
+                    : "text-slate-600 dark:text-muted-foreground hover:bg-slate-200/60 dark:hover:bg-muted/50 hover:text-slate-900 dark:hover:text-foreground"
                 )}
               >
                 <LayoutDashboard className="mr-2 h-4 w-4" />
@@ -49,8 +49,8 @@ export function Sidebar({ className }: { className?: string }) {
                 className={cn(
                   "w-full justify-start font-medium transition-colors",
                   pathname === "/library" 
-                    ? "bg-slate-200/80 hover:bg-slate-300/80 text-slate-900" 
-                    : "text-slate-600 hover:bg-slate-200/60 hover:text-slate-900"
+                    ? "bg-slate-200/80 dark:bg-muted hover:bg-slate-300/80 dark:hover:bg-muted/80 text-slate-900 dark:text-foreground" 
+                    : "text-slate-600 dark:text-muted-foreground hover:bg-slate-200/60 dark:hover:bg-muted/50 hover:text-slate-900 dark:hover:text-foreground"
                 )}
               >
                 <Library className="mr-2 h-4 w-4" />