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

Aberta
  • Algo errado?
#35,342 1 comentário 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
53/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
typescript
Domínio
developer-experience

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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>
  1. 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.
Linguagem predominante
TypeScript
Estrelas
24.8k
Forks
6.4k
Merge médio
4h 16min
PRs com merge (30d)
352

Preparar o ambiente

Abrir no Codespaces

Inicia o contêiner de desenvolvimento do projeto no navegador, com a sua própria conta do GitHub.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de pingdotgg/t3code

Todas as issues de pingdotgg/t3code

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.