feat(ui): improve contributors and dashboard light mode (JhaSourav07#520)

* feat: add dark/light theme support and refine navbar

* fix: improve theme consistency and dashboard UI states

* improve documentation page visual hierarchy and theme consistency

* Improve dark theme contrast and UI surface hierarchy

* feat: improve dashboard light mode UI and contrast

* feat(ui): improve dashboard and contributors light mode

* fix(ui): resolve navbar hydration mismatch

Author: CyraTechZenith

app/(root)/dashboard/[username]/page.tsx

@@ -83,8 +83,7 @@ export default async function DashboardPage({
         <RefreshButton username={username} />
         <Link
           href="/"
-          aria-label="Generate your own dashboard"
-          className="flex items-center gap-2 rounded-xl border border-[rgba(255,255,255,0.15)] bg-black px-4 py-2 text-sm font-semibold text-white transition-all duration-200 hover:bg-white/5 active:scale-[0.98]"
+          className="flex items-center gap-2 rounded-xl border border-black/10 dark:border-[rgba(255,255,255,0.15)] bg-black dark:bg-black px-4 py-2 text-sm font-semibold text-white dark:text-white transition-all duration-200 hover:bg-gray-200 dark:hover:bg-white/10 active:scale-[0.98]"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"

app/(root)/dashboard/error.tsx

@@ -11,29 +11,29 @@ export default function DashboardError({
   reset: () => void;
 }) {
   useEffect(() => {
-    // Log the error to an error reporting service
     console.error(error);
   }, [error]);
 
   const isRateLimit = error.message.includes('API limit') || error.message.includes('rate limit');
+
   const isNotFound = error.message.includes('not found');
 
   return (
     <div className="min-h-[80vh] flex flex-col items-center justify-center p-6 text-center">
-      <div className="p-8 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-xl max-w-md w-full relative overflow-hidden">
-        <div className="absolute -top-20 -right-20 w-40 h-40 bg-pink-500/20 blur-[60px] rounded-full" />
+      <div className="p-8 rounded-3xl bg-white/80 border border-black/10 backdrop-blur-xl dark:bg-white/5 dark:border-white/10 max-w-md w-full relative overflow-hidden shadow-xl dark:shadow-none">
+        <div className="absolute -top-20 -right-20 w-40 h-40 bg-pink-400/10 dark:bg-pink-500/20 blur-[60px] rounded-full" />
 
         <h2 className="text-4xl mb-4">{isNotFound ? '🕵️‍♂️' : isRateLimit ? '⏳' : '⚠️'}</h2>
 
-        <h1 className="text-2xl font-bold text-white mb-2">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
           {isNotFound
             ? 'User Not Found'
             : isRateLimit
               ? 'API Limit Reached'
               : 'Something went wrong'}
         </h1>
 
-        <p className="text-gray-400 mb-8 leading-relaxed">
+        <p className="text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
           {isNotFound
             ? "We couldn't find a GitHub user with that username. Please check the spelling and try again."
             : isRateLimit
@@ -44,10 +44,11 @@ export default function DashboardError({
         <div className="flex flex-col gap-3">
           <button
             onClick={() => reset()}
-            className="w-full py-3 rounded-xl bg-white/10 hover:bg-white/20 text-white font-medium transition-colors"
+            className="w-full py-3 rounded-xl bg-black text-white hover:bg-zinc-800 dark:bg-white/10 dark:hover:bg-white/20 dark:text-white font-medium transition-colors"
           >
             Try again
           </button>
+
           <Link href="/">
             <button className="w-full py-3 rounded-xl bg-gradient-to-r from-cyan-500 to-purple-600 text-white font-bold shadow-lg hover:shadow-cyan-500/25 transition-all">
               Go back home

app/(root)/dashboard/layout.tsx

@@ -3,7 +3,7 @@ import { Toaster } from 'sonner';
 
 export default function DashboardLayout({ children }: { children: ReactNode }) {
   return (
-    <div className="min-h-screen bg-transparent text-white selection:bg-cyan-500/30 font-sans">
+    <div className="min-h-screen bg-transparent text-gray-900 dark:text-white selection:bg-cyan-500/30 font-sans">
       <main className="max-w-[1600px] mx-auto min-h-screen">{children}</main>
 
       <Toaster />

app/components/CustomizeCTA.tsx

@@ -11,7 +11,7 @@ export function CustomizeCTA() {
       transition={{ duration: 0.5, ease: 'easeOut' }}
       className="max-w-4xl mx-auto mb-16"
     >
-      <div className="group relative rounded-[2rem] border border-white/5 bg-[#0a0a0a] overflow-hidden transition-all duration-700 hover:border-white/10">
+      <div className="group relative rounded-[2rem] border border-black/10 bg-white overflow-hidden transition-all duration-700 hover:border-black/20 dark:border-white/5 dark:bg-[#0a0a0a] dark:hover:border-white/10">
         {/* Hover glow layer */}
         <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-700 blur-2xl pointer-events-none" />
 
@@ -24,18 +24,18 @@ export function CustomizeCTA() {
             <p className="text-xs font-bold uppercase tracking-[0.25em] text-emerald-400 mb-3">
               Customization Studio
             </p>
-            <h2 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight mb-3 leading-snug">
+            <h2 className="text-2xl md:text-3xl font-extrabold text-black dark:text-white tracking-tight mb-3 leading-snug">
               Want to fine-tune your monolith?
             </h2>
-            <p className="text-gray-500 text-sm leading-relaxed max-w-lg">
+            <p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed max-w-lg">
               Dial in every pixel — swap accent colors, try a dark or neon theme, toggle logarithmic
               height scaling, and preview changes live before you paste a single line.
             </p>
           </div>
 
           <div className="shrink-0">
             <Link href="/customize" id="open-customization-studio-cta">
-              <span className="relative inline-flex items-center gap-2 px-4 md:px-7 py-4 rounded-2xl font-bold text-sm text-black bg-white hover:scale-[1.03] active:scale-[0.97] transition-transform duration-200 shadow-[0_0_30px_-4px_rgba(255,255,255,0.25)] cursor-pointer select-none">
+              <span className="relative inline-flex items-center gap-2 px-4 md:px-7 py-4 rounded-2xl border border-black/10 dark:border-white/10 font-bold text-sm text-black dark:text-black bg-gray-100 dark:bg-white hover:bg-gray-200 dark:hover:bg-zinc-100 hover:scale-[1.03] active:scale-[0.97] transition-all duration-200 shadow-[0_0_30px_-4px_rgba(255,255,255,0.12)] cursor-pointer select-none">
                 {/* Button shimmer */}
                 <span
                   aria-hidden="true"

app/components/Footer.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 export function Footer() {
   return (
-    <footer className="mt-12 border-t border-white/5 pt-8 text-sm text-white/30">
+    <footer className="mt-12 border-t border-black/10 dark:border-white/5 pt-8 text-sm text-zinc-600 dark:text-white/30 transition-colors">
       <div className="flex flex-col items-center justify-between gap-6 md:flex-row">
         {/* LEFT */}
         <p className="text-center md:text-left">
@@ -11,15 +11,18 @@ export function Footer() {
 
         {/* RIGHT */}
         <div className="flex items-center gap-8">
-          <Link href="/contributors" className="transition-colors hover:text-white">
+          <Link
+            href="/contributors"
+            className="transition-colors hover:text-black dark:hover:text-white"
+          >
             Contributors
           </Link>
 
           <a
             href="https://github.com/JhaSourav07/commitpulse/blob/main/README.md"
             target="_blank"
             rel="noreferrer"
-            className="transition-colors hover:text-white"
+            className="transition-colors hover:text-black dark:hover:text-white"
           >
             Documentation
           </a>

app/components/navbar.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { Menu, X, Activity } from 'lucide-react';
+import { Menu, X, Activity, Moon, Sun } from 'lucide-react';
 import { useGlowEffect } from '@/hooks/useGlowEffect';
 
 function GithubMark() {
@@ -22,9 +22,25 @@ const NAV_LINKS = [
 
 export default function Navbar() {
   const [open, setOpen] = useState(false);
+
+  const [isDark, setIsDark] = useState(() => {
+    if (typeof window === 'undefined') return true;
+
+    return localStorage.getItem('theme') !== 'light';
+  });
+
   const { shellRef, shellVars, handleMouseEnter, handleMouseMove, handleMouseLeave } =
     useGlowEffect();
 
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', isDark);
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+  }, [isDark]);
+
+  const toggleTheme = () => {
+    setIsDark((prev) => !prev);
+  };
+
   useEffect(() => {
     const mediaQuery = window.matchMedia('(min-width: 768px)');
 
@@ -102,6 +118,15 @@ export default function Navbar() {
             </Link>
 
             <div className="hidden items-center gap-3 md:flex">
+              <button
+                type="button"
+                onClick={toggleTheme}
+                className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white transition hover:bg-white/10"
+                aria-label="Toggle theme"
+              >
+                {isDark ? <Sun size={18} /> : <Moon size={18} />}
+              </button>
+
               {NAV_LINKS.map((link) => (
                 <a
                   key={link.href}
@@ -118,7 +143,7 @@ export default function Navbar() {
 
             <button
               type="button"
-              className="inline-flex items-center justify-center rounded-xl border border-white/15 bg-white/5 p-2 text-white/90 transition hover:bg-white/10 md:hidden"
+              className="md:hidden inline-flex items-center justify-center rounded-xl border border-white/15 bg-white/5 p-2 text-white/90 transition hover:bg-white/10"
               aria-label={open ? 'Close menu' : 'Open menu'}
               aria-expanded={open}
               onClick={() => setOpen((prev) => !prev)}

app/contributors/loading.tsx

@@ -1,10 +1,9 @@
 export default function Loading() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-black text-white">
+    <div className="flex min-h-screen items-center justify-center bg-white text-black dark:bg-black dark:text-white transition-colors">
       <div className="flex flex-col items-center gap-4">
         <div className="h-14 w-14 animate-spin rounded-full border-4 border-cyan-400 border-t-transparent" />
-
-        <p className="text-zinc-400">Loading contributors...</p>
+        <p className="text-zinc-500 dark:text-zinc-400">Loading contributors...</p>{' '}
       </div>
     </div>
   );