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

Đang mở
  • Có gì không ổn?
#35,342 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
53/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
developer-experience

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.
Ngôn ngữ chính
TypeScript
Star
24.8k
Fork
6.4k
Merge trung bình
4 giờ 16 phút
Pull request đã merge (30 ngày)
352

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của pingdotgg/t3code

Tất cả issue của pingdotgg/t3code

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.