diff --git a/components/charts/StatusMahasiswaFilterChart.tsx b/components/charts/StatusMahasiswaFilterChart.tsx
index 34c465b..506a951 100644
--- a/components/charts/StatusMahasiswaFilterChart.tsx
+++ b/components/charts/StatusMahasiswaFilterChart.tsx
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatus }: Props) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [data, setData] = useState<StatusMahasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -76,7 +76,7 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
       toolbar: {
         show: true,
       },
-      background: theme === 'dark' ? '#0F172B' : '#fff',
+      background: theme === 'dark' || systemTheme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
@@ -91,7 +91,7 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
       },
       style: {
         fontSize: '12px',
-        colors: [theme === 'dark' ? '#fff' : '#000']
+        colors: [theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000']
       }
     },
     stroke: {
@@ -106,13 +106,13 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       }
     },
@@ -122,13 +122,13 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
-          color: theme === 'dark' ? '#fff' : '#000'
+          color: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       labels: {
         style: {
           fontSize: '12px',
-          colors: theme === 'dark' ? '#fff' : '#000'
+          colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
         }
       },
       min:0,
@@ -147,12 +147,12 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
         horizontal: 10,
       },
       labels: {
-        colors: theme === 'dark' ? '#fff' : '#000'
+        colors: theme === 'dark' || systemTheme === 'dark' ? '#fff' : '#000'
       }
     },
     colors: ['#3B82F6', '#EC4899'],
     tooltip: {
-      theme: theme === 'dark' ? 'dark' : 'light',
+      theme: theme === 'dark' || systemTheme === 'dark' ? 'dark' : 'light',
       y: {
         formatter: function (val: number) {
           return val + " mahasiswa";