[Bug]: html_render chart labels unreadable when agents use var(--muted) as text color
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 53/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- typescript
- Domain
- developer-experience
Research direction
Start by locating HTML_RENDER_THEME_GUIDE and the html_preview and html_render entry points under apps/web, then check how htmlRenderTheme maps --muted and --muted-foreground. Reproduce the chart example in dark mode and inspect the theme guide and preview behavior. Done means the guide steers chart text to a readable text token, or the preview flags the low contrast described in the issue.
Written by the indexing model from the issue text.
Description
Before submitting
- I searched existing issues and did not find a duplicate.
- I included enough detail to reproduce or investigate the problem.
Area
apps/web (html_render / agent visuals)
Summary
Auto-generated html_render charts in dark mode often show near-black subtitle, axis, and legend text on a black canvas. Title (var(--foreground)) and bars (var(--chart-*)) stay readable; supporting text does not.
This is not the same as #26872 (dark custom --accent / --chart-1 marks). Here the agent correctly switched to theme CSS variables, but painted text with var(--muted), which is a dark surface token. Readable muted text is var(--muted-foreground).
Related but different: #26872 / #27346 (accent/chart mark contrast), #25907 (canvas vs chat background mismatch).
Steps to reproduce
- Use the default dark theme (true black chat canvas).
- Have an agent
html_rendera chart/diagram whose secondary text usescolor: var(--muted)(common when following the theme-variable guide without distinguishing surface vs text roles). Minimal excerpt from a real agent chart:
<style>
body { color: var(--foreground); margin: 0; font-family: var(--font-sans); }
h1 { font-size: 16px; margin: 0 0 4px; }
p { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.lbl { font-size: 10px; color: var(--muted); }
.leg { font-size: 12px; color: var(--muted); }
</style>
<body>
<h1>Spanish scraper — creates vs updates</h1>
<p>Loki · container spanish-tax-portal-scraper</p>
<div class="lbl">10-15</div>
<div class="leg">Created claim · Ayudas claim updated</div>
</body>
- View the rendered visual in the thread.
Expected behavior
Secondary chart text (subtitle, axis labels, legend) stays readable against --background in dark mode — either because agents are steered to var(--muted-foreground) / var(--foreground), or because tooling/preview catches the bad contrast.
Actual behavior
Subtitle, rotated x-axis labels, and legend copy render as dark-on-dark and are effectively illegible. Title remains white.
Suspected cause: htmlRenderTheme maps --muted to the theme muted surface color (near canvas on dark), while --muted-foreground is the muted text color. The html_render theme guide lists --muted among usable variables and only notes that “most have a matching -foreground”, which is easy for agents to miss when styling labels.
Impact
Major degradation for auto charts/tables in dark mode (common default). Trend visuals look broken even when the data bars are fine.
Version or commit
Seen 2026-11-12 in T3 Code (Cursor harness / auto-smart) on Linux (WSL2). Default dark appearance.
Environment
- Thread that produced the chart: agent used
html_previewthenhtml_render - Chart title: “Spanish scraper — creates vs updates”
- Agent first previewed with hardcoded dark colors, then “fixed” to theme vars and switched label color to
var(--muted)
Screenshots
See attached image: white title + bright bars; nearly invisible subtitle, date labels, and legend text.
Possible product fixes (non-prescriptive)
- Strengthen
HTML_RENDER_THEME_GUIDE/ tool description: never use--muted,--card,--secondary,--borderas text color; use*-foreground/--foreground. - Or have
html_previewwarn when computed text/background contrast is below ~4.5:1. - Optionally treat agent misuse of surface tokens as text as a known footgun in docs.
- Dominant language
- TypeScript
- Stars
- 24.8k
- Forks
- 6.4k
- Avg merge
- 4h 16m
- Merged PRs (30d)
- 352
Getting set up
Starts the project's dev container in your browser, under your own GitHub account.
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from pingdotgg/t3code
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 67/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day
All issues in pingdotgg/t3code
Similar issues
-
Autocomplete still accepts an option after becoming disabledPossibly taken @Xapollon430 claimed this today. Open
Difficulty 2/5 1-3 hours Newbie friendliness 67/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
Difficulty 1/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
reduxjs/react-redux#2416 · 1 comment ·