Changed chart's color by theme

frontend/src/app/[locale]/projects/[projectId]/home/TestPriorityDonutChart.tsx

@@ -9,11 +9,13 @@ const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 type Props = {
   priorityCounts: CasePriorityCountType[];
   messages: HomeMessages;
+  theme: string;
 };
 
 export default function TestPriorityDonutChart({
   priorityCounts,
   messages,
+  theme,
 }: Props) {
   const [chartData, setChartData] = useState({
     series: [],
@@ -33,16 +35,27 @@ export default function TestPriorityDonutChart({
 
         const labels = priorities.map((entry) => messages[entry.uid]);
         const colors = priorities.map((entry) => entry.chartColor);
+        const legend = {
+          labels: {
+            colors: priorities.map((entry) => {
+              if (theme === "light") {
+                return "black";
+              } else {
+                return "white";
+              }
+            }),
+          },
+        };
 
         setChartData({
           series,
-          options: { labels, colors },
+          options: { labels, colors, legend },
         });
       }
     };
 
     updateChartDate();
-  }, [priorityCounts]);
+  }, [priorityCounts, theme]);
 
   return (
     <Chart

frontend/src/app/[locale]/projects/[projectId]/home/TestProgressColumnChart.tsx

@@ -8,11 +8,13 @@ const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 type Props = {
   progressSeries: ProgressSeriesType[];
   progressCategories: string[];
+  theme: string;
 };
 
 export default function TestProgressBarChart({
   progressSeries,
   progressCategories,
+  theme,
 }: Props) {
   const [chartData, setChartData] = useState({
     series: [],
@@ -25,6 +27,16 @@ export default function TestProgressBarChart({
   useEffect(() => {
     const updateChartDate = () => {
       if (progressSeries) {
+        const legendsLabelColors = testRunCaseStatus.map((itr) => {
+          if (theme === "light") {
+            return "black";
+          } else {
+            return "white";
+          }
+        });
+
+        const xaxisLabelColor = theme === "light" ? "black" : "white";
+
         setChartData({
           series: progressSeries,
           options: {
@@ -36,6 +48,9 @@ export default function TestProgressBarChart({
             },
             legend: {
               position: "right",
+              labels: {
+                colors: legendsLabelColors,
+              },
             },
             colors: testRunCaseStatus.map((itr) => {
               return itr.chartColor;
@@ -43,6 +58,14 @@ export default function TestProgressBarChart({
             xaxis: {
               type: "datetime",
               categories: progressCategories,
+              labels: {
+                style: {
+                  colors: xaxisLabelColor,
+                },
+              },
+            },
+            tooltip: {
+              theme: theme,
             },
           },
         });
@@ -50,7 +73,7 @@ export default function TestProgressBarChart({
     };
 
     updateChartDate();
-  }, [progressSeries, progressCategories]);
+  }, [progressSeries, progressCategories, theme]);
 
   return (
     <Chart

frontend/src/app/[locale]/projects/[projectId]/home/TestTypesDonutChart.tsx

@@ -9,9 +9,14 @@ const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 type Props = {
   typesCounts: CaseTypeCountType[];
   messages: HomeMessages;
+  theme: string;
 };
 
-export default function TestTypesDonutChart({ typesCounts, messages }: Props) {
+export default function TestTypesDonutChart({
+  typesCounts,
+  messages,
+  theme,
+}: Props) {
   const [chartData, setChartData] = useState({
     series: [],
     options: {
@@ -30,16 +35,27 @@ export default function TestTypesDonutChart({ typesCounts, messages }: Props) {
 
         const labels = testTypes.map((entry) => messages[entry.uid]);
         const colors = testTypes.map((entry) => entry.chartColor);
+        const legend = {
+          labels: {
+            colors: testTypes.map((entry) => {
+              if (theme === "light") {
+                return "black";
+              } else {
+                return "white";
+              }
+            }),
+          },
+        };
 
         setChartData({
           series,
-          options: { labels, colors },
+          options: { labels, colors, legend },
         });
       }
     };
 
     updateChartDate();
-  }, [typesCounts]);
+  }, [typesCounts, theme]);
 
   return (
     <Chart

frontend/src/app/[locale]/projects/[projectId]/home/home.tsx

@@ -17,6 +17,7 @@ import TestTypesChart from "./TestTypesDonutChart";
 import TestPriorityChart from "./TestPriorityDonutChart";
 import TestProgressBarChart from "./TestProgressColumnChart";
 import Config from "@/config/config";
+import { useTheme } from "next-themes";
 const apiServer = Config.apiServer;
 
 async function fetchProject(url) {
@@ -45,6 +46,7 @@ type Props = {
 };
 
 export function Home({ projectId, messages }: Props) {
+  const { theme, setTheme } = useTheme();
   const [project, setProject] = useState({
     name: "",
     detail: "",
@@ -123,7 +125,10 @@ export function Home({ projectId, messages }: Props) {
       </div>
 
       {project.detail && (
-        <Card className="mt-3 bg-neutral-100" shadow="none">
+        <Card
+          className="mt-3 bg-neutral-100 dark:bg-neutral-700 dark:text-white"
+          shadow="none"
+        >
           <CardBody>{project.detail}</CardBody>
         </Card>
       )}
@@ -134,6 +139,7 @@ export function Home({ projectId, messages }: Props) {
         <TestProgressBarChart
           progressSeries={progressSeries}
           progressCategories={progressCategories}
+          theme={theme}
         />
       </div>
 
@@ -142,13 +148,18 @@ export function Home({ projectId, messages }: Props) {
       <div className="flex pb-20">
         <div style={{ width: "32rem", height: "18rem" }}>
           <h3>{messages.byType}</h3>
-          <TestTypesChart typesCounts={typesCounts} messages={messages} />
+          <TestTypesChart
+            typesCounts={typesCounts}
+            messages={messages}
+            theme={theme}
+          />
         </div>
         <div style={{ width: "30rem", height: "18rem" }}>
           <h3>{messages.byPriority}</h3>
           <TestPriorityChart
             priorityCounts={priorityCounts}
             messages={messages}
+            theme={theme}
           />
         </div>
       </div>

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