docs: fix dark-mode background on Add-to-wallet buttons - #2222
Merged
Conversation
The AddNetworkButton cards rendered white in dark mode because dark:bg-background-dark did not override the Mintlify .card base white. Use dark:!bg-[#0b0d10] (matching docs.json background.color.dark) so the buttons match the page and adjacent native cards in dark mode; light mode is unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
viral-sangani
approved these changes
Jul 20, 2026
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
On the Docs Home page, the two "Add Celo … to your wallet" buttons rendered white in dark mode (they should be dark, matching the page background and the native
<Card>components above them). Light mode was fine.Cause
In
snippets/AddNetworkButton.jsx, the container useddark:bg-background-dark, which did not win over the Mintlify.cardbase white background — sobg-whiteshowed through in dark mode. The element already forces its border with!important(hover:!border-primary), a hint the base.cardstyles need!to override.Fix
One-line change to the shared component:
bg-white dark:bg-background-darkbg-white dark:!bg-[#0b0d10]#0b0d10equalsdocs.json→background.color.dark, so the buttons match the page and native cards in dark mode. The!importantguarantees the override. Light mode is unchanged.Because both the Home tab (
home/celo.mdx) and the Build tab (build-on-celo/network-overview.mdx) import this single snippet, all tabs are fixed at once.Verification
Ran
mint devlocally and confirmed both buttons render dark in dark mode (subtle light border, matching native cards) and remain white in light mode, on both the Home page and/build-on-celo/network-overview. Hover border highlight still works.🤖 Generated with Claude Code