From 4f6decca2d204f425c0f4cf190aa1a152c0d6e4e Mon Sep 17 00:00:00 2001
From: jarugupj <121142710+jarugupj@users.noreply.github.com>
Date: Sun, 14 Jun 2026 04:36:21 +0000
Subject: [PATCH 1/2] fix dark mode tinker-bot swap path on prod
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/`).
---
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 0c5e88f..900dd00 100644
--- a/style.css
+++ b/style.css
@@ -217,7 +217,7 @@ html.dark {
 }
 
 /* hero bot dark recolor */
-html.dark img[src*="/images/tinker-bot.svg"] { content: url("/images/tinker-bot-dark.svg"); }
+html.dark img[src*="/images/tinker-bot.svg"] { content: url("images/tinker-bot-dark.svg"); }
 
 /* warning callout — selector depends on mintlify's yellow-* classes; renames silently break this */
 html.dark .callout[class*="yellow"] {

From 7622fc596b1c691625b593de42596cd3debe5503 Mon Sep 17 00:00:00 2001
From: jarugupj <121142710+jarugupj@users.noreply.github.com>
Date: Sun, 14 Jun 2026 05:07:02 +0000
Subject: [PATCH 2/2] fix dark mode tinker-bot swap on prod using markup-level
 visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 index.mdx | 3 ++-
 style.css | 3 ---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/index.mdx b/index.mdx
index 4769ead..3471b60 100644
--- a/index.mdx
+++ b/index.mdx
@@ -42,7 +42,8 @@ import { CopyPromptButton } from '/snippets/copy-prompt-button.jsx';
   <h3 style={{ margin: 0, fontSize: '1.5rem', fontWeight: 600 }}>fast setup</h3>
   <div className="tinker-box-row">
     <div style={{ flexShrink: 0 }}>
-      <img src="/images/tinker-bot.svg" alt="" style={{ width: '146px', height: 'auto' }} />
+      <img src="/images/tinker-bot.svg" alt="" className="block dark:hidden" style={{ width: '146px', height: 'auto' }} />
+      <img src="/images/tinker-bot-dark.svg" alt="" className="hidden dark:block" style={{ width: '146px', height: 'auto' }} />
     </div>
     <div className="tinker-box-content">
       <p style={{ margin: 0, fontSize: '0.9375rem', lineHeight: 1.6, opacity: 0.8 }}>
diff --git a/style.css b/style.css
index 900dd00..6df2f67 100644
--- a/style.css
+++ b/style.css
@@ -216,9 +216,6 @@ html.dark {
   --btn-border: #EDEEF0;
 }
 
-/* hero bot dark recolor */
-html.dark img[src*="/images/tinker-bot.svg"] { content: url("images/tinker-bot-dark.svg"); }
-
 /* warning callout — selector depends on mintlify's yellow-* classes; renames silently break this */
 html.dark .callout[class*="yellow"] {
   background-color: rgba(237, 238, 240, 0.03) !important;