From c847ed99eb96ee1b69acebf9198976abf98bcad6 Mon Sep 17 00:00:00 2001
From: Fawaz <biliaminufawas44@gmail.com>
Date: Thu, 30 Jul 2026 13:00:06 +0100
Subject: [PATCH 1/2] fix: make InteractiveChart tooltip dark-mode aware
 (#1043)

---
 src/components/charts/InteractiveChart.tsx | 39 ++++++++++++----------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/charts/InteractiveChart.tsx b/src/components/charts/InteractiveChart.tsx
index 88912aca..7b443059 100644
--- a/src/components/charts/InteractiveChart.tsx
+++ b/src/components/charts/InteractiveChart.tsx
@@ -13,6 +13,7 @@ import {
   Bar,
   Legend,
 } from 'recharts';
+import { useTheme } from '@/hooks/useTheme';
 
 export type ChartType = 'line' | 'area' | 'bar';
 
@@ -37,6 +38,8 @@ export const InteractiveChart: React.FC<InteractiveChartProps> = ({
   syncId,
   className = '',
 }) => {
+  const { resolvedTheme } = useTheme();
+
   // Optimization for large datasets (10k+ points):
   // If data is very large, we can sample it or simplify it before rendering
   // But Recharts handles a few thousand points well. Let's add a simple sampling if data > 1000
@@ -46,6 +49,18 @@ export const InteractiveChart: React.FC<InteractiveChartProps> = ({
     return data.filter((_, index) => index % factor === 0);
   }, [data]);
 
+  // Theme-aware tooltip styles
+  const tooltipStyle = useMemo(() => {
+    const isDark = resolvedTheme === 'dark';
+    return {
+      backgroundColor: isDark ? 'rgba(31, 41, 55, 0.9)' : 'rgba(255, 255, 255, 0.9)',
+      borderRadius: '8px',
+      border: isDark ? '1px solid rgba(75, 85, 99, 0.5)' : 'none',
+      boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+      color: isDark ? '#f3f4f6' : '#1f2937',
+    };
+  }, [resolvedTheme]);
+
   const renderChart = () => {
     switch (type) {
       case 'area':
@@ -55,12 +70,8 @@ export const InteractiveChart: React.FC<InteractiveChartProps> = ({
             <XAxis dataKey={xKey} tick={{ fontSize: 12 }} />
             <YAxis tick={{ fontSize: 12 }} />
             <Tooltip
-              contentStyle={{
-                backgroundColor: 'rgba(255, 255, 255, 0.9)',
-                borderRadius: '8px',
-                border: 'none',
-                boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
-              }}
+              contentStyle={tooltipStyle}
+              itemStyle={tooltipItemStyle}
             />
             <Legend />
             {yKeys.map((yConfig) => (
@@ -84,12 +95,8 @@ export const InteractiveChart: React.FC<InteractiveChartProps> = ({
             <XAxis dataKey={xKey} tick={{ fontSize: 12 }} />
             <YAxis tick={{ fontSize: 12 }} />
             <Tooltip
-              contentStyle={{
-                backgroundColor: 'rgba(255, 255, 255, 0.9)',
-                borderRadius: '8px',
-                border: 'none',
-                boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
-              }}
+              contentStyle={tooltipStyle}
+              itemStyle={tooltipItemStyle}
             />
             <Legend />
             {yKeys.map((yConfig) => (
@@ -111,12 +118,8 @@ export const InteractiveChart: React.FC<InteractiveChartProps> = ({
             <XAxis dataKey={xKey} tick={{ fontSize: 12 }} />
             <YAxis tick={{ fontSize: 12 }} />
             <Tooltip
-              contentStyle={{
-                backgroundColor: 'rgba(255, 255, 255, 0.9)',
-                borderRadius: '8px',
-                border: 'none',
-                boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
-              }}
+              contentStyle={tooltipStyle}
+              itemStyle={tooltipItemStyle}
             />
             <Legend />
             {yKeys.map((yConfig) => (

From 5a011aa838ef68779c2bf8532881fa08f1d7043e Mon Sep 17 00:00:00 2001
From: Fawaz <biliaminufawas44@gmail.com>
Date: Thu, 30 Jul 2026 15:12:03 +0100
Subject: [PATCH 2/2] fix: make InteractiveChart tooltip dark-mode aware
 (#1043)

---
 src/components/charts/InteractiveChart.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/charts/InteractiveChart.tsx b/src/components/charts/InteractiveChart.tsx
index 7b443059..dd5588d9 100644
--- a/src/components/charts/InteractiveChart.tsx
+++ b/src/components/charts/InteractiveChart.tsx
@@ -61,6 +61,13 @@ export const InteractiveChart: React.FC<InteractiveChartProps> = ({
     };
   }, [resolvedTheme]);
 
+  const tooltipItemStyle = useMemo(() => {
+    const isDark = resolvedTheme === 'dark';
+    return {
+      color: isDark ? '#f3f4f6' : '#1f2937',
+    };
+  }, [resolvedTheme]);
+
   const renderChart = () => {
     switch (type) {
       case 'area':