From ad8841a140aeead3decb6fd839de8b690d7ab273 Mon Sep 17 00:00:00 2001
From: yusstyle <yusufhussaini0904@gmail.com>
Date: Fri, 27 Mar 2026 16:41:46 -0700
Subject: [PATCH] feat: implement dark mode support for all data visualizations

- Enable Tailwind dark mode with 'class' strategy
- Add light mode CSS variables and dark mode overrides in globals.css
- Replace hardcoded gray colors with CSS variable design tokens
- Update PortfolioChart component to support theme switching
- Update UI components (Card, Button, Badge, Input) for theme support
- Update layout components (Header, FeaturedProjects) for consistency
- Ensures all charts, tooltips, and grids render legibly in both modes

Fixes #119
---
 frontend/src/components/FeaturedProjects.tsx |  4 +-
 frontend/src/components/LoadingDashboard.tsx | 44 ++++++++++----------
 frontend/src/components/PortfolioChart.tsx   |  2 +-
 frontend/src/components/layout/Header.tsx    | 22 +++++-----
 frontend/src/components/ui/Badge.tsx         |  2 +-
 frontend/src/components/ui/Button.tsx        |  2 +-
 frontend/src/components/ui/Card.tsx          |  2 +-
 frontend/src/components/ui/Input.tsx         |  2 +-
 frontend/src/styles/globals.css              | 20 +++++++++
 frontend/tailwind.config.ts                  |  1 +
 10 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/FeaturedProjects.tsx b/frontend/src/components/FeaturedProjects.tsx
index e83b798..59a41d9 100644
--- a/frontend/src/components/FeaturedProjects.tsx
+++ b/frontend/src/components/FeaturedProjects.tsx
@@ -93,7 +93,7 @@ export const FeaturedProjects: React.FC = () => {
                   Featured Projects
                 </h2>
                 <div className="h-1 w-20 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full" />
-                <p className="mt-6 max-w-2xl text-lg text-gray-300">
+                <p className="mt-6 max-w-2xl text-lg text-muted-foreground">
                   Discover groundbreaking projects that are reshaping industries 
                   and creating positive impact around the world.
                 </p>
@@ -143,7 +143,7 @@ export const FeaturedProjects: React.FC = () => {
             <h3 className="text-2xl sm:text-3xl font-bold text-white mb-4">
               Ready to invest in innovation?
             </h3>
-            <p className="text-gray-300 mb-8 max-w-xl mx-auto">
+            <p className="text-muted-foreground mb-8 max-w-xl mx-auto">
               Join thousands of community members funding the future. Start with 
               as little as $1 and become part of the investment revolution.
             </p>
diff --git a/frontend/src/components/LoadingDashboard.tsx b/frontend/src/components/LoadingDashboard.tsx
index 7bc3159..02646b3 100644
--- a/frontend/src/components/LoadingDashboard.tsx
+++ b/frontend/src/components/LoadingDashboard.tsx
@@ -9,23 +9,23 @@ const LoadingDashboard: React.FC = () => {
           {/* Header */}
           <div className="flex justify-between items-center mb-8">
             <div>
-              <div className="h-8 bg-gray-700 rounded w-64 mb-2"></div>
-              <div className="h-4 bg-gray-700 rounded w-48"></div>
+              <div className="h-8 bg-muted rounded w-64 mb-2"></div>
+              <div className="h-4 bg-muted rounded w-48"></div>
             </div>
-            <div className="h-10 bg-gray-700 rounded w-32"></div>
+            <div className="h-10 bg-muted rounded w-32"></div>
           </div>
 
           {/* Stats Cards */}
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
             {[...Array(4)].map((_, i) => (
-              <div key={i} className="bg-gray-800 rounded-lg p-6">
+              <div key={i} className="bg-card rounded-lg p-6">
                 <div className="flex items-center justify-between">
                   <div className="flex-1">
-                    <div className="h-4 bg-gray-700 rounded w-20 mb-2"></div>
-                    <div className="h-8 bg-gray-700 rounded w-16 mb-1"></div>
-                    <div className="h-3 bg-gray-700 rounded w-24"></div>
+                    <div className="h-4 bg-muted rounded w-20 mb-2"></div>
+                    <div className="h-8 bg-muted rounded w-16 mb-1"></div>
+                    <div className="h-3 bg-muted rounded w-24"></div>
                   </div>
-                  <div className="w-12 h-12 bg-gray-700 rounded-full"></div>
+                  <div className="w-12 h-12 bg-muted rounded-full"></div>
                 </div>
               </div>
             ))}
@@ -35,19 +35,19 @@ const LoadingDashboard: React.FC = () => {
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
             {/* Investment Table */}
             <div className="lg:col-span-2">
-              <div className="bg-gray-800 rounded-lg">
-                <div className="p-6 border-b border-gray-700">
-                  <div className="h-6 bg-gray-700 rounded w-40 mb-2"></div>
-                  <div className="h-4 bg-gray-700 rounded w-64"></div>
+              <div className="bg-card rounded-lg">
+                <div className="p-6 border-b border-border">
+                  <div className="h-6 bg-muted rounded w-40 mb-2"></div>
+                  <div className="h-4 bg-muted rounded w-64"></div>
                 </div>
                 <div className="p-6 space-y-4">
                   {[...Array(4)].map((_, i) => (
                     <div key={i} className="flex items-center space-x-4">
-                      <div className="h-4 bg-gray-700 rounded flex-1"></div>
-                      <div className="h-4 bg-gray-700 rounded w-20"></div>
-                      <div className="h-4 bg-gray-700 rounded w-20"></div>
-                      <div className="h-4 bg-gray-700 rounded w-16"></div>
-                      <div className="h-8 bg-gray-700 rounded w-16"></div>
+                      <div className="h-4 bg-muted rounded flex-1"></div>
+                      <div className="h-4 bg-muted rounded w-20"></div>
+                      <div className="h-4 bg-muted rounded w-20"></div>
+                      <div className="h-4 bg-muted rounded w-16"></div>
+                      <div className="h-8 bg-muted rounded w-16"></div>
                     </div>
                   ))}
                 </div>
@@ -56,14 +56,14 @@ const LoadingDashboard: React.FC = () => {
 
             {/* Chart */}
             <div className="lg:col-span-1">
-              <div className="bg-gray-800 rounded-lg p-6">
-                <div className="h-6 bg-gray-700 rounded w-32 mb-4"></div>
+              <div className="bg-card rounded-lg p-6">
+                <div className="h-6 bg-muted rounded w-32 mb-4"></div>
                 <div className="space-y-3">
                   {[...Array(4)].map((_, i) => (
                     <div key={i} className="flex items-center space-x-3">
-                      <div className="h-3 bg-gray-700 rounded w-16"></div>
-                      <div className="h-3 bg-gray-700 rounded flex-1"></div>
-                      <div className="h-3 bg-gray-700 rounded w-12"></div>
+                      <div className="h-3 bg-muted rounded w-16"></div>
+                      <div className="h-3 bg-muted rounded flex-1"></div>
+                      <div className="h-3 bg-muted rounded w-12"></div>
                     </div>
                   ))}
                 </div>
diff --git a/frontend/src/components/PortfolioChart.tsx b/frontend/src/components/PortfolioChart.tsx
index d999e8a..789e1af 100644
--- a/frontend/src/components/PortfolioChart.tsx
+++ b/frontend/src/components/PortfolioChart.tsx
@@ -47,7 +47,7 @@ const PortfolioChart: React.FC<PortfolioChartProps> = ({ investments }) => {
               {item.projectName}
             </div>
             <div className="flex-1 mx-3">
-              <div className="bg-gray-700 rounded-full h-3 overflow-hidden">
+              <div className="bg-gray-300 dark:bg-gray-700 rounded-full h-3 overflow-hidden">
                 <div
                   className={`h-full ${colors[index % colors.length]} transition-all duration-500`}
                   style={{ width: `${item.percentage}%` }}
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index cebbb38..7dd2bc5 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -37,7 +37,7 @@ const Header: React.FC = () => {
   }, []);
 
   return (
-    <header className="bg-black text-white shadow-md fixed top-0 left-0 right-0 z-50">
+    <header className="bg-background text-foreground shadow-md fixed top-0 left-0 right-0 z-50">
       <nav className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center h-16">
         <Link
           href="/"
@@ -52,8 +52,8 @@ const Header: React.FC = () => {
             href="/explore"
             className={`text-sm font-medium transition-colors ${
               isActive("/explore")
-                ? "text-purple-400"
-                : "text-gray-300 hover:text-white"
+                ? "text-primary"
+                : "text-muted-foreground hover:text-foreground"
             }`}
           >
             Explore
@@ -62,8 +62,8 @@ const Header: React.FC = () => {
             href="/bridge"
             className={`text-sm font-medium transition-colors ${
               isActive("/bridge")
-                ? "text-purple-400"
-                : "text-gray-300 hover:text-white"
+                ? "text-primary"
+                : "text-muted-foreground hover:text-foreground"
             }`}
           >
             Bridge
@@ -72,8 +72,8 @@ const Header: React.FC = () => {
             href="/create"
             className={`text-sm font-medium transition-colors ${
               isActive("/create")
-                ? "text-purple-400"
-                : "text-gray-300 hover:text-white"
+                ? "text-primary"
+                : "text-muted-foreground hover:text-foreground"
             }`}
           >
             Create
@@ -82,8 +82,8 @@ const Header: React.FC = () => {
             href="/dashboard"
             className={`text-sm font-medium transition-colors ${
               isActive("/dashboard")
-                ? "text-purple-400"
-                : "text-gray-300 hover:text-white"
+                ? "text-primary"
+                : "text-muted-foreground hover:text-foreground"
             }`}
           >
             Dashboard
@@ -93,7 +93,7 @@ const Header: React.FC = () => {
             <button
               type="button"
               onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
-              className="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-gray-300 transition-colors hover:bg-white/10"
+              className="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-white/10 dark:hover:bg-black/20"
             >
               <User className="h-4 w-4" />
               <span className="font-mono text-xs">
@@ -132,7 +132,7 @@ const Header: React.FC = () => {
         {/* Mobile Menu Button */}
         <button
           onClick={toggleMenu}
-          className="md:hidden p-2 rounded-md text-gray-300 hover:text-white hover:bg-gray-800 transition-colors"
+          className="md:hidden p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
           aria-label="Toggle menu"
         >
           {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
diff --git a/frontend/src/components/ui/Badge.tsx b/frontend/src/components/ui/Badge.tsx
index 7871cd1..72d2537 100644
--- a/frontend/src/components/ui/Badge.tsx
+++ b/frontend/src/components/ui/Badge.tsx
@@ -12,7 +12,7 @@ const Badge: React.FC<BadgeProps> = ({
 }) => {
   const variants = {
     primary: "bg-purple-700 text-white",
-    secondary: "bg-gray-700 text-white",
+    secondary: "bg-muted text-muted-foreground",
     success: "bg-green-600 text-white",
     danger: "bg-red-600 text-white",
   };
diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
index 455d408..6d4b658 100644
--- a/frontend/src/components/ui/Button.tsx
+++ b/frontend/src/components/ui/Button.tsx
@@ -21,7 +21,7 @@ const Button: React.FC<ButtonProps> = ({
   const variants = {
     primary:
       "bg-purple-700 text-white hover:bg-purple-600 focus:ring-purple-500",
-    secondary: "bg-gray-800 text-white hover:bg-gray-700 focus:ring-gray-500",
+    secondary: "bg-muted text-foreground hover:bg-muted/80 focus:ring-muted",
     danger: "bg-red-600 text-white hover:bg-red-500 focus:ring-red-400",
   };
 
diff --git a/frontend/src/components/ui/Card.tsx b/frontend/src/components/ui/Card.tsx
index ba7c722..07084f7 100644
--- a/frontend/src/components/ui/Card.tsx
+++ b/frontend/src/components/ui/Card.tsx
@@ -7,7 +7,7 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 const Card: React.FC<CardProps> = ({ children, className = "", ...props }) => {
   return (
     <div
-      className={`bg-gray-900 text-white p-6 rounded-lg shadow-lg ${className}`}
+      className={`bg-card text-card-foreground p-6 rounded-lg shadow-lg ${className}`}
       {...props}
     >
       {children}
diff --git a/frontend/src/components/ui/Input.tsx b/frontend/src/components/ui/Input.tsx
index 826828e..e6e97be 100644
--- a/frontend/src/components/ui/Input.tsx
+++ b/frontend/src/components/ui/Input.tsx
@@ -10,7 +10,7 @@ const Input: React.FC<InputProps> = ({ label, error, ...props }) => {
     "w-full px-3 py-3 border rounded focus:outline-none focus:ring-2 min-h-[44px] md:py-2 md:min-h-0";
   const errorStyle = error
     ? "border-red-500 focus:ring-red-400"
-    : "border-gray-700 focus:ring-purple-500";
+    : "border-input focus:ring-primary";
 
   return (
     <div className="flex flex-col mb-4">
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 43710ad..a826e7e 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -4,6 +4,26 @@
 
 @layer base {
   :root {
+    /* Light mode */
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 96.5%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 217.2 91.2% 59.8%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    /* Dark mode */
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 9f0d486..727e0d5 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
+  darkMode: "class",
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",