Change color

components/charts/TingkatPrestasiPieChart.tsx

@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPrestasi }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<TingkatPrestasiData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -72,7 +72,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
   const chartOptions: ApexOptions = {
     chart: {
       type: 'pie',
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
       toolbar: {
         show: true,
         tools: {
@@ -99,7 +99,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
         horizontal: 10
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     dataLabels: {
@@ -118,7 +118,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
       }
     },
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa"
@@ -171,14 +171,14 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
               options={chartOptions}
               series={series}
               type="pie"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>