Summary
Our React webviews render on a Fluent UI v9 theme built by src/webviews/theme/themeGenerator.ts. The adaptive light/dark themes only remap a handful of Fluent neutral tokens onto VS Code theme variables (--vscode-editor-background, --vscode-editor-foreground, --vscode-foreground). Everything else on Fluent's neutral ramp — colorNeutralBackground2/3, the neutral strokes, the secondary/tertiary foregrounds, and the skeleton stencils — keeps the fixed gray produced by createLightTheme() / createDarkTheme(), which ignores the active color theme.
On stock Dark+/Light+ that gray sits close to the editor background, so it looks fine. On themes whose editor background is tinted (Solarized, Night Owl, Nord, Monokai, a red theme, high-contrast, …), the mismatched surfaces stand out.
Where it shows
- Collection-view tab band / header —
colorNeutralBackground2.
- Index list alternating rows — even rows use
colorNeutralBackground1 (adaptive → editor background) while odd rows use colorNeutralBackground2 (fixed gray), so the two shades stop relating.
- Loading skeletons —
opaque skeletons (metrics, query-insights) paint solid colorNeutralStencil1/2 (fixed gray) and never pick up the theme, while translucent skeletons (results grid, index list) do, because they composite an alpha overlay over the themed surface.
Fixed in #732
- Secondary surfaces:
colorNeutralBackground2 (+ Hover / Pressed / Selected) → --vscode-tree-tableOddRowsBackground → --vscode-sideBar-background → --vscode-editorWidget-background; colorNeutralStroke2 → --vscode-panel-border → --vscode-widget-border → --vscode-editorWidget-border.
- Skeleton stencils: solid
colorNeutralStencil1/2 remapped to faint alpha overlays (per theme kind — darken on light, lighten on dark) so opaque skeletons composite over the themed card like translucent does, instead of a flat gray/dark block. The *Alpha variants are left at Fluent defaults.
- Skeleton unification: the metrics and query-insights skeletons were switched to
appearance="translucent" so every skeleton shares the same gentle, background-tinted shimmer.
Remaining / future work
Neutral tokens still on the fixed Fluent ramp (also enumerated in a comment in themeGenerator.ts):
colorNeutralBackground3 (markdown cards, feedback dialog, query-plan blocks)colorNeutralBackground1Hover / Pressed / SelectedcolorNeutralForeground3 / Foreground4 / ForegroundDisabledcolorNeutralStroke1 / Stroke3 / StrokeAccessiblecolorSubtleBackground* (toolbar / button hover fills)- High-contrast theme kinds bypass the adaptive generator entirely and fall back to the static Teams themes (
getFluentUiTheme in state/ThemeContext.tsx), so none of the VS Code mappings apply there yet.
Suggested approach
Extend the override block in themeGenerator.ts (light + dark) to map the remaining neutral tokens onto the closest VS Code variables with fallbacks, and add an adaptive path for high-contrast kinds. Validate across a spread of themes (Default Dark/Light, Solarized, Nord, Monokai, High Contrast).
Related: #732
Summary
Our React webviews render on a Fluent UI v9 theme built by
src/webviews/theme/themeGenerator.ts. The adaptive light/dark themes only remap a handful of Fluent neutral tokens onto VS Code theme variables (--vscode-editor-background,--vscode-editor-foreground,--vscode-foreground). Everything else on Fluent's neutral ramp —colorNeutralBackground2/3, the neutral strokes, the secondary/tertiary foregrounds, and the skeleton stencils — keeps the fixed gray produced bycreateLightTheme()/createDarkTheme(), which ignores the active color theme.On stock Dark+/Light+ that gray sits close to the editor background, so it looks fine. On themes whose editor background is tinted (Solarized, Night Owl, Nord, Monokai, a red theme, high-contrast, …), the mismatched surfaces stand out.
Where it shows
colorNeutralBackground2.colorNeutralBackground1(adaptive → editor background) while odd rows usecolorNeutralBackground2(fixed gray), so the two shades stop relating.opaqueskeletons (metrics, query-insights) paint solidcolorNeutralStencil1/2(fixed gray) and never pick up the theme, whiletranslucentskeletons (results grid, index list) do, because they composite an alpha overlay over the themed surface.Fixed in #732
colorNeutralBackground2(+Hover/Pressed/Selected) →--vscode-tree-tableOddRowsBackground→--vscode-sideBar-background→--vscode-editorWidget-background;colorNeutralStroke2→--vscode-panel-border→--vscode-widget-border→--vscode-editorWidget-border.colorNeutralStencil1/2remapped to faint alpha overlays (per theme kind — darken on light, lighten on dark) soopaqueskeletons composite over the themed card liketranslucentdoes, instead of a flat gray/dark block. The*Alphavariants are left at Fluent defaults.appearance="translucent"so every skeleton shares the same gentle, background-tinted shimmer.Remaining / future work
Neutral tokens still on the fixed Fluent ramp (also enumerated in a comment in
themeGenerator.ts):colorNeutralBackground3(markdown cards, feedback dialog, query-plan blocks)colorNeutralBackground1Hover/Pressed/SelectedcolorNeutralForeground3/Foreground4/ForegroundDisabledcolorNeutralStroke1/Stroke3/StrokeAccessiblecolorSubtleBackground*(toolbar / button hover fills)getFluentUiThemeinstate/ThemeContext.tsx), so none of the VS Code mappings apply there yet.Suggested approach
Extend the override block in
themeGenerator.ts(light + dark) to map the remaining neutral tokens onto the closest VS Code variables with fallbacks, and add an adaptive path for high-contrast kinds. Validate across a spread of themes (Default Dark/Light, Solarized, Nord, Monokai, High Contrast).Related: #732