feat(devtools): allow passing a theme via prop #9887
Conversation
🦋 Changeset detectedLatest commit: 312e9d0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughA theme option ('dark' | 'light' | 'system') was added and exported from core contexts, propagated through core Devtools components and public APIs, and implemented in React, Solid, and Vue packages. New public setTheme(theme?) methods and theme props allow runtime theme control and prioritize explicit props over stored/default preferences. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Framework as Framework Component
participant Devtools as TanstackQueryDevtools/Panel
participant ThemeState as Theme Signal
participant UI as Devtools UI Component
User->>Framework: provide theme prop (optional)
Framework->>Devtools: construct/init (opts includes theme?)
Devtools->>ThemeState: initialize theme signal from config
Framework->>Devtools: on prop change -> call setTheme(theme || 'system')
Devtools->>ThemeState: update signal
ThemeState-->>UI: reactive update
UI->>UI: resolve theme (props.theme || localStore || THEME_PREFERENCE) -> apply (or colorScheme for 'system')
UI-->>User: render UI with resolved theme
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (3)
🧰 Additional context used🧠 Learnings (1)📚 Learning: 2025-08-19T03:18:18.303ZApplied to files:
🧬 Code graph analysis (2)packages/react-query-devtools/src/ReactQueryDevtools.tsx (2)
packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🔇 Additional comments (5)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 312e9d0
☁️ Nx Cloud last updated this comment at |
|
Sizes for commit 312e9d0:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
packages/solid-query-devtools/src/devtools.tsx (1)
48-51: Consider importing the Theme type for consistency.The theme property is defined inline as
'light' | 'dark' | 'system', but the core package definesThemeas'dark' | 'light' | 'system'inpackages/query-devtools/src/contexts/QueryDevtoolsContext.ts. While functionally equivalent, importing the shared type would improve consistency across packages.Consider importing the Theme type:
import type { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, + Theme, } from '@tanstack/query-devtools'Then update the interface:
/** * Set this to 'light' or 'dark' to change the theme of the devtools panel. */ - theme?: 'light' | 'dark' | 'system' + theme?: Theme
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
.changeset/olive-ducks-move.md(1 hunks)packages/query-devtools/src/DevtoolsComponent.tsx(2 hunks)packages/query-devtools/src/DevtoolsPanelComponent.tsx(2 hunks)packages/query-devtools/src/TanstackQueryDevtools.tsx(7 hunks)packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx(7 hunks)packages/query-devtools/src/contexts/QueryDevtoolsContext.ts(2 hunks)packages/react-query-devtools/src/ReactQueryDevtools.tsx(4 hunks)packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx(3 hunks)packages/solid-query-devtools/src/devtools.tsx(3 hunks)packages/solid-query-devtools/src/devtoolsPanel.tsx(3 hunks)packages/vue-query-devtools/src/devtools.vue(1 hunks)packages/vue-query-devtools/src/devtoolsPanel.vue(1 hunks)packages/vue-query-devtools/src/types.ts(2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-08-19T03:18:18.303Z
Learnt from: oscartbeaumont
Repo: TanStack/query PR: 9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.
Applied to files:
packages/vue-query-devtools/src/types.tspackages/query-devtools/src/DevtoolsComponent.tsxpackages/query-devtools/src/contexts/QueryDevtoolsContext.tspackages/query-devtools/src/DevtoolsPanelComponent.tsxpackages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsxpackages/solid-query-devtools/src/devtoolsPanel.tsxpackages/solid-query-devtools/src/devtools.tsxpackages/query-devtools/src/TanstackQueryDevtools.tsx.changeset/olive-ducks-move.mdpackages/react-query-devtools/src/ReactQueryDevtools.tsxpackages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx
🧬 Code graph analysis (5)
packages/query-devtools/src/DevtoolsComponent.tsx (2)
packages/query-devtools/src/constants.ts (1)
THEME_PREFERENCE(10-10)packages/query-devtools/src/contexts/QueryDevtoolsContext.ts (1)
Theme(8-8)
packages/query-devtools/src/DevtoolsPanelComponent.tsx (2)
packages/query-devtools/src/constants.ts (1)
THEME_PREFERENCE(10-10)packages/query-devtools/src/contexts/QueryDevtoolsContext.ts (1)
Theme(8-8)
packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx (3)
packages/react-query-devtools/src/index.ts (2)
ReactQueryDevtoolsPanel(13-18)DevtoolsPanelOptions(20-20)packages/react-query-devtools/src/production.ts (1)
ReactQueryDevtoolsPanel(7-7)packages/solid-query-devtools/src/devtoolsPanel.tsx (1)
DevtoolsPanelOptions(8-46)
packages/query-devtools/src/TanstackQueryDevtools.tsx (1)
packages/query-devtools/src/contexts/QueryDevtoolsContext.ts (1)
Theme(8-8)
packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx (1)
packages/query-devtools/src/contexts/QueryDevtoolsContext.ts (1)
Theme(8-8)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
🔇 Additional comments (12)
.changeset/olive-ducks-move.md (1)
1-8: ✓ Changeset format and content look good.The changeset properly declares version bumps (minor for all 4 packages) and clearly describes the feature. All affected packages mentioned in the PR are accounted for, and the version level is appropriate for a new non-breaking feature.
packages/vue-query-devtools/src/devtoolsPanel.vue (1)
31-31: LGTM! Theme prop integrated correctly.The theme prop is properly passed to the constructor and reactively applied via
setTheme, with a sensible default of 'system'.Also applies to: 37-37
packages/query-devtools/src/contexts/QueryDevtoolsContext.ts (1)
8-8: LGTM! Theme type properly defined.The Theme type and its integration into QueryDevtoolsProps is clean and consistent.
Also applies to: 34-34
packages/query-devtools/src/DevtoolsPanelComponent.tsx (1)
18-20: Consider prioritizing prop over localStorage for theme resolution.The current implementation prioritizes
localStore.theme_preferenceoverprops.theme. This means if a user explicitly passes a theme prop, it will be ignored if a localStorage value exists. The PR description mentions this as a discussion point: "if athemeprop is provided, it may be preferable to override the local storage value."For reactive theme control (the PR objective), consider reversing the priority:
- const preference = (localStore.theme_preference || - props.theme || - THEME_PREFERENCE) as Theme + const preference = (props.theme || + localStore.theme_preference || + THEME_PREFERENCE) as ThemeThis would allow external shells to control the theme even when users have previously set a preference in localStorage.
packages/query-devtools/src/DevtoolsComponent.tsx (1)
18-20: Consider prioritizing prop over localStorage for theme resolution.Same concern as in DevtoolsPanelComponent.tsx: the current implementation prioritizes
localStore.theme_preferenceoverprops.theme, which may prevent reactive theme control from external shells.Consider reversing the priority:
- const preference = (localStore.theme_preference || - props.theme || - THEME_PREFERENCE) as Theme + const preference = (props.theme || + localStore.theme_preference || + THEME_PREFERENCE) as Themepackages/solid-query-devtools/src/devtoolsPanel.tsx (1)
66-66: LGTM! Theme prop integrated correctly.The theme prop is properly passed to the constructor and reactively applied via
setThemewithin acreateEffect, with a sensible default of 'system'.Also applies to: 79-81
packages/react-query-devtools/src/ReactQueryDevtools.tsx (1)
68-68: LGTM! Theme prop integrated correctly.The theme prop is properly passed to the constructor and reactively applied via
setThemewithin auseEffect, with a sensible default of 'system'.Also applies to: 83-83, 111-113
packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx (1)
53-59: LGTM! Theme prop integrated correctly.The theme prop is properly destructured, passed to the constructor, and reactively applied via
setThemewithin auseEffect, with a sensible default of 'system'.Also applies to: 74-74, 90-92
packages/solid-query-devtools/src/devtools.tsx (1)
70-70: LGTM! Theme reactivity is properly implemented.The theme is correctly passed to the constructor and reactive updates are handled via
createEffect, following the same pattern as other configurable properties. The default value of'system'is appropriate when no theme is provided.Also applies to: 99-101
packages/vue-query-devtools/src/devtools.vue (1)
23-23: LGTM! Vue theme integration is correct.The theme property is properly passed to the constructor and reactively updated via
watchEffect, consistent with other configurable properties. The default value of'system'appropriately handles undefined theme props.Also applies to: 31-31
packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx (1)
14-14: LGTM! Theme support properly integrated.The theme functionality is correctly implemented following the established pattern for reactive properties in this class:
- Theme type properly imported
- Private signal field declared
- Constructor initialization
- Public setter method
- Theme getter exposed in component props
The implementation is consistent with other properties like
buttonPosition,position, anderrorTypes.Also applies to: 39-39, 56-56, 70-70, 97-99, 113-113, 152-154
packages/query-devtools/src/TanstackQueryDevtools.tsx (1)
14-14: LGTM! Theme support correctly implemented.The theme functionality follows the same established pattern as in
TanstackQueryDevtoolsPaneland is consistent with other reactive properties in this class. All necessary components are present: type import, signal field, constructor initialization, setter method, and props getter.Also applies to: 37-37, 53-53, 66-66, 89-91, 104-104, 140-142
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #9887 +/- ##
===========================================
- Coverage 45.78% 21.16% -24.62%
===========================================
Files 200 42 -158
Lines 8413 2428 -5985
Branches 1922 615 -1307
===========================================
- Hits 3852 514 -3338
+ Misses 4113 1678 -2435
+ Partials 448 236 -212
🚀 New features to boost your workflow:
|
🎯 Changes
Allows passing
themeprop to devtools, as for now it was only controllable from within devtools.Since Tanstack is now building a devtools shell to embed multiple panels in one place, theme might be controlled there instead of from the query panel itself.
Therefore adding
reactivetheme prop to support the new usecase.Also need this to validate the shell utils would work properly with reactive values.
One thing to debate is if
propis provided then it might actually be wise to override evenlocal storagevalue.@AlemTuzlak @TkDodo
✅ Checklist
pnpm run test:pr.🚀 Release Impact
Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.