Changed chart's color by theme

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx

@@ -51,6 +51,7 @@ import {
 } from "../runsControl";
 import { fetchFolders } from "../../folders/foldersControl";
 import { fetchCases } from "../../folders/[folderId]/cases/caseControl";
+import { useTheme } from "next-themes";
 
 const defaultTestRun = {
   id: 0,
@@ -74,6 +75,7 @@ export default function RunEditor({
   messages,
   locale,
 }: Props) {
+  const { theme, setTheme } = useTheme();
   const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
   const [folders, setFolders] = useState([]);
   const [runCases, setRunCases] = useState<RunCaseType[]>([]);
@@ -273,6 +275,7 @@ export default function RunEditor({
               <RunProgressChart
                 statusCounts={runStatusCounts}
                 messages={messages}
+                theme={theme}
               />
             </div>
           </div>

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx

@@ -8,9 +8,14 @@ const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 type Props = {
   statusCounts: RunStatusCountType[];
   messages: RunMessages;
+  theme: string;
 };
 
-export default function RunProgressDounut({ statusCounts, messages }: Props) {
+export default function RunProgressDounut({
+  statusCounts,
+  messages,
+  theme,
+}: Props) {
   const [chartData, setChartData] = useState({
     series: [],
     options: {
@@ -29,16 +34,27 @@ export default function RunProgressDounut({ statusCounts, messages }: Props) {
 
         const labels = testRunCaseStatus.map((entry) => messages[entry.uid]);
         const colors = testRunCaseStatus.map((entry) => entry.chartColor);
+        const legend = {
+          labels: {
+            colors: testRunCaseStatus.map((entry) => {
+              if (theme === "light") {
+                return "black";
+              } else {
+                return "white";
+              }
+            }),
+          },
+        };
 
         setChartData({
           series,
-          options: { labels, colors },
+          options: { labels, colors, legend },
         });
       }
     };
 
     updateChartDate();
-  }, [statusCounts]);
+  }, [statusCounts, theme]);
 
   return (
     <Chart