From 865d318c3fa5b945b73284c71bea981551c4598b Mon Sep 17 00:00:00 2001
From: Harry Whorlow <whorlowharry@gmail.com>
Date: Thu, 12 Mar 2026 21:48:59 +0100
Subject: [PATCH 1/3] feat: extract theme to devtool components

---
 packages/pacer-devtools/src/components/index.tsx | 16 ++++++++++++++++
 packages/pacer-devtools/src/core.tsx             |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 packages/pacer-devtools/src/components/index.tsx

diff --git a/packages/pacer-devtools/src/components/index.tsx b/packages/pacer-devtools/src/components/index.tsx
new file mode 100644
index 00000000..6f0b4baf
--- /dev/null
+++ b/packages/pacer-devtools/src/components/index.tsx
@@ -0,0 +1,16 @@
+import { PacerContextProvider } from '../PacerContextProvider'
+import { Shell } from './Shell'
+
+import { ThemeContextProvider } from '@tanstack/devtools-ui'
+
+import type { DevtoolProps } from '@tanstack/devtools-utils/solid'
+
+export default function PacerDevtools(props: DevtoolProps) {
+  return (
+    <ThemeContextProvider theme={props.theme}>
+      <PacerContextProvider>
+        <Shell />
+      </PacerContextProvider>
+    </ThemeContextProvider>
+  )
+}
diff --git a/packages/pacer-devtools/src/core.tsx b/packages/pacer-devtools/src/core.tsx
index cf67bbdf..ea380393 100644
--- a/packages/pacer-devtools/src/core.tsx
+++ b/packages/pacer-devtools/src/core.tsx
@@ -3,7 +3,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid'
 export interface PacerDevtoolsInit {}
 
 const [PacerDevtoolsCore, PacerDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./PacerDevtools'),
+  () => import('./components'),
 )
 
 export { PacerDevtoolsCore, PacerDevtoolsCoreNoOp }

From b83887e787c926a947b3a12f0a5fb5c0f6dd3942 Mon Sep 17 00:00:00 2001
From: Harry Whorlow <whorlowharry@gmail.com>
Date: Thu, 12 Mar 2026 21:50:08 +0100
Subject: [PATCH 2/3] chore: changeset

---
 .changeset/long-corners-repair.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/long-corners-repair.md

diff --git a/.changeset/long-corners-repair.md b/.changeset/long-corners-repair.md
new file mode 100644
index 00000000..5e35f9e4
--- /dev/null
+++ b/.changeset/long-corners-repair.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/pacer-devtools': patch
+---
+
+Moves devtools theme to the component to avoid theme miss-match.

From 028d4b82b84de48d8e9f7b00d9555ab0cc19d8ff Mon Sep 17 00:00:00 2001
From: Harry Whorlow <whorlowharry@gmail.com>
Date: Mon, 16 Mar 2026 10:58:26 +0100
Subject: [PATCH 3/3] fix: pr comments and test

---
 .changeset/long-corners-repair.md             |  2 +-
 packages/pacer-devtools/src/PacerDevtools.tsx | 19 -------------------
 .../pacer-devtools/src/components/index.tsx   |  9 ++++++---
 3 files changed, 7 insertions(+), 23 deletions(-)
 delete mode 100644 packages/pacer-devtools/src/PacerDevtools.tsx

diff --git a/.changeset/long-corners-repair.md b/.changeset/long-corners-repair.md
index 5e35f9e4..084d5c9c 100644
--- a/.changeset/long-corners-repair.md
+++ b/.changeset/long-corners-repair.md
@@ -2,4 +2,4 @@
 '@tanstack/pacer-devtools': patch
 ---
 
-Moves devtools theme to the component to avoid theme miss-match.
+Moves devtools theme to the component to avoid theme mismatch.
diff --git a/packages/pacer-devtools/src/PacerDevtools.tsx b/packages/pacer-devtools/src/PacerDevtools.tsx
deleted file mode 100644
index 6a378ddd..00000000
--- a/packages/pacer-devtools/src/PacerDevtools.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ThemeContextProvider } from '@tanstack/devtools-ui'
-import { PacerContextProvider } from './PacerContextProvider'
-import { Shell } from './components/Shell'
-
-import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
-
-interface PacerDevtools {
-  theme: TanStackDevtoolsTheme
-}
-
-export default function PacerDevtools(props: PacerDevtools) {
-  return (
-    <ThemeContextProvider theme={props.theme}>
-      <PacerContextProvider>
-        <Shell />
-      </PacerContextProvider>
-    </ThemeContextProvider>
-  )
-}
diff --git a/packages/pacer-devtools/src/components/index.tsx b/packages/pacer-devtools/src/components/index.tsx
index 6f0b4baf..d3449366 100644
--- a/packages/pacer-devtools/src/components/index.tsx
+++ b/packages/pacer-devtools/src/components/index.tsx
@@ -1,11 +1,14 @@
+import { ThemeContextProvider } from '@tanstack/devtools-ui'
 import { PacerContextProvider } from '../PacerContextProvider'
 import { Shell } from './Shell'
 
-import { ThemeContextProvider } from '@tanstack/devtools-ui'
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
 
-import type { DevtoolProps } from '@tanstack/devtools-utils/solid'
+interface DevtoolsProps {
+  theme: TanStackDevtoolsTheme
+}
 
-export default function PacerDevtools(props: DevtoolProps) {
+export default function PacerDevtools(props: DevtoolsProps) {
   return (
     <ThemeContextProvider theme={props.theme}>
       <PacerContextProvider>