refactor: Update iframe theme styles and improve Inspect iframe source handling (#91)

Author: JerryWu1234

.changeset/cool-impalas-wink.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/devtools': patch
+---
+
+refactor: Update iframe theme styles and improve Inspect iframe source handling

.gitignore

@@ -65,5 +65,5 @@ testem.log
 Thumbs.db
 .vite-inspect
 .pnpm-store/*
-qwik/*
+related-qwik/*
 .cursor/skills/*

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"

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; }