feat(dependency-graph): add light mode support

DevanshuNEU · DevanshuNEU · commit f6cd0de4e8a9 · 2026-01-27T15:27:35.000-05:00
diff --git a/frontend/src/components/DependencyGraph/GraphNode.tsx b/frontend/src/components/DependencyGraph/GraphNode.tsx
@@ -30,29 +30,29 @@ const FILE_ICONS: Record<string, typeof FileCode2> = {
 }
 
 const LANGUAGE_COLORS: Record<string, string> = {
-  python: 'text-blue-400',
-  javascript: 'text-yellow-400',
-  typescript: 'text-blue-500',
-  json: 'text-zinc-400',
-  yaml: 'text-zinc-400',
-  config: 'text-zinc-400',
-  test: 'text-purple-400',
-  unknown: 'text-zinc-500',
+  python: 'text-blue-500 dark:text-blue-400',
+  javascript: 'text-yellow-600 dark:text-yellow-400',
+  typescript: 'text-blue-600 dark:text-blue-500',
+  json: 'text-zinc-500 dark:text-zinc-400',
+  yaml: 'text-zinc-500 dark:text-zinc-400',
+  config: 'text-zinc-500 dark:text-zinc-400',
+  test: 'text-purple-500 dark:text-purple-400',
+  unknown: 'text-zinc-400 dark:text-zinc-500',
 }
 
 const STATE_STYLES: Record<GraphNodeData['state'], string> = {
-  default: 'border-zinc-700 bg-zinc-900/90',
-  selected: 'border-indigo-500 bg-zinc-900 ring-2 ring-indigo-500/50 shadow-lg shadow-indigo-500/20',
-  direct: 'border-rose-500 bg-zinc-900 ring-1 ring-rose-500/30',
-  transitive: 'border-amber-500 bg-zinc-900 ring-1 ring-amber-500/30',
-  dimmed: 'border-zinc-800 bg-zinc-900/50 opacity-40',
+  default: 'border-zinc-300 bg-white dark:border-zinc-700 dark:bg-zinc-900/90',
+  selected: 'border-indigo-500 bg-white dark:bg-zinc-900 ring-2 ring-indigo-500/50 shadow-lg shadow-indigo-500/20',
+  direct: 'border-rose-500 bg-white dark:bg-zinc-900 ring-1 ring-rose-500/30',
+  transitive: 'border-amber-500 bg-white dark:bg-zinc-900 ring-1 ring-amber-500/30',
+  dimmed: 'border-zinc-200 bg-zinc-50/50 opacity-40 dark:border-zinc-800 dark:bg-zinc-900/50',
 }
 
 const RISK_BADGES: Record<RiskLevel, { bg: string; text: string; label: string }> = {
-  low: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', label: 'Low' },
-  medium: { bg: 'bg-yellow-500/10', text: 'text-yellow-400', label: 'Med' },
-  high: { bg: 'bg-orange-500/10', text: 'text-orange-400', label: 'High' },
-  critical: { bg: 'bg-rose-500/10', text: 'text-rose-400', label: 'Crit' },
+  low: { bg: 'bg-emerald-100 dark:bg-emerald-500/10', text: 'text-emerald-600 dark:text-emerald-400', label: 'Low' },
+  medium: { bg: 'bg-yellow-100 dark:bg-yellow-500/10', text: 'text-yellow-600 dark:text-yellow-400', label: 'Med' },
+  high: { bg: 'bg-orange-100 dark:bg-orange-500/10', text: 'text-orange-600 dark:text-orange-400', label: 'High' },
+  critical: { bg: 'bg-rose-100 dark:bg-rose-500/10', text: 'text-rose-600 dark:text-rose-400', label: 'Crit' },
 }
 
 function getFileType(path: string, language: string): string {
@@ -70,7 +70,7 @@ function getFileType(path: string, language: string): string {
   return 'unknown'
 }
 
-function GraphNodeComponent({ data, selected }: NodeProps<GraphNodeData>) {
+function GraphNodeComponent({ data }: NodeProps<GraphNodeData>) {
   const fileType = getFileType(data.fullPath, data.language)
   const Icon = FILE_ICONS[fileType] || FILE_ICONS.unknown
   const iconColor = LANGUAGE_COLORS[fileType] || LANGUAGE_COLORS.unknown
@@ -79,7 +79,11 @@ function GraphNodeComponent({ data, selected }: NodeProps<GraphNodeData>) {
 
   return (
     <>
-      <Handle type="target" position={Position.Left} className="!bg-zinc-600 !w-2 !h-2 !border-0" />
+      <Handle 
+        type="target" 
+        position={Position.Left} 
+        className="!bg-zinc-400 dark:!bg-zinc-600 !w-2 !h-2 !border-0" 
+      />
       
       <div
         className={cn(
@@ -89,10 +93,13 @@ function GraphNodeComponent({ data, selected }: NodeProps<GraphNodeData>) {
           data.isEntryPoint && 'border-l-4 border-l-emerald-500'
         )}
       >
-        {/* Header row: icon + filename + risk badge */}
+        {/* Header row */}
         <div className="flex items-center gap-2 mb-1">
           <Icon className={cn('w-4 h-4 flex-shrink-0', iconColor)} />
-          <span className="font-semibold text-sm text-zinc-100 truncate flex-1" title={data.fullPath}>
+          <span 
+            className="font-semibold text-sm text-zinc-800 dark:text-zinc-100 truncate flex-1" 
+            title={data.fullPath}
+          >
             {data.label}
           </span>
           {data.dependentCount > 0 && (
@@ -103,11 +110,12 @@ function GraphNodeComponent({ data, selected }: NodeProps<GraphNodeData>) {
         </div>
 
         {/* Stats row */}
-        <div className="flex items-center gap-3 text-[11px] text-zinc-400">
+        <div className="flex items-center gap-3 text-[11px] text-zinc-500 dark:text-zinc-400">
           <span className={cn(
             'font-medium',
-            data.dependentCount >= 15 ? 'text-rose-400' : 
-            data.dependentCount >= 5 ? 'text-amber-400' : 'text-zinc-400'
+            data.dependentCount >= 15 ? 'text-rose-600 dark:text-rose-400' : 
+            data.dependentCount >= 5 ? 'text-amber-600 dark:text-amber-400' : 
+            'text-zinc-500 dark:text-zinc-400'
           )}>
             {data.dependentCount} dependents
           </span>
@@ -122,7 +130,11 @@ function GraphNodeComponent({ data, selected }: NodeProps<GraphNodeData>) {
         </div>
       </div>
 
-      <Handle type="source" position={Position.Right} className="!bg-zinc-600 !w-2 !h-2 !border-0" />
+      <Handle 
+        type="source" 
+        position={Position.Right} 
+        className="!bg-zinc-400 dark:!bg-zinc-600 !w-2 !h-2 !border-0" 
+      />
     </>
   )
 }
diff --git a/frontend/src/components/DependencyGraph/GraphToolbar.tsx b/frontend/src/components/DependencyGraph/GraphToolbar.tsx
@@ -24,13 +24,13 @@ function GraphToolbarComponent({
   onFullscreen,
 }: GraphToolbarProps) {
   return (
-    <div className="flex items-center justify-between gap-4 px-4 py-2 bg-zinc-900/80 border-b border-zinc-800 backdrop-blur-sm">
+    <div className="flex items-center justify-between gap-4 px-4 py-2 bg-white/80 dark:bg-zinc-900/80 border-b border-zinc-200 dark:border-zinc-800 backdrop-blur-sm">
       {/* Left: Stats */}
       <div className="flex items-center gap-4 text-sm">
-        <span className="text-zinc-400">
-          Showing <span className="text-zinc-200 font-medium">{visibleFiles}</span>
+        <span className="text-zinc-500 dark:text-zinc-400">
+          Showing <span className="text-zinc-700 dark:text-zinc-200 font-medium">{visibleFiles}</span>
           {!showAll && totalFiles > visibleFiles && (
-            <span className="text-zinc-500"> of {totalFiles}</span>
+            <span className="text-zinc-400 dark:text-zinc-500"> of {totalFiles}</span>
           )}
           {' '}files
         </span>
@@ -44,7 +44,7 @@ function GraphToolbarComponent({
             'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors',
             showAll 
               ? 'bg-indigo-600 text-white' 
-              : 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700'
+              : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700'
           )}
         >
           <Filter className="w-3.5 h-3.5" />
@@ -56,8 +56,8 @@ function GraphToolbarComponent({
           className={cn(
             'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors',
             showTests 
-              ? 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700'
-              : 'bg-zinc-800/50 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300'
+              ? 'bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700'
+              : 'bg-zinc-50 dark:bg-zinc-800/50 text-zinc-400 dark:text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-600 dark:hover:text-zinc-300'
           )}
         >
           {showTests ? <Eye className="w-3.5 h-3.5" /> : <EyeOff className="w-3.5 h-3.5" />}
@@ -69,19 +69,19 @@ function GraphToolbarComponent({
       <div className="flex items-center gap-1">
         <button
           onClick={onResetView}
-          className="p-2 hover:bg-zinc-800 rounded-md transition-colors group"
+          className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md transition-colors group"
           title="Reset View"
         >
-          <RotateCcw className="w-4 h-4 text-zinc-500 group-hover:text-zinc-300" />
+          <RotateCcw className="w-4 h-4 text-zinc-400 dark:text-zinc-500 group-hover:text-zinc-600 dark:group-hover:text-zinc-300" />
         </button>
         
         {onFullscreen && (
           <button
             onClick={onFullscreen}
-            className="p-2 hover:bg-zinc-800 rounded-md transition-colors group"
+            className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md transition-colors group"
             title="Fullscreen"
           >
-            <Maximize2 className="w-4 h-4 text-zinc-500 group-hover:text-zinc-300" />
+            <Maximize2 className="w-4 h-4 text-zinc-400 dark:text-zinc-500 group-hover:text-zinc-600 dark:group-hover:text-zinc-300" />
           </button>
         )}
       </div>
diff --git a/frontend/src/components/DependencyGraph/ImpactPanel.tsx b/frontend/src/components/DependencyGraph/ImpactPanel.tsx
@@ -15,30 +15,30 @@ interface ImpactPanelProps {
 
 const RISK_CONFIG: Record<RiskLevel, { bg: string; border: string; text: string; icon: string; label: string }> = {
   low: { 
-    bg: 'bg-emerald-500/10', 
-    border: 'border-emerald-500/30',
-    text: 'text-emerald-400', 
+    bg: 'bg-emerald-50 dark:bg-emerald-500/10', 
+    border: 'border-emerald-200 dark:border-emerald-500/30',
+    text: 'text-emerald-600 dark:text-emerald-400', 
     icon: '✓',
     label: 'Low Risk'
   },
   medium: { 
-    bg: 'bg-yellow-500/10', 
-    border: 'border-yellow-500/30',
-    text: 'text-yellow-400', 
+    bg: 'bg-yellow-50 dark:bg-yellow-500/10', 
+    border: 'border-yellow-200 dark:border-yellow-500/30',
+    text: 'text-yellow-600 dark:text-yellow-400', 
     icon: '⚠',
     label: 'Medium Risk'
   },
   high: { 
-    bg: 'bg-orange-500/10', 
-    border: 'border-orange-500/30',
-    text: 'text-orange-400', 
+    bg: 'bg-orange-50 dark:bg-orange-500/10', 
+    border: 'border-orange-200 dark:border-orange-500/30',
+    text: 'text-orange-600 dark:text-orange-400', 
     icon: '⚠',
     label: 'High Risk'
   },
   critical: { 
-    bg: 'bg-rose-500/10', 
-    border: 'border-rose-500/30',
-    text: 'text-rose-400', 
+    bg: 'bg-rose-50 dark:bg-rose-500/10', 
+    border: 'border-rose-200 dark:border-rose-500/30',
+    text: 'text-rose-600 dark:text-rose-400', 
     icon: '🔥',
     label: 'Critical'
   },
@@ -61,15 +61,15 @@ function FileListItem({
       onClick={onClick}
       onMouseEnter={() => onHover(true)}
       onMouseLeave={() => onHover(false)}
-      className="w-full text-left px-3 py-2 rounded-md hover:bg-zinc-800 transition-colors group"
+      className="w-full text-left px-3 py-2 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors group"
     >
       <div className="flex items-center gap-2">
-        <FileCode2 className="w-3.5 h-3.5 text-zinc-500 flex-shrink-0" />
-        <span className="text-sm text-zinc-200 truncate font-medium">{fileName}</span>
-        <ExternalLink className="w-3 h-3 text-zinc-600 opacity-0 group-hover:opacity-100 transition-opacity ml-auto" />
+        <FileCode2 className="w-3.5 h-3.5 text-zinc-400 dark:text-zinc-500 flex-shrink-0" />
+        <span className="text-sm text-zinc-700 dark:text-zinc-200 truncate font-medium">{fileName}</span>
+        <ExternalLink className="w-3 h-3 text-zinc-400 dark:text-zinc-600 opacity-0 group-hover:opacity-100 transition-opacity ml-auto" />
       </div>
       {dirPath && (
-        <div className="text-[10px] text-zinc-500 mt-0.5 truncate pl-5">{dirPath}</div>
+        <div className="text-[10px] text-zinc-400 dark:text-zinc-500 mt-0.5 truncate pl-5">{dirPath}</div>
       )}
     </button>
   )
@@ -95,26 +95,26 @@ function CollapsibleSection({
   const [isOpen, setIsOpen] = useState(defaultOpen)
 
   const variantStyles = {
-    direct: 'text-rose-400',
-    transitive: 'text-amber-400',
-    default: 'text-zinc-300',
+    direct: 'text-rose-600 dark:text-rose-400',
+    transitive: 'text-amber-600 dark:text-amber-400',
+    default: 'text-zinc-700 dark:text-zinc-300',
   }
 
   if (count === 0) return null
 
   return (
-    <div className="border-t border-zinc-800 pt-3">
+    <div className="border-t border-zinc-200 dark:border-zinc-800 pt-3">
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="w-full flex items-center gap-2 text-left hover:bg-zinc-800/50 -mx-2 px-2 py-1 rounded transition-colors"
+        className="w-full flex items-center gap-2 text-left hover:bg-zinc-100 dark:hover:bg-zinc-800/50 -mx-2 px-2 py-1 rounded transition-colors"
       >
         {isOpen ? (
-          <ChevronDown className="w-4 h-4 text-zinc-500" />
+          <ChevronDown className="w-4 h-4 text-zinc-400 dark:text-zinc-500" />
         ) : (
-          <ChevronRight className="w-4 h-4 text-zinc-500" />
+          <ChevronRight className="w-4 h-4 text-zinc-400 dark:text-zinc-500" />
         )}
         <span className={cn('text-sm font-medium', variantStyles[variant])}>{title}</span>
-        <span className="text-xs text-zinc-500 ml-auto">{count}</span>
+        <span className="text-xs text-zinc-400 dark:text-zinc-500 ml-auto">{count}</span>
       </button>
 
       {isOpen && (
@@ -146,23 +146,23 @@ function ImpactPanelComponent({
   const totalDependents = impact.allDependents.length
 
   return (
-    <div className="w-80 bg-zinc-900 border-l border-zinc-800 h-full flex flex-col animate-in slide-in-from-right duration-200">
+    <div className="w-80 bg-white dark:bg-zinc-900 border-l border-zinc-200 dark:border-zinc-800 h-full flex flex-col animate-in slide-in-from-right duration-200">
       {/* Header */}
-      <div className="p-4 border-b border-zinc-800">
+      <div className="p-4 border-b border-zinc-200 dark:border-zinc-800">
         <div className="flex items-start justify-between gap-2">
           <div className="min-w-0 flex-1">
-            <h3 className="font-semibold text-zinc-100 truncate" title={fullPath}>
+            <h3 className="font-semibold text-zinc-800 dark:text-zinc-100 truncate" title={fullPath}>
               {fileName}
             </h3>
-            <p className="text-xs text-zinc-500 truncate mt-0.5" title={fullPath}>
+            <p className="text-xs text-zinc-400 dark:text-zinc-500 truncate mt-0.5" title={fullPath}>
               {fullPath}
             </p>
           </div>
           <button
             onClick={onClose}
-            className="p-1 hover:bg-zinc-800 rounded transition-colors flex-shrink-0"
+            className="p-1 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded transition-colors flex-shrink-0"
           >
-            <X className="w-4 h-4 text-zinc-400" />
+            <X className="w-4 h-4 text-zinc-500 dark:text-zinc-400" />
           </button>
         </div>
 
@@ -174,7 +174,7 @@ function ImpactPanelComponent({
           <span className="text-lg">{risk.icon}</span>
           <div>
             <div className={cn('font-semibold text-sm', risk.text)}>{risk.label}</div>
-            <div className="text-xs text-zinc-400">
+            <div className="text-xs text-zinc-500 dark:text-zinc-400">
               {totalDependents === 0 
                 ? 'No files depend on this'
                 : `${totalDependents} file${totalDependents === 1 ? '' : 's'} will be affected`
@@ -185,15 +185,15 @@ function ImpactPanelComponent({
 
         {/* Warning for critical files */}
         {impact.riskLevel === 'critical' && (
-          <div className="mt-2 flex items-start gap-2 text-xs text-rose-400 bg-rose-500/10 px-3 py-2 rounded-lg">
+          <div className="mt-2 flex items-start gap-2 text-xs text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-500/10 px-3 py-2 rounded-lg">
             <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
             <span>Changes to this file have high blast radius. Test thoroughly.</span>
           </div>
         )}
 
         {/* Entry Point indicator */}
         {impact.isEntryPoint && (
-          <div className="mt-2 flex items-center gap-2 text-xs text-emerald-400 bg-emerald-500/10 px-3 py-2 rounded-lg">
+          <div className="mt-2 flex items-center gap-2 text-xs text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10 px-3 py-2 rounded-lg">
             <span>📍</span>
             <span>Entry point - this file is a root of the dependency tree</span>
           </div>
@@ -225,7 +225,7 @@ function ImpactPanelComponent({
 
       {/* Actions Footer */}
       {onAnalyzeInSearch && (
-        <div className="p-4 border-t border-zinc-800">
+        <div className="p-4 border-t border-zinc-200 dark:border-zinc-800">
           <button
             onClick={() => onAnalyzeInSearch(fullPath)}
             className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium rounded-lg transition-colors"
diff --git a/frontend/src/components/DependencyGraph/index.tsx b/frontend/src/components/DependencyGraph/index.tsx
