Skip to content

Fix: unreadable code text in the dark Try-it-now block - #17

Merged
fosterstack-admin merged 1 commit into
mainfrom
fix/pre-code-contrast
Sep 12, 2026
Merged

Fix: unreadable code text in the dark Try-it-now block#17
fosterstack-admin merged 1 commit into
mainfrom
fix/pre-code-contrast

Conversation

@fosterstack-admin

@fosterstack-admin fosterstack-admin commented Sep 12, 2026

Copy link
Copy Markdown
Contributor

The global code rule paints --card background + border + padding on every <code>, including the one inside the dark <pre> — light text on light chips in light mode, boxed lines in dark mode. Added:

pre code { background: none; border: 0; padding: 0; color: inherit; font-size: 1em; }

(font-size: 1em stops the .88em inline-code size compounding inside the pre's .9rem.)

Before / after (dark mode simulated by forcing the dark palette variables, since headless capture follows the OS theme; screenshots in the private ops repo):

before after
light before-light.png after-light.png
dark before-dark.png after-dark.png

Both commands read clearly in both modes after the fix. Copy-paste is plain text by construction — the block is <pre><code>raw text</code></pre> with no child elements, and CSS never enters the clipboard.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Jahm7QG8cVw7zcGeZV6Vet

The code rule paints the --card background and a border on every <code>;
inside the dark 'Try it now' <pre> that meant light text on light chips.
pre code now resets background, border, padding, and inherits color.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jahm7QG8cVw7zcGeZV6Vet
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Sep 12, 2026

Copy link
Copy Markdown

Deploying www with  Cloudflare Pages  Cloudflare Pages

Latest commit: 1d881f1
Status: ✅  Deploy successful!
Preview URL: https://35c2a114.www-4rw.pages.dev
Branch Preview URL: https://fix-pre-code-contrast.www-4rw.pages.dev

View logs

@fosterstack-admin fosterstack-admin left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

LGTM

@fosterstack-admin
fosterstack-admin merged commit deb8a03 into main Sep 12, 2026
2 checks passed
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.

1 participant