fix css variables not updating correctly when system theme changes

resources/js/Components/Dashboard/ActivityGraphCard.vue

@@ -19,7 +19,7 @@ import {
     formatHumanReadableDuration,
     getDayJsInstance,
 } from '@/packages/ui/src/utils/time';
-import { useCssVar } from '@vueuse/core';
+import { useCssVariable } from '@/utils/useCssVariable';
 import { useQuery } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { api, type Organization } from '@/packages/api/src';
@@ -64,12 +64,9 @@ const max = computed(() => {
     }
 });
 
-const backgroundColor = useCssVar('--color-card-background', null, {
-    observe: true,
-});
-const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, {
-    observe: true,
-});
+const backgroundColor = useCssVariable('--theme-color-card-background');
+const itemBackgroundColor = useCssVariable('--color-bg-tertiary');
+const borderColor = useCssVariable('--color-border');
 
 const option = computed(() => {
     return {
@@ -120,7 +117,7 @@ const option = computed(() => {
                 [],
             itemStyle: {
                 borderRadius: 5,
-                borderColor: 'rgba(255,255,255,0.05)',
+                borderColor: borderColor.value,
                 borderWidth: 1,
             },
             tooltip: {

resources/js/Components/Dashboard/DayOverviewCardChart.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import VChart from 'vue-echarts';
-import { computed, ref } from 'vue';
-import { useCssVar } from '@vueuse/core';
+import { computed } from 'vue';
+import { useCssVariable } from '@/utils/useCssVariable';
 
 const props = defineProps<{
     history: number[];
 }>();
 
-const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
+const accentColor = useCssVariable('--theme-color-chart');
+const markLineColor = useCssVariable('--color-border-secondary');
 
 const seriesData = computed(() => props.history.map((el) => {
     return {
@@ -22,7 +23,7 @@ const seriesData = computed(() => props.history.map((el) => {
         },
     };
 }));
-const option = ref({
+const option = computed(() => ({
     grid: {
         top: 0,
         right: 0,
@@ -35,7 +36,7 @@ const option = ref({
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
         markLine: {
             lineStyle: {
-                color: 'rgba(125,156,188,0.1)',
+                color: markLineColor.value,
                 type: 'dashed',
             },
         },
@@ -66,11 +67,11 @@ const option = ref({
     },
     series: [
         {
-            data: seriesData,
+            data: seriesData.value,
             type: 'bar',
         },
     ],
-});
+}));
 </script>
 
 <template>

resources/js/Components/Dashboard/ProjectsChartCard.vue

@@ -11,7 +11,7 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { useCssVar } from "@vueuse/core";
+import { useCssVariable } from '@/utils/useCssVariable';
 import type { Organization } from "@/packages/api/src";
 
 use([
@@ -24,7 +24,7 @@ use([
 ]);
 
 provide(THEME_KEY, 'dark');
-const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
+const labelColor = useCssVariable('--color-text-secondary');
 
 const props = defineProps<{
     weeklyProjectOverview: {

resources/js/Components/Dashboard/ThisWeekOverview.vue

@@ -18,7 +18,7 @@ import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import { getWeekStart } from '@/packages/ui/src/utils/settings';
-import { useCssVar } from '@vueuse/core';
+import { useCssVariable } from '@/utils/useCssVariable';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import { useQuery } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
@@ -60,7 +60,7 @@ const weekdays = computed(() => {
     }
 });
 
-const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
+const accentColor = useCssVariable('--theme-color-chart');
 
 // Get the organization ID using the utility function
 const organizationId = computed(() => getCurrentOrganizationId());
@@ -176,10 +176,8 @@ const seriesData = computed(() => {
     });
 });
 
-const markLineColor = useCssVar('--color-border-secondary', null, {
-    observe: true,
-});
-const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
+const markLineColor = useCssVariable('--color-border-secondary');
+const labelColor = useCssVariable('--color-text-secondary');
 const option = computed(() => {
     return {
         tooltip: {
@@ -215,6 +213,10 @@ const option = computed(() => {
         },
         yAxis: {
             type: 'value',
+            axisLabel: {
+                color: labelColor.value,
+                fontFamily: 'Outfit, sans-serif',
+            },
             splitLine: {
                 lineStyle: {
                     color: markLineColor.value,