Fix Duo Chat code preview contrast in dark mode
What does this MR do and why?
Fixes the readability of Duo Chat code and markdown previews in dark mode, per #587563 (closed).
Root cause analysis
The tool-approval cards (for example "Create issue" or "Commit and push") and chat markdown code blocks render a <pre class="code code-syntax-highlight-theme duo-message-pre-block …"> element. Three style sources fight over it and can disagree:
- The user's syntax highlighting scheme supplies the token colors
- duo-ui overrides the block's background to match the app color mode and makes the base text inherit the ambient chat color
- The inherited chat color can be a light-mode value inside a dark panel (see the investigation).
The result is mixed pairs such as near-black text on the dark-scheme or light-scheme tokens on a dark panel background when the app color mode and the syntax scheme disagree.
Fix
This MR pairs the block's background and text color from the active syntax scheme instead, matching how blob viewers render code.
A companion MR in duo-ui (duo-ui!717 (merged)) replaces the hardcoded light-mode colors in the .duo-chat-markdown fallback stylesheet with semantic tokens; that covers hosts without GitLab's theme CSS (for example editor extensions) and the non-pre markdown elements. This MR is what fixes GitLab web, including against currently deployed duo-ui versions.
References
- Issue: #587563 (closed)
- Root-cause investigation: #587563 (comment 3832259959)
- Companion duo-ui MR: duo-ui!717 (merged)
Screenshots or screen recordings
Dark mode with the default Dark syntax scheme (the reported case — base text inherited a light-mode color):
| Before | After |
|---|---|
![]() |
![]() |
Dark mode with a light syntax scheme selected as the dark-mode scheme (light-palette tokens on a dark background before; the scheme's own self-consistent surface after, same as blob viewers):
How to set up and validate locally
- In Preferences, set Color mode to Dark and note the Syntax highlighting theme (dark) setting (test with both Dark and Light).
- Open the Duo Agentic Chat panel and ask Duo to draft an issue (or commit a change), so a tool-approval card with a markdown/diff preview appears.
- Expand the description / file changes preview and verify the text is readable: the block's background and text now come from the selected syntax scheme (
--code-background/--code-text-color). - Repeat in light color mode to confirm no regression.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.


