lukas.pupkalipinski/BanGUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix chart color resolution by querying FluentProvider wrapper

Browse Source 
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.
This commit is contained in:
Lukas
2026-03-14 21:49:30 +01:00
parent 4be2469f92
commit 2e1a4b3b2b
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/utils/chartTheme.ts
View File

@@ -30,7 +30,12 @@ import { tokens } from "@fluentui/react-components";
export function resolveFluentToken(tokenValue: string): string { export function resolveFluentToken(tokenValue: string): string {
const match = /var\((--[^,)]+)/.exec(tokenValue); const match = /var\((--[^,)]+)/.exec(tokenValue);
if (match == null || match[1] == null) return tokenValue; if (match == null || match[1] == null) return tokenValue;
const resolved = getComputedStyle(document.documentElement)
// FluentProvider injects CSS custom properties on its own wrapper <div>,
// 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]) .getPropertyValue(match[1])
.trim(); .trim();
return resolved !== "" ? resolved : tokenValue; return resolved !== "" ? resolved : tokenValue;