Comfy-Org / Comfy-Org/ComfyUI_frontend
feat: make chart colors reactive to theme changes in useChart.ts
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 702
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 512
Description
## Summary
The `getDefaultOptions()` function in `src/components/ui/chart/useChart.ts` snapshots CSS color tokens (e.g. `--color-base-foreground`, `--color-muted-foreground`) only at chart creation time. As a result, charts retain stale legend, tick, and grid colors after a light/dark theme switch until an unrelated prop update triggers a re-render.
## Proposed Solution
Update `useChart` to recompute and reapply `getDefaultOptions()` when theme tokens change. Possible approaches:
- **Option A:** Track relevant CSS token values or a theme identifier as reactive dependencies, so the chart creation/update effect calls `getDefaultOptions()` again on theme change.
- **Option B:** Expose a refresh step that calls `chart.update()` with new options from `getDefaultOptions(type)` when the theme changes (e.g. via a `MutationObserver` on `document.documentElement` class/attribute, or a VueUse utility like `useCssVar`).
The fix should cover both the initial chart creation logic and any subsequent `watch` blocks that apply options (around lines 139–159 of the current implementation).
## References
- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9744
- Review comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9744#discussion_r2924517969
- Flagged by: @christian-byrne
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-9806-feat-make-chart-colors-reactive-to-theme-changes-in-useChart-ts-3216d73d3650817cb575c2949d3ca768) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.