add light mode

resources/js/Components/Common/Reporting/ReportingChart.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 LinearGradient from 'zrender/lib/graphic/LinearGradient';
 import {
     formatDate,
@@ -43,7 +43,8 @@ const xAxisLabels = computed(() => {
     }
     return props?.groupedData?.map((el) => formatDate(el.key ?? ''));
 });
-const accentColor = useCssVar('--color-accent-quaternary');
+const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
+const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
 
 const seriesData = computed(() => {
     return props?.groupedData?.map((el) => {
@@ -90,7 +91,7 @@ const seriesData = computed(() => {
     });
 });
 
-const option = ref({
+const option = computed(() => ({
     tooltip: {
         trigger: 'item',
     },
@@ -103,7 +104,7 @@ const option = ref({
     backgroundColor: 'transparent',
     xAxis: {
         type: 'category',
-        data: xAxisLabels,
+        data: xAxisLabels.value,
         markLine: {
             lineStyle: {
                 color: 'rgba(125,156,188,0.1)',
@@ -118,7 +119,7 @@ const option = ref({
         axisLabel: {
             fontSize: 12,
             fontWeight: 600,
-            color: 'rgba(255,255,255,0.7)',
+            color: labelColor.value,
             margin: 16,
             fontFamily: 'Outfit, sans-serif',
         },
@@ -138,7 +139,7 @@ const option = ref({
     },
     series: [
         {
-            data: seriesData,
+            data: seriesData.value,
             type: 'bar',
             tooltip: {
                 valueFormatter: (value: number) => {
@@ -147,7 +148,7 @@ const option = ref({
             },
         },
     ],
-});
+}));
 </script>
 
 <template>
@@ -158,7 +159,7 @@ const option = ref({
             class="chart"
             :option="option" />
         <div v-else class="chart flex flex-col items-center justify-center">
-            <p class="text-lg text-white font-semibold">
+            <p class="text-lg text-text-primary font-semibold">
                 No time entries found
             </p>
             <p>Try to change the filters and time range</p>

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

@@ -24,11 +24,11 @@ const activeClass = computed(() => {
         tag="button"
         :class="
             twMerge(
-                'cursor-pointer hover:bg-card-background transition flex',
+                'cursor-pointer bg-input-background hover:bg-card-background transition flex',
                 activeClass
             )
         ">
-        <component :is="icon" class="h-4 text-muted"></component>
+        <component :is="icon" class="-ml-0.5 h-4 w-4 text-text-quaternary"></component>
         <span> {{ title }} </span>
         <div
             v-if="count"

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>

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

@@ -26,7 +26,7 @@ const expanded = ref(false);
 
 <template>
     <div
-        class="contents text-white [&>*]:transition [&>*]:border-card-background-separator [&>*]:border-b [&>*]:h-[50px]">
+        class="contents text-text-primary [&>*]:transition [&>*]:border-card-background-separator [&>*]:border-b [&>*]:h-[50px]">
         <div
             :class="
                 twMerge(