From 8861a58aa7d31b3ea47864684391a7186e829f97 Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Mon, 30 Mar 2026 10:01:29 +0800
Subject: [PATCH] refactor: Update iframe theme styles and improve Inspect
 iframe source handling

---
 .changeset/cool-impalas-wink.md                 |  5 +++++
 .gitignore                                      |  2 +-
 packages/ui/src/features/inspect/Inspect.tsx    | 17 +++++++++++++++--
 .../ui/src/features/inspect/iframe-theme.ts     |  6 +++---
 4 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/cool-impalas-wink.md

diff --git a/.changeset/cool-impalas-wink.md b/.changeset/cool-impalas-wink.md
new file mode 100644
index 0000000..8557a78
--- /dev/null
+++ b/.changeset/cool-impalas-wink.md
@@ -0,0 +1,5 @@
+---
+'@qwik.dev/devtools': patch
+---
+
+refactor: Update iframe theme styles and improve Inspect iframe source handling
diff --git a/.gitignore b/.gitignore
index c67ca9f..41be1f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -65,5 +65,5 @@ testem.log
 Thumbs.db
 .vite-inspect
 .pnpm-store/*
-qwik/*
+related-qwik/*
 .cursor/skills/*
\ No newline at end of file
diff --git a/packages/ui/src/features/inspect/Inspect.tsx b/packages/ui/src/features/inspect/Inspect.tsx
index 4915daa..5bdf13b 100644
--- a/packages/ui/src/features/inspect/Inspect.tsx
+++ b/packages/ui/src/features/inspect/Inspect.tsx
@@ -1,12 +1,25 @@
-import { component$ } from '@qwik.dev/core';
+import { component$, isBrowser } from '@qwik.dev/core';
 import { inspectorLink } from './constant';
 import { setupIframeThemeSync } from './iframe-theme';
 
+/**
+ * Inspect iframe must load under app root (Vite `BASE_URL` + origin), not `location.pathname`,
+ * so deep routes do not produce `.../nested/route__inspect/`.
+ * SSR: no `location` — return empty until the client runs.
+ */
+function getInspectIframeSrc(): string {
+  if (!isBrowser) {
+    return '';
+  }
+  const base = new URL(import.meta.env.BASE_URL ?? '/', location.origin);
+  return new URL(inspectorLink, base).href;
+}
+
 export const Inspect = component$(() => {
   return (
     <div class="h-full w-full flex-1 overflow-hidden rounded-2xl border border-glass-border bg-card-item-bg">
       <iframe
-        src={`${location.href}${inspectorLink}`}
+        src={getInspectIframeSrc()}
         width={'100%'}
         height={'100%'}
         id="inspect_qwik"
diff --git a/packages/ui/src/features/inspect/iframe-theme.ts b/packages/ui/src/features/inspect/iframe-theme.ts
index b97653c..3622352 100644
--- a/packages/ui/src/features/inspect/iframe-theme.ts
+++ b/packages/ui/src/features/inspect/iframe-theme.ts
@@ -13,9 +13,9 @@ const GLASSMORPHISM_CSS = `
     --c-bg-base: transparent !important;
     --c-bg-nav: transparent !important;
     --c-bg-active: transparent !important;
-    --iframe-border: rgba(255, 255, 255, 0.08) !important;
-    --iframe-hover: rgba(255, 255, 255, 0.06) !important;
-    color-scheme: dark;
+    --iframe-border: rgba(0, 0, 0, 0.1) !important;
+    --iframe-hover: rgba(0, 0, 0, 0.04) !important;
+    color-scheme: light;
   }
   /* 仅针对主视图容器做透明处理，不再暴力让所有 div/section 变透明 */
   html, body, #app, main, header, nav, footer { background-color: transparent !important; }