feat(devtools): extract theme to devtool components (#2079)

Author: harry-whorlow

.changeset/wicked-feet-camp.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/react-form-devtools': patch
+'@tanstack/solid-form-devtools': patch
+'@tanstack/form-devtools': patch
+---
+
+Extract devtools theme to form devtools

packages/form-devtools/package.json

@@ -72,8 +72,8 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/devtools-ui": "^0.5.0",
-    "@tanstack/devtools-utils": "^0.3.2",
+    "@tanstack/devtools-ui": "^0.5.1",
+    "@tanstack/devtools-utils": "^0.4.0",
     "@tanstack/form-core": "workspace:*",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.18",

packages/form-devtools/src/components/index.tsx

@@ -1,10 +1,20 @@
+import { ThemeContextProvider } from '@tanstack/devtools-ui'
+
 import { FormEventClientProvider } from '../contexts/eventClientContext'
 import { Shell } from './Shell'
 
-export default function Devtools() {
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
+
+interface DevtoolsProps {
+  theme: TanStackDevtoolsTheme
+}
+
+export default function Devtools(props: DevtoolsProps) {
   return (
-    <FormEventClientProvider>
-      <Shell />
-    </FormEventClientProvider>
+    <ThemeContextProvider theme={props.theme}>
+      <FormEventClientProvider>
+        <Shell />
+      </FormEventClientProvider>
+    </ThemeContextProvider>
   )
 }

packages/react-form-devtools/package.json

@@ -52,7 +52,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/devtools-utils": "^0.3.2",
+    "@tanstack/devtools-utils": "^0.4.0",
     "@tanstack/form-devtools": "workspace:*"
   },
   "devDependencies": {

packages/solid-form-devtools/package.json

@@ -54,7 +54,7 @@
     "solid-js": ">=1.9.7"
   },
   "dependencies": {
-    "@tanstack/devtools-utils": "^0.3.2",
+    "@tanstack/devtools-utils": "^0.4.0",
     "@tanstack/form-devtools": "workspace:*"
   },
   "devDependencies": {