From 4b568c98f07b423710e1c1f92241bb697e407fa6 Mon Sep 17 00:00:00 2001
From: Prakhar Sapre <prakhar.sapre2610@gmail.com>
Date: Sat, 18 Jan 2025 14:35:15 +0530
Subject: [PATCH] Fix chart legend font color issue after theme change

---
 webapp/src/components/dashboard.tsx | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/dashboard.tsx b/webapp/src/components/dashboard.tsx
index 2852b446e..6c7891c70 100644
--- a/webapp/src/components/dashboard.tsx
+++ b/webapp/src/components/dashboard.tsx
@@ -117,10 +117,28 @@ export function Dashboard() {
   );
 }
 
+function updateLegendColor() {
+    const [color, setColor] = useState(getCSSVar('--semi-color-text-0'));
+
+    useEffect(() => {
+        const handleThemeChange = () => {
+            setColor(getCSSVar('--semi-color-text-0'));
+        };
+
+        const observer = new MutationObserver(handleThemeChange);
+        observer.observe(document.body, { attributes: true, attributeFilter: ["theme-mode"] });
+        return () => observer.disconnect();
+
+    }, []);
+
+    return color;
+}
+
 function LineChart(props: {
   data: Record<string, LineChartData[]>
 }) {
   const chartRef = useRef(null);
+  const legendColor = updateLegendColor();
 
   useEffect(() => {
     const chartInstance = echarts.init(chartRef.current);
@@ -150,7 +168,7 @@ function LineChart(props: {
     const option = {
       legend: {
         textStyle: {
-          color: getCSSVar('--semi-color-text-0')
+          color: legendColor
         }
       },
       xAxis: {
@@ -180,7 +198,7 @@ function LineChart(props: {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     chartInstance.setOption(option);
-  }, [props.data]);
+  }, [props.data, legendColor]);
 
   return (
     <div style={{ textAlign: "center" }}>
@@ -193,6 +211,7 @@ function DistributionChart(props: {
   data: DistributionChartData[]
 }) {
   const chartRef = useRef(null);
+  const legendColor = updateLegendColor();
 
   useEffect(() => {
     const chartInstance = echarts.init(chartRef.current);
@@ -202,7 +221,7 @@ function DistributionChart(props: {
       },
       legend: {
         textStyle: {
-          color: getCSSVar('--semi-color-text-0')
+          color: legendColor
         }
       },
       series: [
@@ -239,7 +258,7 @@ function DistributionChart(props: {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     chartInstance.setOption(option);
-  }, [props.data]);
+  }, [props.data, legendColor]);
 
   return (
     <div style={{ textAlign: "center" }}>