diff --git a/.changeset/moody-wings-type.md b/.changeset/moody-wings-type.md
new file mode 100644
index 00000000..94f0684f
--- /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 f2aed43f..c6cf1eb1 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>
   )
 }