Skip to content

feat: extract theme provider #386

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
harry-whorlow wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: extract theme provider #386

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
00179c0
feat: extract theme provider
harry-whorlow Mar 12, 2026
8355776
chore: export type
harry-whorlow Mar 14, 2026
08263f7
chore: unify types
harry-whorlow Mar 14, 2026
76f237b
fix:lock
harry-whorlow Mar 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/cyan-times-marry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@tanstack/devtools-utils': minor
'@tanstack/devtools-ui': patch
---

Extract devtools-ui from devtools-utils to avoid theme miss-match
Copy link

@coderabbitai coderabbitai bot Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Typo in changeset description.

"miss-match" should be "mismatch".

-Extract devtools-ui from devtools-utils to avoid theme miss-match
+Extract devtools-ui from devtools-utils to avoid theme mismatch
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Extract devtools-ui from devtools-utils to avoid theme miss-match
Extract devtools-ui from devtools-utils to avoid theme mismatch
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.changeset/cyan-times-marry.md at line 6, Typo in the changeset description:
locate the changeset entry whose summary reads "Extract devtools-ui from
devtools-utils to avoid theme miss-match" and correct the word "miss-match" to
"mismatch" so the summary reads "Extract devtools-ui from devtools-utils to
avoid theme mismatch".

5 changes: 3 additions & 2 deletions examples/solid/devtools-ui/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { createEffect, createSignal } from 'solid-js'
import { render } from 'solid-js/web'

import { JsonTree, ThemeContextProvider } from '@tanstack/devtools-ui'

import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'

import './index.css'

const JsonTreeDate = {
Expand All @@ -20,7 +21,7 @@ const JsonTreePath = {
const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')

function App() {
const [theme, setTheme] = createSignal<'light' | 'dark'>(
const [theme, setTheme] = createSignal<TanStackDevtoolsTheme>(
darkThemeMq.matches ? 'dark' : 'light',
)

Expand Down
3 changes: 2 additions & 1 deletion packages/devtools-a11y/src/core/styles/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as goober from 'goober'
import { useTheme } from '@tanstack/devtools-ui'
import { createMemo } from 'solid-js'

import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
import type { RuleCategory, SeverityThreshold } from '../types/types'

const SEVERITY_COLORS: Record<SeverityThreshold, string> = {
Expand Down Expand Up @@ -49,7 +50,7 @@ const css = goober.css
const FONT_SCALE = 1.1
const fontPx = (size: number) => `calc(${size}px * ${FONT_SCALE})`

function createA11yPanelStyles(theme: 'light' | 'dark') {
function createA11yPanelStyles(theme: TanStackDevtoolsTheme) {
const t = (light: string, dark: string) => (theme === 'light' ? light : dark)

const bg = t('#f9fafb;', '#191c24')
Expand Down
14 changes: 8 additions & 6 deletions packages/devtools-ui/src/components/icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
// import { Show, createUniqueId } from 'solid-js'

import type { TanStackDevtoolsTheme } from './theme'

/* export function Search() {
return (
<svg
Expand Down Expand Up @@ -39,7 +41,7 @@ export function Trash() {
</svg>
)
} */
/*
/*
export function ChevronDown() {
return (
<svg
Expand Down Expand Up @@ -466,7 +468,7 @@ export function Link() {
</svg>
)
}
/*
/*

export function Pencil() {
return (
Expand Down Expand Up @@ -696,7 +698,7 @@ export function PiP() {
)
}

export function CopiedCopier(props: { theme: 'light' | 'dark' }) {
export function CopiedCopier(props: { theme: TanStackDevtoolsTheme }) {
return (
<svg
width="24"
Expand Down Expand Up @@ -735,7 +737,7 @@ export function ErrorCopier() {
</svg>
)
}
/*
/*
export function List() {
return (
<svg
Expand All @@ -755,7 +757,7 @@ export function List() {
)
}

export function Check(props: { checked: boolean; theme: 'light' | 'dark' }) {
export function Check(props: { checked: boolean; theme: TanStackDevtoolsTheme }) {
return (
<>
<Show when={props.checked}>
Expand Down Expand Up @@ -884,7 +886,7 @@ export function PauseCircle() {
</svg>
)
} */
/*
/*
export function TanstackLogo() {
const id = createUniqueId()
return (
Expand Down
10 changes: 5 additions & 5 deletions packages/devtools-ui/src/components/theme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import { createContext, createEffect, createSignal, useContext } from 'solid-js'
import type { Accessor, JSX } from 'solid-js'

export type Theme = 'light' | 'dark'
export type TanStackDevtoolsTheme = 'light' | 'dark'

type ThemeContextValue = {
theme: Accessor<Theme>
setTheme: (theme: Theme) => void
theme: Accessor<TanStackDevtoolsTheme>
setTheme: (theme: TanStackDevtoolsTheme) => void
}
const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)

export const ThemeContextProvider = (props: {
children: JSX.Element
theme: Theme
theme: TanStackDevtoolsTheme
}) => {
const [theme, setTheme] = createSignal<Theme>(props.theme)
const [theme, setTheme] = createSignal<TanStackDevtoolsTheme>(props.theme)
createEffect(() => {
setTheme(props.theme)
})
Expand Down
1 change: 1 addition & 0 deletions packages/devtools-ui/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export {
} from './components/section'
export { Header, HeaderLogo } from './components/header'
export { useTheme, ThemeContextProvider } from './components/theme'
export type { TanStackDevtoolsTheme } from './components/theme'
export {
CheckCircleIcon,
ChevronDownIcon,
Expand Down
5 changes: 3 additions & 2 deletions packages/devtools-ui/src/styles/use-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import * as goober from 'goober'
import { createEffect, createSignal } from 'solid-js'
import { useTheme } from '../components/theme'
import { tokens } from './tokens'

import type { TanStackDevtoolsTheme } from '../components/theme'
import type { ButtonVariant } from '../components/button'
import type { Theme } from '../components/theme'

const buttonVariantColors: Record<
ButtonVariant,
Expand Down Expand Up @@ -118,7 +119,7 @@ const buttonVariantColors: Record<
},
}
export const css = goober.css
const stylesFactory = (theme: Theme = 'dark') => {
const stylesFactory = (theme: TanStackDevtoolsTheme) => {
const { colors, font, size, border } = tokens
const { fontFamily } = font

Expand Down
3 changes: 0 additions & 3 deletions packages/devtools-utils/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,6 @@
"engines": {
"node": ">=18"
},
"dependencies": {
"@tanstack/devtools-ui": "workspace:^"
},
"devDependencies": {
"@tanstack/devtools": "workspace:^",
"tsup": "^8.5.0",
Expand Down
10 changes: 2 additions & 8 deletions packages/devtools-utils/src/solid/class-mount-impl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import { lazy } from 'solid-js'
import { Portal, render } from 'solid-js/web'

import type { JSX } from 'solid-js'
import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'

Expand All @@ -13,19 +14,12 @@ export function __mountComponent(
}>,
): () => void {
const Component = lazy(importFn)
const ThemeProvider = lazy(() =>
import('@tanstack/devtools-ui').then((m) => ({
default: m.ThemeContextProvider,
})),
)

return render(
() => (
<Portal mount={el}>
<div style={{ height: '100%' }}>
<ThemeProvider theme={props.theme}>
<Component {...props} />
</ThemeProvider>
<Component {...props} />
</div>
</Portal>
),
Expand Down
3 changes: 2 additions & 1 deletion packages/devtools/src/context/devtools-context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ import {
import { initialState } from './devtools-store'
import type { DevtoolsStore } from './devtools-store'
import type { JSX, Setter } from 'solid-js'
import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'

export interface TanStackDevtoolsPluginProps {
theme: DevtoolsStore['settings']['theme']
theme: TanStackDevtoolsTheme
devtoolsOpen: boolean
}
export interface TanStackDevtoolsPlugin {
Expand Down
5 changes: 3 additions & 2 deletions packages/devtools/src/context/devtools-store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { TabName } from '../tabs'
import type { TanStackDevtoolsPlugin } from './devtools-context'
import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'

type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift' | 'CtrlOrMeta'
type KeyboardKey = ModifierKey | (string & {})
Expand All @@ -21,7 +22,7 @@ type TriggerPosition =
| 'middle-right'

type TriggerProps = {
theme: 'light' | 'dark'
theme: TanStackDevtoolsTheme
}

export type DevtoolsStore = {
Expand Down Expand Up @@ -71,7 +72,7 @@ export type DevtoolsStore = {
* The theme of the dev tools
* @default "dark"
*/
theme: 'light' | 'dark'
theme: TanStackDevtoolsTheme

/**
* Whether the trigger should be completely hidden or not (you can still open with the hotkey)
Expand Down
1 change: 1 addition & 0 deletions packages/devtools/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ export type {
TanStackDevtoolsPluginProps,
TanStackDevtoolsConfig,
} from './context/devtools-context'
export type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
3 changes: 2 additions & 1 deletion packages/preact-devtools/src/devtools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ import type {
TanStackDevtoolsConfig,
TanStackDevtoolsPlugin,
TanStackDevtoolsPluginProps,
TanStackDevtoolsTheme,
} from '@tanstack/devtools'

type PluginRender =
| JSX.Element
| ((el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element)

type TriggerProps = {
theme: 'dark' | 'light'
theme: TanStackDevtoolsTheme
}

type TriggerRender =
Expand Down
3 changes: 2 additions & 1 deletion packages/react-devtools/src/devtools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ import type {
TanStackDevtoolsConfig,
TanStackDevtoolsPlugin,
TanStackDevtoolsPluginProps,
TanStackDevtoolsTheme,
} from '@tanstack/devtools'

type PluginRender =
| JSX.Element
| ((el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element)

type TriggerProps = {
theme: 'dark' | 'light'
theme: TanStackDevtoolsTheme
}

type TriggerRender =
Expand Down
3 changes: 2 additions & 1 deletion packages/solid-devtools/src/core.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import type {
TanStackDevtoolsConfig,
TanStackDevtoolsPlugin,
TanStackDevtoolsPluginProps,
TanStackDevtoolsTheme,
} from '@tanstack/devtools'

type SolidPluginRender =
Expand Down Expand Up @@ -76,7 +77,7 @@ export type TanStackDevtoolsSolidPlugin = Omit<
name: string | SolidPluginRender
}
interface TriggerProps {
theme: 'light' | 'dark'
theme: TanStackDevtoolsTheme
}
export interface TanStackDevtoolsInit {
/**
Expand Down
3 changes: 0 additions & 3 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading