From dd8e101f699da67d6de76cb88360384d020a9186 Mon Sep 17 00:00:00 2001 From: Usman Baig Date: Sat, 7 Mar 2026 00:56:22 +0100 Subject: [PATCH] fix: resolve CSS var for chart PNG export background color html-to-image cannot resolve CSS custom properties. Use getComputedStyle to get the actual background color from the DOM. --- components/dashboard/Chart.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx index 3af6270..9c3701f 100644 --- a/components/dashboard/Chart.tsx +++ b/components/dashboard/Chart.tsx @@ -219,9 +219,11 @@ export default function Chart({ if (!chartContainerRef.current) return try { const { toPng } = await import('html-to-image') + // Resolve the actual background color from the DOM (CSS vars don't work in html-to-image) + const bg = getComputedStyle(chartContainerRef.current).backgroundColor || (resolvedTheme === 'dark' ? '#171717' : '#ffffff') const dataUrl = await toPng(chartContainerRef.current, { cacheBust: true, - backgroundColor: resolvedTheme === 'dark' ? 'var(--color-neutral-900)' : '#ffffff', + backgroundColor: bg, }) const link = document.createElement('a') link.download = `chart-${dateRange.start}-${dateRange.end}.png`