Skip to content

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

Merged
lachlancollins merged 2 commits into
TanStack:mainfrom
grzdev:feat/svelte-devtools-theme-option
Sep 21, 2026
Merged

feat(svelte-query-devtools): add theme option#10636
lachlancollins merged 2 commits into
TanStack:mainfrom
grzdev:feat/svelte-devtools-theme-option

Conversation

@grzdev

@grzdev grzdev commented May 5, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

🎯 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 a theme configuration option to the Svelte Query Devtools floating panel, defaulting to the system theme. Theme changes are automatically synchronized while the panel is open.

  • Documentation

    • Updated the devtools documentation to describe the new theme option, its default behavior, and supported configuration values.

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

coderabbitai Bot commented May 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change StackReview Change Stack

Understand this PR’s impact

Explore downstream dependencies and potential security impact with Blast Radius.

View blast radius →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository: TanStack/query/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 4a350f6f-8d4e-40bb-ad0c-0f68a644616f

📥 Commits

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

📒 Files selected for processing (2)
  • docs/framework/svelte/devtools.md
  • packages/svelte-query-devtools/src/Devtools.svelte

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

📝 Walkthrough

Walkthrough

The PR adds a theme option to the Svelte devtools component. The option defaults to 'system', initializes the devtools theme, and updates it reactively. Documentation and patch release metadata are also updated.

Changes

Svelte Devtools Theme Option

Layer / File(s) Summary
Theme option contract
packages/svelte-query-devtools/src/Devtools.svelte, docs/framework/svelte/devtools.md		 Adds the shared Theme type and an optional theme setting with 'system' as the default. Documents the option.
Theme initialization and synchronization
packages/svelte-query-devtools/src/Devtools.svelte		 Passes theme to TanstackQueryDevtools and calls setTheme(theme) when the setting changes.
Release metadata
.changeset/svelte-devtools-theme-option.md		 Adds a patch changeset for @tanstack/svelte-query-devtools.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Possibly related PRs

Suggested reviewers: hardanish-singh

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the main change: adding a theme option to Svelte Query Devtools.
Description check ✅ Passed The description explains the change, motivation, implementation behavior, checklist status, and release impact. It also states that local tests were not run, so the unchecked test item is clear.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
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.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR

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.

@nx-cloud

nx-cloud Bot commented May 5, 2026 •
edited
Loading

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit fc96b54

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

☁️ Nx Cloud last updated this comment at 2026-09-21 10:04:36 UTC

@pkg-pr-new

pkg-pr-new Bot commented May 5, 2026 •
edited
Loading

Copy link
Copy Markdown
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/lit-query

npm i https://pkg.pr.new/@tanstack/lit-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: fc96b54

@lachlancollins
lachlancollins merged commit 847f471 into TanStack:main Sep 21, 2026
9 checks passed
@github-actions github-actions Bot mentioned this pull request Sep 21, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@lachlancollins lachlancollins lachlancollins approved these changes
+1 more reviewer
@Hardanish-Singh Hardanish-Singh Hardanish-Singh approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

documentation Improvements or additions to documentation package: svelte-query-devtools

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@grzdev @lachlancollins @Hardanish-Singh