Fix invisible chat code block text when OS color scheme and app theme disagree#1735
Open
iyernaveenr wants to merge 1 commit into
Open
Conversation
The imported markdown stylesheet colors code text based on the OS color scheme, while the custom overrides force code block backgrounds based on the app theme. When the two disagree, code text lands on a background of nearly the same color and becomes unreadable. Pin the code text color alongside each forced background so code stays readable in every OS scheme and app theme combination, and let code inside blocks inherit it. Signed-off-by: Naveen R. Iyer <iyernaveenr@gmail.com>
iyernaveenr
force-pushed
the
naveen_r_iyer/fix-markdown-code-block-invisible-text
branch
from
abf022f to
228b978
Compare
iyernaveenr
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
In the chat, fenced code block text can render invisible (blank until selected). Originally reported with the OS in dark mode and the app in light theme, but the same failure exists in the mirrored combination (OS light, app dark).
Root cause
github-markdown-csscolors code text via--fgColor-default, keyed to the OS color scheme: its@media (prefers-color-scheme: ...)blocks apply the palette to bare.markdown-body, and.markdown-body pre { color: var(--fgColor-default) }picks it up (near-white when OS-dark, near-black when OS-light). The app's custom overrides insrc/style/markdown-styles.cssforce code-block backgrounds per app theme (data-theme): light#f6f8fa, dark#161b22. Whenever the OS scheme and the app theme disagree, the OS-keyed text color lands on an app-keyed background of nearly the same color and becomes unreadable. Body prose is unaffected because a separate.markdown-body { color: inherit }override handles it, but that does not cascade intopre.Fix
Pin the code text color alongside each forced background, so text and background are always keyed to the same (app) theme:
.markdown-body preusescolor: #1f2328next to its forced light background.[data-theme='dark'] .markdown-body preusescolor: #e6edf3next to its forced dark background..markdown-body pre codeusescolor: inheritso block contents follow the block.Inline
.markdown-body codeneeds no pin: the stylesheet never sets a text color on it directly, so it correctly inherits the app-theme text color in both themes.Testing
Verified all four OS-scheme x app-theme combinations on a chat response containing prose, inline code, and a fenced code block: