docs: enable dark mode behind theme toggle (default stays light)#391
Draft
jarugupj wants to merge 4 commits into
Draft
docs: enable dark mode behind theme toggle (default stays light)#391jarugupj wants to merge 4 commits into
jarugupj wants to merge 4 commits into
Conversation
- Add light/dark logo pair and dark background (#111113, brand grey-dark scale) - Add html.dark overrides for tables, tinker-box, button border, hero bot - Keep default appearance light; dark is opt-in pending brand/design review
- add dark-recolored variants for the four homepage card svgs (o11y, chromium, auth, stealth) so cream/tan/green tiles no longer blast on the dark page bg - add dark-recolored tinker-bot variant and drop the filter: invert() hack on style.css - swap variants under html.dark via content: url(...) so index.mdx stays untouched and light mode is byte-for-byte identical contrast on #111113: body #EDEEF0 ~16:1, accent #CAB168 ~9:1 (WCAG AAA).
the cream/green/tan card tiles read as framed illustrations on a dark page, not as page leakage. keeping them aligns with how the kernel.sh brand handles illustrations (always light surface) and avoids the visual inconsistency of charcoal-everything-except-chromium-green. tinker-bot keeps its dark-recolored variant: it's a flat silhouette with no card frame, so it actually disappears against #111113 — that swap is a readability fix, not a brand call.
Contributor
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
…ewrite
mintlify rewrites img srcs at deploy time to a cdn url with query params
(/{deployment}/{hash}/images/tinker-bot.svg?fit=max&auto=format&...), so
the prior [src$="..."] suffix selector never matched in production and
the dark recolor swap silently no-op'd. [src*="..."] handles both raw
and rewritten srcs.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Risk assessment: Low risk.
This PR changes the Mintlify docs site's appearance configuration, adds dark-mode-only CSS overrides, and adds SVG assets for the dark logo/tinker-bot. The default theme remains light, the changes are confined to documentation presentation, and there are no production code, infrastructure, auth, data, or shared-library changes.
I found no CODEOWNERS file in the repo and no existing approval, so approving under the Low-risk rule.
Sent by Cursor Automation: Assign PR reviewers
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
1 participant
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.
Summary
Enables the Mintlify theme toggle so docs readers can switch to dark mode. The default appearance stays
light— first-time visitors see no change, the toggle is opt-in.Changes
docs.json—appearance.strict: false, dark logo + dark background#111113(Radix Gray dark-01).logo/light.svg—#EDEEF0recolor of the existing logo (paths byte-identical toblack.svg) used in dark mode.style.css—html.dark-scoped overrides for tables, the.tinker-boxborder, and the pricing button border. Light mode rules untouched.images/tinker-bot-dark.svg+ one CSS swap — the hero bot is a flat#1C2024silhouette that's invisible against#111113, so it gets a#EDEEF0recolor.Notes
#EDEEF0on#111113≈ 16:1, accent#CAB168on#111113≈ 9:1.Test plan