docs: enable dark mode behind theme toggle (default stays light)#391
docs: enable dark mode behind theme toggle (default stays light)#391jarugupj wants to merge 7 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.
|
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
dark mode foundation was off-system. swap to the canonical kernel tokens: - background color #111113 -> #212225 (kernel charcoal / grey-dark-03, the brand's canonical dark background) - white-alpha rgba(255,255,255,...) -> grey-dark-12 alpha rgba(237,238,240,...) across table fills, borders, hovers, and the tinker-box border (kernel brand book lists white as "rare; prefer beige/grey-dark-12") - pricing button border #fff -> #EDEEF0 (grey-dark-12) wcag aaa still holds on the new bg: body 13.7:1, gold 7.57:1, green 6.35:1. intentionally untouched in this commit: - the comment reference to #111113 in the hero-bot rule (stale but cosmetic; will sweep separately if needed)
There was a problem hiding this comment.
Risk assessment: Low risk.
The current diff is limited to Mintlify docs presentation: docs.json theme configuration, dark-mode CSS overrides in style.css, and SVG assets for dark-mode imagery/logos. The update since the prior approval only adjusts dark background/border token values and does not expand the touched surface area.
I found no CODEOWNERS file in the repo. The PR is already approved, so I’m leaving the existing approval in place rather than adding another approval.
Sent by Cursor Automation: Assign PR reviewers
the hero-bot rule's explanatory comment still referenced #111113 after the brand-alignment swap to #212225. cosmetic only, no behavior change.
There was a problem hiding this comment.
Risk assessment: Low risk.
The current diff is limited to the Mintlify docs site's presentation layer: docs.json theme/logo/background configuration, dark-mode CSS overrides in style.css, and static SVG assets for dark-mode logo/hero imagery. There are no production application code, infrastructure, auth, data, or shared-library changes. The latest synchronize update only changes a CSS explanatory comment, so it does not increase risk from the prior assessment.
I found no CODEOWNERS file in the PR head. The PR is already approved, so I’m leaving the existing approval in place rather than approving again.
Sent by Cursor Automation: Assign PR reviewers
the existing style.css uses single-line terse comments (/* table headers */, /* tinker box responsive layout */). the dark-mode block had multi-line essay comments restating what the selectors already say. cropped to match.
There was a problem hiding this comment.
Risk assessment: Low risk.
The current diff is limited to the Mintlify docs site's presentation layer: docs.json theme/logo/background configuration, dark-mode CSS overrides in style.css, and static SVG assets for dark-mode logo/hero imagery. There are no production application code, infrastructure, auth, data, or shared-library changes.
The latest synchronize update only shortens CSS comments in style.css, so it does not increase risk from the existing approval. I found no CODEOWNERS file in the repo. The PR is already approved, so I’m leaving the existing approval in place rather than approving again.
Sent by Cursor Automation: Assign PR reviewers
1 participant
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