Skip to content

fix(theme-classic): make code block Copy and Word wrap buttons visible (#10821)#11778

Open
Anas0709 wants to merge 1 commit intofacebook:mainfrom
Anas0709:fix/codeblock-button-opaque-background-10821
Open

fix(theme-classic): make code block Copy and Word wrap buttons visible (#10821)#11778
Anas0709 wants to merge 1 commit intofacebook:mainfrom
Anas0709:fix/codeblock-button-opaque-background-10821

Conversation

@Anas0709
Copy link

@Anas0709 Anas0709 commented Mar 5, 2026

Fixes #10821

The Copy and Toggle word wrap buttons in code blocks were nearly invisible due to semi-transparent backgrounds blending with the code text.

Changes:

  • Use opaque background (--ifm-background-surface-color) so buttons remain visible
  • Set opacity to 1 on code block hover (was 0.4) for clearer visibility

facebook#10821)

- Use opaque background (--ifm-background-surface-color) so buttons don't blend with code text
- Set opacity to 1 on code block hover for clear visibility (was 0.4, causing near-invisible buttons)
- Fixes buttons being almost invisible when hovering code examples

Made-with: Cursor
@meta-cla meta-cla bot added the CLA Signed Signed Facebook CLA label Mar 5, 2026
@netlify
Copy link

netlify bot commented Mar 5, 2026

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit f5f8124
🔍 Latest deploy log https://app.netlify.com/projects/docusaurus-2/deploys/69a9a755fb0a250008e9d077
😎 Deploy Preview https://deploy-preview-11778--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

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

Labels

CLA Signed Signed Facebook CLA

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Toggle word wrap and Copy buttons in code examples almost invisible

1 participant