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

Screenshots or screen recordings

Dark mode with the default Dark syntax scheme (the reported case — base text inherited a light-mode color):

Before After
gitlab-mr-before-dark gitlab-mr-after-dark

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):

gdk-before-after-light-scheme

How to set up and validate locally

  1. In Preferences, set Color mode to Dark and note the Syntax highlighting theme (dark) setting (test with both Dark and Light).
  2. 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.
  3. 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).
  4. 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.

Edited by Chaoyue Zhao

Merge request reports

Loading
Loading