[Bug]: html_render chart labels unreadable when agents use var(--muted) as text color #35342

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

1. Use the default dark theme (true black chat canvas).
2. Have an agent html_render a chart/diagram whose secondary text uses color: 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>

3. 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_preview then html_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, --border as text color; use *-foreground / --foreground.
• Or have html_preview warn 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.