Comfy-Org / Comfy-Org/ComfyUI_frontend

feat: make chart colors reactive to theme changes in useChart.ts

Open
#9,806 0 comments 0 reactions 1 assignee Claimed by @christian-byrne View on GitHub
area:ui enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.