feat(svelte-query-devtools): add theme option by grzdev · Pull Request #10636 · TanStack/query

grzdev · 2026-05-05T02:37:20Z

🎯 Changes

Add theme option support to Svelte floating devtools.

Other framework bindings (React, Vue, Solid, Angular) already expose the shared theme?: Theme option. This adds the same support to Svelte devtools and keeps behavior consistent across frameworks.

The theme is applied on initialization and updated reactively via setTheme.

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

New Features
- Added theme configuration option to the Svelte Query Devtools floating panel, with system theme as default setting. Includes automatic synchronization of theme changes.
Documentation
- Updated devtools documentation to include the new theme option and its available configuration values.

coderabbitai · 2026-05-05T02:37:32Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 862a99c0-e9f9-4448-b689-ef0aa6d56dd2

📥 Commits

Reviewing files that changed from the base of the PR and between c8e1bde and 849eb3a.

📒 Files selected for processing (3)

.changeset/svelte-devtools-theme-option.md
docs/framework/svelte/devtools.md
packages/svelte-query-devtools/src/Devtools.svelte

📝 Walkthrough

Walkthrough

The PR introduces theme option support to the Svelte devtools component. A new optional theme prop (defaulting to 'system') is added to the Devtools component, wired into the QueryDevtools instance, and kept synchronized via a reactive effect that calls devtools?.setTheme(theme) on changes. Documentation and changeset are updated accordingly.

Changes

Svelte Devtools Theme Option

Layer / File(s)	Summary
Type Definitions & Props `packages/svelte-query-devtools/src/Devtools.svelte`	Import `Theme` type from `@tanstack/query-devtools`, add `theme?: Theme` to `DevtoolsOptions` interface with doc comment, and add `theme = 'system'` to `$props()` destructuring.
Constructor & Initialization `packages/svelte-query-devtools/src/Devtools.svelte`	Pass the `theme` value into the `new QueryDevtools({ ... })` options object during initialization.
Reactive Synchronization `packages/svelte-query-devtools/src/Devtools.svelte`	Add a `$effect` that calls `devtools?.setTheme(theme)` whenever the `theme` prop changes post-initialization.
Documentation & Release Notes `docs/framework/svelte/devtools.md`, `.changeset/svelte-devtools-theme-option.md`	Document the new `theme?: Theme` option (default: `'system'`) in the Options section; mark patch release in changeset.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

TanStack/query#10609: Implements the same theme option feature for another framework's devtools, using the same Theme type and setTheme() synchronization pattern.

Poem

🐰 A theme for the tools, system by default,
Reactive and sync—no regrets!
Light, dark, or auto—the devtools now shine,
All in a patch, perfectly fine. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(svelte-query-devtools): add theme option' clearly and concisely summarizes the main change: adding theme option support to the Svelte Query devtools component.
Description check	✅ Passed	The pull request description includes the required 'Changes' section explaining the motivation and implementation, a partially completed checklist, and the release impact acknowledgment with a generated changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-05-05T02:37:48Z

View your CI Pipeline Execution ↗ for commit 849eb3a

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	53s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	<1s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-05 02:39:14 UTC

pkg-pr-new · 2026-05-05T02:38:47Z

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10636

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10636

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10636

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10636

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10636

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10636

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10636

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10636

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10636

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10636

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10636

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10636

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10636

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10636

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10636

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10636

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10636

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10636

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10636

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10636

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10636

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10636

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10636

commit: 849eb3a

feat(svelte-query-devtools): add theme option

849eb3a

github-actions Bot added documentation Improvements or additions to documentation package: svelte-query-devtools labels May 5, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(svelte-query-devtools): add theme option#10636

feat(svelte-query-devtools): add theme option#10636
grzdev wants to merge 1 commit intoTanStack:mainfrom
grzdev:feat/svelte-devtools-theme-option

grzdev commented May 5, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 5, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

nx-cloud Bot commented May 5, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented May 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

grzdev commented May 5, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

nx-cloud Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented May 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

grzdev commented May 5, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 5, 2026 •

edited

Loading

nx-cloud Bot commented May 5, 2026 •

edited

Loading