From 2e1a4b3b2bb86c0bb939740aea45296823f02209 Mon Sep 17 00:00:00 2001 From: Lukas Date: Sat, 14 Mar 2026 21:49:30 +0100 Subject: [PATCH] Fix chart color resolution by querying FluentProvider wrapper The pie and bar charts were rendering with transparent/missing colors because resolveFluentToken queried document.documentElement for CSS custom properties. Fluent UI v9 injects these on its own wrapper div (.fui-FluentProvider), not on :root. Changed to query that element with a fallback to document.html. This fixes the fill colors for all four chart components. --- frontend/src/utils/chartTheme.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/utils/chartTheme.ts b/frontend/src/utils/chartTheme.ts index 51d7666..0fd7cec 100644 --- a/frontend/src/utils/chartTheme.ts +++ b/frontend/src/utils/chartTheme.ts @@ -30,7 +30,12 @@ import { tokens } from "@fluentui/react-components"; export function resolveFluentToken(tokenValue: string): string { const match = /var\((--[^,)]+)/.exec(tokenValue); if (match == null || match[1] == null) return tokenValue; - const resolved = getComputedStyle(document.documentElement) + + // FluentProvider injects CSS custom properties on its own wrapper
, + // not on :root. Query that element so we resolve actual colour values. + const el = + document.querySelector(".fui-FluentProvider") ?? document.documentElement; + const resolved = getComputedStyle(el) .getPropertyValue(match[1]) .trim(); return resolved !== "" ? resolved : tokenValue;