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.
This commit is contained in:
Usman Baig
2026-03-07 00:56:22 +01:00
parent ece8cda334
commit dd8e101f69

View File

@@ -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`