dark mode completed

frontend/src/components/analysis/CompositeCurvesChart.tsx

@@ -2,10 +2,13 @@
 
 import Plot from 'react-plotly.js';
 import { useAnalysisStore } from '../../store/analysisStore';
+import { useUIStore } from '../../store/uiStore';
 
 export default function CompositeCurvesChart() {
   const pinchResult = useAnalysisStore((s) => s.pinchResult);
   const showShifted = useAnalysisStore((s) => s.showShifted);
+  const theme = useUIStore((s) => s.theme);
+  const isDark = theme === 'dark';
 
   if (!pinchResult) return null;
 
@@ -34,12 +37,30 @@ export default function CompositeCurvesChart() {
   ];
 
   const layout: any = {
-    title: { text: titleText, font: { size: 14 } },
-    xaxis: { title: 'Enthalpy H (kW)', rangemode: 'tozero' },
-    yaxis: { title: 'Temperature T (°C)', rangemode: 'tozero' },
+    title: { text: titleText, font: { size: 14, color: isDark ? '#F8FAFC' : '#1A1C1E' } },
+    xaxis: { 
+      title: 'Enthalpy H (kW)', 
+      rangemode: 'tozero',
+      gridcolor: isDark ? '#334155' : '#E2E8F0',
+      tickfont: { color: isDark ? '#94A3B8' : '#5F6368' },
+      titlefont: { color: isDark ? '#F8FAFC' : '#1A1C1E' }
+    },
+    yaxis: { 
+      title: 'Temperature T (°C)', 
+      rangemode: 'tozero',
+      gridcolor: isDark ? '#334155' : '#E2E8F0',
+      tickfont: { color: isDark ? '#94A3B8' : '#5F6368' },
+      titlefont: { color: isDark ? '#F8FAFC' : '#1A1C1E' }
+    },
     height: 400,
+    paper_bgcolor: 'rgba(0,0,0,0)',
+    plot_bgcolor: 'rgba(0,0,0,0)',
     margin: { l: 60, r: 20, t: 40, b: 50 },
-    legend: { x: 0.01, y: 0.99, xanchor: 'left', yanchor: 'top' },
+    legend: { 
+      x: 0.01, y: 0.99, 
+      xanchor: 'left', yanchor: 'top',
+      font: { color: isDark ? '#F8FAFC' : '#1A1C1E' }
+    },
     hovermode: 'closest' as const,
     shapes: [
       {
@@ -56,7 +77,7 @@ export default function CompositeCurvesChart() {
         y: pinchResult.pinch_temperature,
         text: `Pinch: ${pinchResult.pinch_temperature.toFixed(1)}°C`,
         showarrow: false,
-        font: { size: 11, color: 'gray' },
+        font: { size: 11, color: isDark ? '#60A5FA' : 'gray' },
       },
     ],
   };

frontend/src/components/analysis/GrandCompositeCurveChart.tsx

@@ -2,9 +2,12 @@
 
 import Plot from 'react-plotly.js';
 import { useAnalysisStore } from '../../store/analysisStore';
+import { useUIStore } from '../../store/uiStore';
 
 export default function GrandCompositeCurveChart() {
   const pinchResult = useAnalysisStore((s) => s.pinchResult);
+  const theme = useUIStore((s) => s.theme);
+  const isDark = theme === 'dark';
 
   if (!pinchResult) return null;
 
@@ -33,10 +36,23 @@ export default function GrandCompositeCurveChart() {
   }
 
   const layout: any = {
-    title: { text: 'Grand Composite Curve', font: { size: 14 } },
-    xaxis: { title: 'Net ΔH (kW)' },
-    yaxis: { title: 'Shifted Temperature (°C)', rangemode: 'tozero' },
+    title: { text: 'Grand Composite Curve', font: { size: 14, color: isDark ? '#F8FAFC' : '#1A1C1E' } },
+    xaxis: { 
+      title: 'Net ΔH (kW)',
+      gridcolor: isDark ? '#334155' : '#E2E8F0',
+      tickfont: { color: isDark ? '#94A3B8' : '#5F6368' },
+      titlefont: { color: isDark ? '#F8FAFC' : '#1A1C1E' }
+    },
+    yaxis: { 
+      title: 'Shifted Temperature (°C)', 
+      rangemode: 'tozero',
+      gridcolor: isDark ? '#334155' : '#E2E8F0',
+      tickfont: { color: isDark ? '#94A3B8' : '#5F6368' },
+      titlefont: { color: isDark ? '#F8FAFC' : '#1A1C1E' }
+    },
     height: 400,
+    paper_bgcolor: 'rgba(0,0,0,0)',
+    plot_bgcolor: 'rgba(0,0,0,0)',
     margin: { l: 60, r: 20, t: 40, b: 50 },
     hovermode: 'closest' as const,
     shapes: [
@@ -51,7 +67,7 @@ export default function GrandCompositeCurveChart() {
         type: 'line',
         x0: 0, x1: 0,
         y0: 0, y1: 1, yref: 'paper',
-        line: { color: 'black', width: 1 },
+        line: { color: isDark ? '#94A3B8' : 'black', width: 1 },
         opacity: 0.3,
       },
     ],
@@ -61,7 +77,7 @@ export default function GrandCompositeCurveChart() {
         y: pinchResult.pinch_temperature,
         text: `Pinch: ${pinchResult.pinch_temperature.toFixed(1)}°C`,
         showarrow: false,
-        font: { size: 11, color: 'gray' },
+        font: { size: 11, color: isDark ? '#60A5FA' : 'gray' },
       },
     ],
   };

frontend/src/components/analysis/HPIChart.tsx

@@ -2,6 +2,7 @@
 
 import Plot from 'react-plotly.js';
 import { useAnalysisStore } from '../../store/analysisStore';
+import { useUIStore } from '../../store/uiStore';
 
 const HP_COLORS = [
   '#00CC96', '#AB63FA', '#FFA15A', '#19D3F3',
@@ -12,6 +13,8 @@ export default function HPIChart() {
   const hpiResult = useAnalysisStore((s) => s.hpiResult);
   const pinchResult = useAnalysisStore((s) => s.pinchResult);
   const selectedHPTypes = useAnalysisStore((s) => s.selectedHPTypes);
+  const theme = useUIStore((s) => s.theme);
+  const isDark = theme === 'dark';
 
   if (!hpiResult || !pinchResult) return null;
 
@@ -87,17 +90,30 @@ export default function HPIChart() {
   });
 
   const layout: any = {
-    title: { text: 'Heat Pump Integration - Grand Composite Curve', font: { size: 14 } },
-    xaxis: { title: 'Net ΔH (kW)' },
-    yaxis: { title: 'Shifted Temperature (°C)', rangemode: 'tozero' },
+    title: { text: 'Heat Pump Integration - Grand Composite Curve', font: { size: 14, color: isDark ? '#F8FAFC' : '#1A1C1E' } },
+    xaxis: { 
+      title: 'Net ΔH (kW)',
+      gridcolor: isDark ? '#334155' : '#E2E8F0',
+      tickfont: { color: isDark ? '#94A3B8' : '#5F6368' },
+      titlefont: { color: isDark ? '#F8FAFC' : '#1A1C1E' }
+    },
+    yaxis: { 
+      title: 'Shifted Temperature (°C)', 
+      rangemode: 'tozero',
+      gridcolor: isDark ? '#334155' : '#E2E8F0',
+      tickfont: { color: isDark ? '#94A3B8' : '#5F6368' },
+      titlefont: { color: isDark ? '#F8FAFC' : '#1A1C1E' }
+    },
     height: 400,
+    paper_bgcolor: 'rgba(0,0,0,0)',
+    plot_bgcolor: 'rgba(0,0,0,0)',
     margin: { l: 220, r: 20, t: 40, b: 50 },
     hovermode: 'closest' as const,
     showlegend: true,
     legend: { 
       x: -0.15, y: 1.0, 
       xanchor: 'right', yanchor: 'top',
-      font: { size: 10 },
+      font: { size: 10, color: isDark ? '#F8FAFC' : '#1A1C1E' },
       itemsizing: 'constant'
     },
     shapes: [
@@ -112,7 +128,7 @@ export default function HPIChart() {
         type: 'line',
         x0: 0, x1: 0,
         y0: 0, y1: 1, yref: 'paper',
-        line: { color: 'black', width: 1 },
+        line: { color: isDark ? '#94A3B8' : 'black', width: 1 },
         opacity: 0.3,
       },
     ],
@@ -122,7 +138,7 @@ export default function HPIChart() {
         y: pinchResult.pinch_temperature,
         text: `Pinch: ${pinchResult.pinch_temperature.toFixed(1)}°C`,
         showarrow: false,
-        font: { size: 11, color: 'gray' },
+        font: { size: 11, color: isDark ? '#60A5FA' : 'gray' },
       },
     ],
   };

frontend/src/pages/PotentialAnalysisPage.css

@@ -482,7 +482,7 @@
 }
 
 /* ---------- Dark mode overrides ---------- */
-.dark .pa-metric-hot      { background: #3e1c1c !important; border-color: #c62828 !important; }
-.dark .pa-metric-cold     { background: #1c2a3e !important; border-color: #1565c0 !important; }
-.dark .pa-metric-pinch    { background: #2a1c3e !important; border-color: #7b1fa2 !important; }
-.dark .pa-metric-recovery { background: #1c3e1c !important; border-color: #2e7d32 !important; }
+.dark .pa-metric-hot      { border-color: #ef4444 !important; background: rgba(239, 68, 68, 0.1) !important; }
+.dark .pa-metric-cold     { border-color: #3b82f6 !important; background: rgba(59, 130, 246, 0.1) !important; }
+.dark .pa-metric-pinch    { border-color: #a855f7 !important; background: rgba(168, 85, 247, 0.1) !important; }
+.dark .pa-metric-recovery { border-color: #22c55e !important; background: rgba(34, 197, 94, 0.1) !important; }