Fix charts dark mode (fix #1288)

traccar · Oct 30, 2024 · 05981a2 · 05981a2
1 parent 363d8c3
commit 05981a2
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/src/reports/ChartReportPage.jsx b/src/reports/ChartReportPage.jsx
@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 import React, { useState } from 'react';
 import {
-  FormControl, InputLabel, Select, MenuItem,
+  FormControl, InputLabel, Select, MenuItem, useTheme,
 } from '@mui/material';
 import {
   CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis,
@@ -21,6 +21,7 @@ import useReportStyles from './common/useReportStyles';
 
 const ChartReportPage = () => {
   const classes = useReportStyles();
+  const theme = useTheme();
   const t = useTranslation();
 
   const positionAttributes = usePositionAttributes(t);
@@ -141,23 +142,26 @@ const ChartReportPage = () => {
               }}
             >
               <XAxis
+                stroke={theme.palette.text.primary}
                 dataKey={timeType}
                 type="number"
                 tickFormatter={(value) => formatTime(value, 'time')}
                 domain={['dataMin', 'dataMax']}
                 scale="time"
               />
               <YAxis
+                stroke={theme.palette.text.primary}
                 type="number"
                 tickFormatter={(value) => value.toFixed(2)}
                 domain={[minValue - valueRange / 5, maxValue + valueRange / 5]}
               />
-              <CartesianGrid strokeDasharray="3 3" />
+              <CartesianGrid stroke={theme.palette.divider} strokeDasharray="3 3" />
               <Tooltip
+                contentStyle={{ backgroundColor: theme.palette.background.default, color: theme.palette.text.primary }}
                 formatter={(value, key) => [value, positionAttributes[key]?.name || key]}
                 labelFormatter={(value) => formatTime(value, 'seconds')}
               />
-              <Line type="monotone" dataKey={type} />
+              <Line type="monotone" dataKey={type} stroke={theme.palette.primary.main} />
             </LineChart>
           </ResponsiveContainer>
         </div>