Skip to content

fix: Markdown code block contrast in dark mode (fixes #1253)#1257

Open
spider-yamet wants to merge 4 commits intoeigent-ai:mainfrom
spider-yamet:feat/Improve-markdown-rendering
Open

fix: Markdown code block contrast in dark mode (fixes #1253)#1257
spider-yamet wants to merge 4 commits intoeigent-ai:mainfrom
spider-yamet:feat/Improve-markdown-rendering

Conversation

@spider-yamet
Copy link
Contributor

Summary

Fixes unreadable code blocks in dark mode (dark text on dark background) and ensures code blocks use theme-aware foreground color everywhere.

Fixes #1253

Changes

Dark mode code block contrast

  • src/style/markdown-styles.css: In [data-theme='dark'], set explicit text color for code:
    • .markdown-body pre and .markdown-body pre code: color: #e6edf3
    • .markdown-body code (inline): color: #e6edf3
  • Fixes the case where app theme is dark but OS preference is light: github-markdown-css only uses prefers-color-scheme, so --fgColor-default stayed dark and code was unreadable on dark backgrounds.

Theme token for code foreground

  • src/style/token.css: In [data-theme='dark'], set --code-foreground: #e6edf3 so code text follows app theme and stays readable on --code-surface.

WorkFlow MarkDown

  • src/components/WorkFlow/MarkDown.tsx: Applied text-code-foreground to pre and code (block and inline) so workflow markdown code blocks use the semantic token and stay readable in dark mode.

Testing

  • Dark mode: Code blocks in chat/README and workflow markdown show light text (#e6edf3) on dark background.
  • Light mode: Unchanged; code remains dark on light background.

Copy link
Collaborator

@bytecii bytecii left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you also add a snapshot?

@Wendong-Fan
Copy link
Contributor

thanks @spider-yamet for the contribution! Could you add a short video or snapshot for your PR like how #1258 did? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Improve Markdown Rendering: Fix Dark Mode Code Contrast & Adopt GitHub-style Formatting

3 participants