Fix MarkdownBlock text color for Dark High Contrast theme

[cannuri]

Context

When using the "Dark High Contrast" Theme in VS Code, file references like filename in Roo Code's chat responses were not visible because they appeared as black text on a black background, creating a contrast issue that made the text unreadable.

Implementation

I fixed this issue by adding a theme-specific CSS rule that only applies when the Dark High Contrast theme is active. The implementation:

Identified the issue in the MarkdownBlock.tsx component where inline code blocks (code:not(pre > code)) were styled
Added a specific CSS rule that targets only the Dark High Contrast theme using VS Code's theme data attribute
Used VS Code theme tokens for the text color to ensure proper theming and contrast
Implemented a fallback chain of theme tokens to ensure compatibility
The key part of the implementation is this CSS rule:

body[data-vscode-theme-kind="vscode-high-contrast"] & code:not(pre > code) {
    color: var(--vscode-editorInlayHint-foreground, var(--vscode-symbolIcon-stringForeground, var(--vscode-charts-orange, #e9a700)));
}

This approach ensures that:

Only the Dark High Contrast theme is affected, preserving the styling in other themes
The color is derived from VS Code's theme tokens rather than hardcoded.
Multiple fallbacks are provided to ensure compatibility across different VS Code versions

Screenshots

How to Test

Open VS Code and switch to the "Dark High Contrast" theme (File > Preferences > Color Theme > Dark High Contrast)
Open Roo Code and start a conversation
Look for file references in Roo's responses (text wrapped in backticks like filename)
Verify that these file references are now clearly visible with proper contrast
Switch to other themes and verify that file references appear with their normal styling

---

Important

Fixes text visibility issue in Dark High Contrast theme by adding a CSS rule to MarkdownBlock.tsx for inline code blocks.

• Behavior:
  • Fixes text visibility issue in Dark High Contrast theme by adding a CSS rule in MarkdownBlock.tsx.
  • Targets code:not(pre > code) elements to change text color using VS Code theme tokens.
  • Provides multiple fallbacks for color to ensure compatibility across VS Code versions.
• Implementation:
  • CSS rule added to StyledMarkdown in MarkdownBlock.tsx to apply only when Dark High Contrast theme is active.
  • Uses --vscode-editorInlayHint-foreground and other theme tokens for color.

^{This description was created by for 49fca10. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 49fca10

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[dcbartlett]

@cannuri You might want to check and update the Light High Contrast theme as well.

[mrubens]

Thanks @dcbartlett!