fix dark mode tinker-bot swap path#412
Conversation
The CSS swap rule used an absolute path (`/images/tinker-bot-dark.svg`) which resolves against the domain root in the browser. On prod the docs are served under `/docs/`, so the absolute path 404s and the swap silently keeps the light variant — invisible against the dark page. Drop the leading slash so the path resolves relative to the stylesheet's location, working in both the mintlify preview (docs at root) and prod (docs under `/docs/`).
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
jarugupj
changed the title
The previous CSS-based swap used a relative url() that resolved against the document URL (style.css is inlined as a <style> tag, not loaded as a separate stylesheet). On prod docs are served under /docs/ so the absolute /images/tinker-bot-dark.svg path 404s — the light variant stays rendered and is invisible against the dark page. Swap to the standard mintlify dark-mode pattern: render both light and dark <img> tags with tailwind block/dark:block visibility classes. Mintlify's CDN rewriter handles asset paths for both, so this works in every environment with no path-resolution edge cases.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Risk assessment: Very Low.
This PR makes a tiny, isolated docs homepage UI change: it swaps the tinker bot image via separate light/dark image elements and removes the prior dark-mode CSS content: url(...) override. The changed files are limited to index.mdx and style.css, with no production logic, infrastructure, auth, permissions, or shared system impact. No CODEOWNERS file is present, and there were no existing approvals to duplicate.
Sent by Cursor Automation: Assign PR reviewers
|
Firetiger deploy monitoring skipped This PR didn't match the auto-monitor filter configured on your GitHub connection:
Reason: PR appears to be documentation/website styling changes (dark mode UI fix in index.mdx and style.css), not infrastructure or core service changes that would require deploy monitoring. To monitor this PR anyway, reply with |
1 participant
Summary
Dark-mode tinker-bot was invisible on prod. The previous fix used a CSS
content: url()swap, which silently failed because:style.cssas a<style>tag — not a<link>— so relativeurl()resolves against the document URL, not a stylesheet URLhttps://kernel.sh/docs(no trailing slash), so the absolute path/images/tinker-bot-dark.svgresolved tokernel.sh/images/…(outside the docs subpath) and 404'dSwitched to mintlify's standard dual-
<img>pattern, gated by tailwindblock/dark:block. Mintlify's CDN rewriter handles both asset paths, so it works in prod, preview, and dev.Changes
index.mdx— one<img>becomes two, gated by visibility classesstyle.css— drop the unused/* hero bot dark recolor */blockTest plan
/(preview): cream tinker-bot renders/: cream tinker-bot renders