Skip to content

ThemeProvider falsely warns "unknown key — it will be ignored" for valid *ChartPalette theme keys #714

Description

@ankit-thesys

Situation

Theming charts the typed, documented way compiles fine but spams dev-console warnings on every boot. Reported by a downstream consumer on @openuidev/react-ui@0.12.1, confirmed on main:

const t = createTheme({ defaultChartPalette: ["#57C8D6", "#FF6A2B"] }); // compiles
<ThemeProvider mode="dark" darkTheme={t}></ThemeProvider>
[OpenUI] Unknown theme key "defaultChartPalette".
[OpenUI] darkTheme contains unknown key "defaultChartPalette". It will be ignored. Use createTheme() for typo detection with suggestions.

Every *ChartPalette key is warned twice — once by createTheme(), once by the ThemeProvider prop validator. The consumer's workaround was to abandon theme-level palettes and pass customPalette on every chart.

Task

Establish whether the palettes are genuinely ignored (functional bug) or the warning is a false positive (types-vs-runtime drift), then eliminate the false warnings without losing typo detection, and prevent the drift from recurring.

Action (investigation findings)

Root cause — type and runtime allow-list drifted:

  • packages/react-ui/src/components/ThemeProvider/types.ts:8-17ChartColorPalette declares eight optional string[] keys (defaultChartPalette, barChartPalette, lineChartPalette, areaChartPalette, pieChartPalette, radarChartPalette, radialChartPalette, horizontalBarChartPalette); Theme includes them via ColorTheme extends ChartColorPalette → TypeScript accepts them.
  • ThemeProvider.tsx:112 and utils.ts:70 both derive their allow-list from Object.keys(defaultLightTheme), and defaultTheme.ts:487 defines none of the palette keys → every palette key trips "unknown key" in both validators.

Runtime verification (server-rendered probe through real ThemeProvideruseTheme()useChartPalette):

  • The merge spreads user overrides wholesale ({ ...themes.dark, ...overrides }, ThemeProvider.tsx:208-211), so palettes do reach context and charts do apply them (Charts/utils/PalletUtils.ts:185); unset chart types fall back to defaultChartPalette correctly.
  • Conclusion: "It will be ignored" is false. Dev-only misleading noise, not a functional regression — but it drives consumers off a working API.

Result (definition of done)

  • CHART_PALETTE_KEYS constant type-guarded with satisfies Record<keyof ChartColorPalette, true> — drift becomes a compile error
  • Both validators consume one shared allow-list (Object.keys(defaultLightTheme) + palette keys)
  • Zero warnings for valid palette keys; typo suggestions still work for real typos
  • Regression tests: no false warning, palettes flow to useTheme()/useChartPalette, allow-list covers every declared palette key

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions