@@ -18,7 +18,7 @@ import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
1818import { formatHumanReadableDuration } from ' @/packages/ui/src/utils/time' ;
1919import { formatCents } from ' @/packages/ui/src/utils/money' ;
2020import { getWeekStart } from ' @/packages/ui/src/utils/settings' ;
21- import { useCssVar } from ' @vueuse/core ' ;
21+ import { useCssVariable } from ' @/utils/useCssVariable ' ;
2222import { getOrganizationCurrencyString } from ' @/utils/money' ;
2323import { useQuery } from ' @tanstack/vue-query' ;
2424import { getCurrentOrganizationId } from ' @/utils/useUser' ;
@@ -60,7 +60,7 @@ const weekdays = computed(() => {
6060 }
6161});
6262
63- const accentColor = useCssVar (' --theme-color-chart' , null , { observe: true } );
63+ const accentColor = useCssVariable (' --theme-color-chart' );
6464
6565// Get the organization ID using the utility function
6666const organizationId = computed (() => getCurrentOrganizationId ());
@@ -176,10 +176,8 @@ const seriesData = computed(() => {
176176 });
177177});
178178
179- const markLineColor = useCssVar (' --color-border-secondary' , null , {
180- observe: true ,
181- });
182- const labelColor = useCssVar (' --color-text-secondary' , null , { observe: true });
179+ const markLineColor = useCssVariable (' --color-border-secondary' );
180+ const labelColor = useCssVariable (' --color-text-secondary' );
183181const option = computed (() => {
184182 return {
185183 tooltip: {
@@ -204,7 +202,7 @@ const option = computed(() => {
204202 fontSize: 16 ,
205203 fontWeight: 600 ,
206204 margin: 24 ,
207- fontFamily: ' Outfit , sans-serif' ,
205+ fontFamily: ' Inter , sans-serif' ,
208206 color: labelColor .value ,
209207 },
210208 axisTick: {
@@ -215,6 +213,10 @@ const option = computed(() => {
215213 },
216214 yAxis: {
217215 type: ' value' ,
216+ axisLabel: {
217+ color: labelColor .value ,
218+ fontFamily: ' Inter, sans-serif' ,
219+ },
218220 splitLine: {
219221 lineStyle: {
220222 color: markLineColor .value ,
@@ -304,4 +306,4 @@ const option = computed(() => {
304306 height : 280px ;
305307 background : transparent ;
306308}
307- </style >
309+ </style >
0 commit comments