chaoss · arya-912 · Apr 29, 2026
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
@@ -45,12 +45,12 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
+  --background: #f8fafc; /* Softer, cool off-white instead of blinding pure white */
+  --foreground: #0f172a; /* Slate-900 text */
+  --card: #ffffff;       /* Pure white for elevated cards */
+  --card-foreground: #0f172a;
+  --popover: #ffffff;
+  --popover-foreground: #0f172a;
   --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
@@ -79,12 +79,12 @@
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
+  --background: #111827; /* Dark grayish-blue instead of solid black */
+  --foreground: #bbbbbb; /* Crisp, cool-toned silver-grey */
+  --card: #1f2937;
+  --card-foreground: #bbbbbb;
+  --popover: #1f2937;
+  --popover-foreground: #bbbbbb;
   --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.205 0 0);
   --secondary: oklch(0.269 0 0);

diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Header from "@/components/header";
+import { ThemeProvider } from "@/components/theme-provider";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -25,12 +26,19 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <Header />
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Header />
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/frontend/components/cardGrid.tsx b/frontend/components/cardGrid.tsx
@@ -24,16 +24,16 @@ const SDGCard = ({ sdgNumber, sdgName, confidence }: SDGCardProps) => {
 
   if (confidenceScore >= 0.8) {
     confidenceLevel = "High";
-    colorClasses = "text-green-700 border-green-300";
-    bgColor = "bg-green-50";
+    colorClasses = "text-green-700 dark:text-green-400 border-green-300 dark:border-green-800/50";
+    bgColor = "bg-green-50 dark:bg-green-900/20";
   } else if (confidenceScore >= 0.6) {
     confidenceLevel = "Medium";
-    colorClasses = "text-yellow-700 border-yellow-300";
-    bgColor = "bg-yellow-50";
+    colorClasses = "text-yellow-700 dark:text-yellow-400 border-yellow-300 dark:border-yellow-800/50";
+    bgColor = "bg-yellow-50 dark:bg-yellow-900/20";
   } else {
     confidenceLevel = "Low";
-    colorClasses = "text-red-700 border-red-300";
-    bgColor = "bg-red-50";
+    colorClasses = "text-red-700 dark:text-red-400 border-red-300 dark:border-red-800/50";
+    bgColor = "bg-red-50 dark:bg-red-900/20";
   }
 
   return (
@@ -42,43 +42,43 @@ const SDGCard = ({ sdgNumber, sdgName, confidence }: SDGCardProps) => {
     >
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center space-x-3">
-          <div className="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold text-lg">
+          <div className="w-12 h-12 bg-indigo-600 dark:bg-indigo-500 rounded-full flex items-center justify-center text-white font-bold text-lg">
             {sdgNumber}
           </div>
           <div>
-            <h4 className="font-semibold text-gray-800 text-sm">
+            <h4 className="font-semibold text-gray-800 dark:text-gray-100 text-sm">
               SDG {sdgNumber}
             </h4>
             <span
               className={`text-xs px-2 py-1 rounded-full font-medium ${
                 confidenceLevel === "High"
-                  ? "bg-green-100 text-green-800"
+                  ? "bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300"
                   : confidenceLevel === "Medium"
-                    ? "bg-yellow-100 text-yellow-800"
-                    : "bg-red-100 text-red-800"
+                    ? "bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-300"
+                    : "bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-300"
               }`}
             >
               {confidenceLevel} Match
             </span>
           </div>
         </div>
         <div className="text-right">
-          <div className="text-2xl font-bold text-gray-800">
+          <div className="text-2xl font-bold text-gray-800 dark:text-gray-100">
             {confidencePercentage}%
           </div>
         </div>
       </div>
 
-      <h5 className="font-medium text-gray-700 mb-3 leading-tight line-clamp-2">
+      <h5 className="font-medium text-gray-700 dark:text-gray-300 mb-3 leading-tight line-clamp-2">
         {sdgName}
       </h5>
 
       <div className="space-y-2">
-        <div className="flex justify-between text-sm text-gray-600">
+        <div className="flex justify-between text-sm text-gray-600 dark:text-gray-400">
           <span>Confidence Score</span>
           <span>{confidenceScore.toFixed(3)}</span>
         </div>
-        <div className="w-full bg-gray-200 rounded-full h-2">
+        <div className="w-full bg-gray-200 dark:bg-slate-700 rounded-full h-2">
           <div
             className={`h-2 rounded-full transition-all duration-300 ${
               confidenceLevel === "High"

diff --git a/frontend/components/header.tsx b/frontend/components/header.tsx
@@ -1,23 +1,26 @@
 import React from "react";
 import Image from "next/image";
 import Logo from "@/assets/GW Open Source Program Office.png";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 /*
 Header Component
 - Displays the application header with logo
+- Includes ThemeToggle for switching between Light/Dark modes
 */
 
 const Header = () => {
   return (
     <header className="p-6">
-      <div className="flex items-center">
+      <div className="flex items-center justify-between">
         <Image
           src={Logo}
           alt="Logo"
           width={60}
           height={60}
           className="rounded-lg"
         />
+        <ThemeToggle />
       </div>
     </header>
   );

diff --git a/frontend/components/mainScreen.tsx b/frontend/components/mainScreen.tsx
@@ -104,12 +104,12 @@ const MainScreen: React.FC<{
           {/* Main Content */}
           <div className="space-y-8">
             <div className="space-y-6">
-              <h1 className="text-6xl font-bold text-black leading-tight">
+              <h1 className="text-6xl font-bold text-foreground leading-tight">
                 Check which{" "}
-                <span className="text-purple-700">UN SDG goals</span> your
+                <span className="text-purple-700 dark:text-purple-400">UN SDG goals</span> your
                 project satisfy
               </h1>
-              <p className="text-xl text-gray-800 leading-relaxed">
+              <p className="text-xl text-muted-foreground leading-relaxed">
                 A simple tool that identifies relevant UN Sustainable
                 Development Goals (SDGs) based on the content of a Github
                 repository.
@@ -126,10 +126,10 @@ const MainScreen: React.FC<{
           </div>
         </div>
       </div>
-      <div className="text-center px-8 py-16 bg-purple-400">
-        <div className="max-w-3xl mx-auto">
-          <div className="text-center mb-8">
-            <h2 className="text-3xl font-bold text-white mb-2">
+      <div className="px-4 py-16">
+        <div className="max-w-3xl mx-auto bg-white/80 dark:bg-slate-900/60 backdrop-blur-xl border border-gray-200 dark:border-slate-800 rounded-3xl p-8 md:p-12 shadow-2xl dark:shadow-none">
+          <div className="text-center mb-10">
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
               Analyze Your Project
             </h2>
           </div>
@@ -138,7 +138,7 @@ const MainScreen: React.FC<{
             <div>
               <label
                 htmlFor="projectName"
-                className="block text-sm font-semibold text-gray-700 mb-2"
+                className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 text-left"
               >
                 Project Name
                 <span className="text-red-500 ml-1">*</span>
@@ -150,14 +150,14 @@ const MainScreen: React.FC<{
                 onChange={(e) => setProjectName(e.target.value)}
                 placeholder="Enter your project name"
                 required
-                className="w-full bg-white px-6 py-4 rounded-2xl border border-gray-200 text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-transparent transition-all duration-200"
+                className="w-full bg-gray-50 dark:bg-slate-950/50 px-6 py-4 rounded-2xl border border-gray-200 dark:border-slate-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 dark:focus:ring-indigo-500/50 focus:border-transparent transition-all duration-200"
               />
             </div>
 
             <div>
               <label
                 htmlFor="projectUrl"
-                className="block text-sm font-semibold text-gray-700 mb-2"
+                className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 text-left"
               >
                 Project GitHub URL
                 <span className="text-red-500 ml-1">*</span>
@@ -169,15 +169,15 @@ const MainScreen: React.FC<{
                 onChange={(e) => setProjectUrl(e.target.value)}
                 placeholder="https://github.com/username/repo"
                 required
-                className="w-full bg-white px-6 py-4 rounded-2xl border border-gray-200 text-gray-700 placeholder-gray-400 focus:outline-none  focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"
+                className="w-full bg-gray-50 dark:bg-slate-950/50 px-6 py-4 rounded-2xl border border-gray-200 dark:border-slate-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 dark:focus:ring-indigo-500/50 focus:border-transparent transition-all"
               />
             </div>
 
             {/* Project Description */}
             <div>
               <label
                 htmlFor="projectDescription"
-                className="block text-sm font-semibold text-gray-700 mb-2 "
+                className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2 text-left"
               >
                 SDG Relevance Description
                 <span className="text-red-500 ml-1">*</span>
@@ -189,7 +189,7 @@ const MainScreen: React.FC<{
                 placeholder="Please write a description of your project's relevance to the UN SDGs in around 100 to 120 words."
                 required
                 rows={12}
-                className="w-full bg-white px-6 py-4 rounded-2xl border border-gray-200 text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"
+                className="w-full bg-gray-50 dark:bg-slate-950/50 px-6 py-4 rounded-2xl border border-gray-200 dark:border-slate-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 dark:focus:ring-indigo-500/50 focus:border-transparent transition-all"
               />
             </div>
 
@@ -296,7 +296,7 @@ const MainScreen: React.FC<{
             <button
               type="submit"
               disabled={isUploading || !projectName || !projectUrl}
-              className="w-full px-8 py-4 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold rounded-2xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
+              className="w-full px-8 py-4 bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500/90 dark:hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-2xl transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
             >
               {isUploading ? (
                 <span className="flex items-center justify-center gap-2">

diff --git a/frontend/components/rawResults.tsx b/frontend/components/rawResults.tsx
@@ -9,9 +9,9 @@ RawResults Component
 
 const RawResults: React.FC<RawResultsProps> = ({ results }) => {
   return (
-    <div className="bg-white rounded-xl p-6 shadow-lg">
-      <h4 className="text-lg font-semibold text-gray-800 mb-2">Raw Results:</h4>
-      <pre className="bg-gray-100 rounded-lg p-4 overflow-auto text-sm">
+    <div className="bg-white dark:bg-slate-900 border border-transparent dark:border-slate-800 rounded-xl p-6 shadow-lg dark:shadow-none">
+      <h4 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Raw Results:</h4>
+      <pre className="bg-gray-100 dark:bg-slate-950 text-gray-800 dark:text-gray-300 rounded-lg p-4 overflow-auto text-sm">
         {JSON.stringify(results, null, 2)}
       </pre>
     </div>