add light mode

resources/js/Components/Common/Reporting/ReportingPieChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VChart, { THEME_KEY } from 'vue-echarts';
-import { computed, provide, ref } from 'vue';
+import { computed, provide } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { PieChart } from 'echarts/charts';
@@ -11,6 +11,7 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
+import { useCssVar } from "@vueuse/core";
 
 use([
     CanvasRenderer,
@@ -32,6 +33,7 @@ type ReportingChartDataEntry = {
 const props = defineProps<{
     data: ReportingChartDataEntry | null;
 }>();
+const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
 
 const seriesData = computed(() => {
     return props.data?.map((el) => {
@@ -50,13 +52,16 @@ const seriesData = computed(() => {
         };
     });
 });
-const option = ref({
+const option = computed(() => ({
     tooltip: {
         trigger: 'item',
     },
     legend: {
         show: true,
         top: '250px',
+        textStyle: {
+            color: labelColor.value,
+        },
     },
     backgroundColor: 'transparent',
     series: [
@@ -69,13 +74,13 @@ const option = ref({
                     return formatHumanReadableDuration(value);
                 },
             },
-            data: seriesData,
+            data: seriesData.value,
             radius: ['30%', '60%'],
             top: '-45%',
             type: 'pie',
         },
     ],
-});
+}));
 </script>
 
 <template>