fix(devtools)!: follow the TanStack Devtools theme in the panel

[JasonPaff]

Found in the PAR-3 trial on the ATK web app. The Paramour panel rendered white inside a dark TanStack Devtools shell. TanStack's setting was theme: "dark" and the app's <html> was dark, but .pmr-root had data-theme="light".

Cause

paramourDevtoolsPlugin() returned render: <ParamourDevtoolsPanel />. In @tanstack/react-devtools (checked 0.10.0, 0.10.8 and 0.10.13), convertRender calls render(el, props) only when render is a function, and uses an element as-is. Core 0.11–0.15 calls it with { theme, devtoolsOpen }. So the panel never received theme and fell back to "light". The docs said the shell "clones the rendered element and injects theme", which no supported version does.

Change

• render is now (_el, { theme }) => <ParamourDevtoolsPanel theme={theme} />. Every shell in the >=0.10.0 peer range calls a function render with the theme.
• Breaking (types), decided for the rc: ParamourDevtoolsPluginEntry.render changes from ReactElement to (el: HTMLElement, props: { readonly theme: "dark" | "light" }) => ReactElement. <TanStackDevtools plugins={[paramourDevtoolsPlugin()]} /> is unchanged. Only code that reads entry.render as an element is affected. The changeset is major, which stays at 1.0.0-rc.2 in pre mode (checked with changeset status).
• The devtools reference, the devtools guide and the panel prop comment no longer claim injection.

Verification

• New theme.test.tsx case: the entry's render, called as the shell calls it, mounts the panel with that theme and flips it without remounting. It fails without the fix with entry.render is not a function.
• public-api.tst.tsx pins the new render type and still checks assignability to the real shell's plugins type. test:types:devtools passes on TS 5.4 and current.
• pnpm test packages/devtools: 86 passed. Typecheck, lint and the examples' typecheck are clean.
• In the browser, examples/basic on the local build with the real TanStack shell: the shell set to dark gives data-theme="dark", and set to light gives "light". On /product/42?page=2&q=cable the panel shows the /app hooks' params and search decode, and the console is clean.

Fixes PAR-120

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
paramour-docs	Ready	Preview	Oct 3, 2026 2:22am UTC