From f7e0eaf53a27a89da6caf1c73accb217c49b0d26 Mon Sep 17 00:00:00 2001
From: Harry Whorlow <whorlowharry@gmail.com>
Date: Thu, 12 Mar 2026 22:17:10 +0100
Subject: [PATCH] feat(devtools): extract theme to devtool components

---
 .changeset/moody-wings-type.md                |  5 +++++
 .../ai-devtools/src/components/Shell.tsx      | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/moody-wings-type.md

diff --git a/.changeset/moody-wings-type.md b/.changeset/moody-wings-type.md
new file mode 100644
index 000000000..94f0684f3
--- /dev/null
+++ b/.changeset/moody-wings-type.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/ai-devtools-core': patch
+---
+
+Moves devtools theme to the component to avoid theme miss-match.
diff --git a/packages/typescript/ai-devtools/src/components/Shell.tsx b/packages/typescript/ai-devtools/src/components/Shell.tsx
index f2aed43f8..c6cf1eb19 100644
--- a/packages/typescript/ai-devtools/src/components/Shell.tsx
+++ b/packages/typescript/ai-devtools/src/components/Shell.tsx
@@ -1,15 +1,24 @@
-import { createSignal, onCleanup, onMount } from 'solid-js'
+import {
+  createSignal,
+  onCleanup,
+  onMount,
+  ThemeContextProvider,
+} from 'solid-js'
 import { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui'
 import { useStyles } from '../styles/use-styles'
 import { AIProvider } from '../store/ai-context'
 import { ConversationsList } from './ConversationsList'
 import { ConversationDetails } from './ConversationDetails'
 
-export default function Devtools() {
+import type { DevtoolProps } from '@tanstack/devtools-utils/solid'
+
+export default function Devtools(props: DevtoolProps) {
   return (
-    <AIProvider>
-      <DevtoolsContent />
-    </AIProvider>
+    <ThemeContextProvider theme={props.theme}>
+      <AIProvider>
+        <DevtoolsContent />
+      </AIProvider>
+    </ThemeContextProvider>
   )
 }