Skip to content

fix(web): ensure readable text in dark code blocks on light theme#352

Merged
pancacake merged 1 commit intoHKUDS:devfrom
DarkGenius:fix/dark-code-block-text-contrast
Apr 20, 2026
Merged

fix(web): ensure readable text in dark code blocks on light theme#352
pancacake merged 1 commit intoHKUDS:devfrom
DarkGenius:fix/dark-code-block-text-contrast

Conversation

@DarkGenius
Copy link
Copy Markdown
Contributor

@DarkGenius DarkGenius commented Apr 20, 2026

Summary

In the light theme, multi-line code blocks rendered by the chat showed near-black text on the hard-coded dark background (#1f2937 / #292524), making the content unreadable.

image

Two issues compounded it:

  • .prose pre { color: #D6D3D1 } overrode the Tailwind text-[#e5e7eb] class on the <pre> (higher specificity).
  • .prose code:not(.md-code-block__code):not(.md-inline-code) { color: var(--foreground) } matched the fallback <code> (no md-code-block__code class) and pulled it back to var(--foreground) (#1F1D1B in the light theme).

The fix:

  • Add .md-renderer .md-code-block { ,pre,code } { color: #e5e7eb } in web/app/globals.css (specificity 0,2,1) so the dark code block always shows light text regardless of theme. Doesn't affect Prism oneDark syntax highlighting (token colors are inline on <span>).
  • Tag the <code> element in the multi-line fallbacks of RichMarkdownRenderer and SimpleMarkdownRenderer with the existing md-code-block__code class so the :not(.md-code-block__code) guard kicks in and the existing color: inherit !important chain resolves to the new light color.

Inline code (.md-inline-code) is untouched and keeps theming via var(--foreground) / var(--muted).

Test plan

  • Light theme: open chat, render an assistant message with a fenced code block (with and without language). Text inside the dark block must be light gray (#e5e7eb) and readable.
  • Dark theme: same — visually unchanged.
  • A code block with a language identifier (e.g. python ```) still gets Prism oneDark syntax highlighting with proper token colors.
  • Inline code in a paragraph still renders with theme-aware colors (light bg + dark text in light theme).

The hard-coded dark code block background (#1f2937 / #292524) combined
with `.prose` rules was producing near-black text in the light theme:
`.prose pre` forced color #D6D3D1 and
`.prose code:not(.md-code-block__code):not(.md-inline-code)` pulled the
code element back to var(--foreground), overriding the Tailwind classes
on the fallback <pre>/<code>.

Add a higher-specificity rule on .md-renderer .md-code-block {,pre,code}
that pins the text color to #e5e7eb regardless of theme, and tag the
<code> elements in the Rich/Simple markdown fallbacks with the existing
md-code-block__code class so the :not() guard kicks in and inheritance
resolves to the light color.
@pancacake
Copy link
Copy Markdown
Collaborator

Thanks for your contribution!

@pancacake pancacake merged commit 1fa0c39 into HKUDS:dev Apr 20, 2026
pancacake pushed a commit that referenced this pull request Apr 20, 2026
…via agents.yaml (#348)

Rebased onto latest dev (post-#352) to pull in the lazy loguru import in `deeptutor/tutorbot/channels/manager.py`, which was the root cause of the smoke-test failures (unrelated to this PR's own diff).

Merging: adds per-stage `max_tokens` and `temperature` knobs under `capabilities.chat` in `agents.yaml`, bumps the `responding`/`answer_now` defaults from 1800 → 8000 to fix mid-sentence truncation on long answers, and keeps safe fallbacks in `_ChatLimits.from_config` for legacy configs. 10 new unit tests covering loader resolution and dataclass coercion.
pancacake added a commit that referenced this pull request Apr 20, 2026
- New `assets/releases/ver1-2-1.md` covering #348 (per-stage chat token
  limits), #349 (Regenerate across CLI/WS/Web UI), the regenerate UI
  harmony polish, and bug fixes #347 / #345 / #352.
- README release-notes block updated to surface v1.2.1 above v1.2.0.

Made-with: Cursor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants