fix: use semantic color tokens in markdown fallback styles
What does this MR do?
Fixes part of gitlab#587563 (closed) (Duo Chat markdown previews have poor contrast in dark mode).
1. Semantic color tokens in the .duo-chat-markdown fallback stylesheet
duo_chat.scss and agentic_duo_chat.scss both ship a fallback stylesheet applied when the host app does not provide its own markdown renderer or class. It used hardcoded light-mode values ($gl-text-color, $gray-100, gl-bg-gray-50, gl-bg-white, etc.) that do not adapt to dark mode.
Replaced with semantic tokens that resolve per color mode:
gl-text-default,gl-text-subtlefor textgl-bg-strong,gl-bg-subtle,gl-bg-transparentfor backgroundsvar(--gl-border-color-default)forbox-shadow-based borders on blockquotes, tables, andpre- Explicit
gl-bg-subtlebackground added topre
2. Let pre own the code block background
Highlight.js themes (a11y-light in Storybook, solarized/monokai/dracula in GitLab) set a fixed-hex background and padding on .hljs, which draws a second visible box inside the pre. Added .duo-message-pre-block code.hljs { background: transparent !important; padding: 0 !important; } in duo_chat_message.scss so the pre owns the background. !important is required because theme selectors such as .gl-dark pre code.hljs have higher specificity than ours.
pre_block.vue also receives gl-bg-subtle; its spec is updated to match.
3. Storybook dark-mode syntax highlight theme
Storybook always loaded highlight.js a11y-light, which assumes a light background and is unreadable under .gl-dark. A new .storybook/highlight-themes.scss scopes a11y-light to the default (light) context and a11y-dark under .gl-dark. It is imported from .storybook/preview.js.
Screenshots or screen recordings
| Light (Storybook) | Dark (Storybook) |
|---|---|
![]() |
![]() |
Integration merge requests
- GitLab: no integration MR required (no API change).
Does this MR meet the acceptance criteria?
See template checklist.
Related to gitlab#587563 (closed)

