adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-17 04:32:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix css variables not updating correctly when system theme changes

Browse Source
This commit is contained in:
Gregor Vostrak
2025-06-08 15:47:25 +02:00
parent dc21ac8352
commit 7578beb271
8 changed files with 85 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
resources/js/Components/Common/Reporting/ReportingChart.vue
View File

@@ -17,7 +17,7 @@ import {
TooltipComponent,
} from 'echarts/components';
import type { AggregatedTimeEntries, Organization } from '@/packages/api/src';
import { useCssVar } from '@vueuse/core';
import { useCssVariable } from '@/utils/useCssVariable';
use([
CanvasRenderer,
@@ -47,8 +47,10 @@ const xAxisLabels = computed(() => {
formatDate(el.key ?? '', organization?.value?.date_format)
);
});
const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
const accentColor = useCssVariable('--theme-color-chart');
const labelColor = useCssVariable('--color-text-secondary');
const markLineColor = useCssVariable('--color-border-secondary');
const splitLineColor = useCssVariable('--color-border-tertiary');
const seriesData = computed(() => {
return props?.groupedData?.map((el) => {
@@ -111,7 +113,7 @@ const option = computed(() => ({
data: xAxisLabels.value,
markLine: {
lineStyle: {
color: 'rgba(125,156,188,0.1)',
color: markLineColor.value,
type: 'dashed',
},
},
@@ -135,9 +137,13 @@ const option = computed(() => ({
},
yAxis: {
type: 'value',
axisLabel: {
color: labelColor.value,
fontFamily: 'Outfit, sans-serif',
},
splitLine: {
lineStyle: {
color: 'rgba(125,156,188,0.2)', // Set desired color here
color: splitLineColor.value,
},
},
},

4
resources/js/Components/Common/Reporting/ReportingPieChart.vue
View File

@@ -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([
@@ -36,7 +36,7 @@ type ReportingChartDataEntry = {
const props = defineProps<{
data: ReportingChartDataEntry | null;
}>();
const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
const labelColor = useCssVariable('--color-text-secondary');
const seriesData = computed(() => {
return props.data?.map((el) => {