Fix markdown code block text visibility in light mode

[seanburkes]

• Fixes markdown code block text in light mode by using token-based text color for code blocks.
• Another pass indicated diagnostic sections and tables had the same issue in light mode, made those changes as well.

Before, the invisible text in light mode:

After:

And regression testing on dark mode checks out:

[Copilot]

Pull request overview

Updates the UI markdown styling to ensure code blocks have readable text color in light mode by explicitly setting color on pre/code elements within markdown-rendered content.

Changes:

• Set color: var(--text-primary) on .markdown-body pre.
• Add explicit color: var(--text-primary) for .markdown-body pre code and .markdown-code-block pre code.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

This selector applies color: var(--text-primary) to all code inside .markdown-code-block, including Shiki-highlighted output. That can override the intended Shiki theme base color on the <code> element (even if <pre> has an inline color), and may reduce highlight fidelity. Align with the pattern used in messaging/tool-call.css by targeting only non-Shiki blocks (e.g., pre:not(.shiki) code) or adding a more specific rule to preserve Shiki colors.

Suggested change

	.markdown-body pre code,
	.markdown-code-block pre code {
	.markdown-body pre:not(.shiki) code,
	.markdown-code-block pre:not(.shiki) code {

[shantur]

Thanks @seanburkes for fixing this

[shantur]

@CodeNomadBot

Review the changes

[codenomadbot]

Reviewed the CSS changes in packages/ui/src/styles/markdown.css.

Looks solid overall:

• Switching the GitHub markdown import to github-markdown-light.css + putting it in its own layer is a nice way to avoid “dark defaults” leaking into light mode.
• pre:not(.shiki) is a good guard so we don’t stomp syntax-highlighted blocks.
• Explicit color: var(--text-primary) on non-shiki pre/code, plus the th/td token colors, directly addresses the “invisible text” symptom.

Small nits / things to double-check:

• Inline code (.markdown-body code around line ~96) doesn’t set color, so it will inherit whatever the GitHub base CSS provides. If you want it fully token-driven across themes, consider adding color: var(--text-primary); there too.
• Zebra striping uses tbody tr:nth-child(2n) with td { background-color: transparent; } which is fine, but worth quickly sanity-checking on narrow tables since this file forces table { display: block; }.

If those checks look good in both themes, this is LGTM from me.

--
Yours, CodeNomadBot

[shantur]

@CodeNomadBot

Raise a PR with suggested changes

[codenomadbot]

Opened a PR with the suggested nit applied:

• PR: Fix inline markdown code text color #163
• Change: packages/ui/src/styles/markdown.css adds color: var(--text-primary) to .markdown-body code so inline code stays readable in light mode (token-driven like the code blocks).

If you’d prefer this as a follow-up commit on the original contributor PR instead of a separate PR, tell me which branch to target and I’ll redo it that way.

--
Yours, CodeNomadBot

[shantur]

@seanburkes - Would you be able to check if #163 changes are as expected?

[seanburkes]

@shantur - I pulled in the AI changes, but still required more work to get the table fixed properly. Visual checks in both light and dark modes, wide and narrow screens, for tables, diagnostics, and code blocks. Looks much better and more consistent now.