feat(angular-query): add devtools theme option (#10609)

grzdev · web-flow · commit bf902df59dcc · 2026-05-03T16:22:29.000+02:00
* feat(angular-query): add devtools theme option

* chore: apply review feedback
diff --git a/.changeset/angular-devtools-theme-option.md b/.changeset/angular-devtools-theme-option.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/angular-query-experimental': patch
+---
+
+Add theme option support to Angular floating devtools.
diff --git a/packages/angular-query-experimental/src/devtools/types.ts b/packages/angular-query-experimental/src/devtools/types.ts
@@ -3,6 +3,7 @@ import type {
   DevtoolsButtonPosition,
   DevtoolsErrorType,
   DevtoolsPosition,
+  Theme,
 } from '@tanstack/query-devtools'
 import type { DevtoolsFeature } from '../providers'
 
@@ -75,6 +76,11 @@ export interface DevtoolsOptions {
    * Set this to true to hide disabled queries from the devtools panel.
    */
   hideDisabledQueries?: boolean
+  /**
+   * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
 
   /**
    * Whether the developer tools should load.
diff --git a/packages/angular-query-experimental/src/devtools/with-devtools.ts b/packages/angular-query-experimental/src/devtools/with-devtools.ts
@@ -126,6 +126,7 @@ export const withDevtools: WithDevtools = (
                 errorTypes,
                 buttonPosition,
                 initialIsOpen,
+                theme,
               } = devtoolsOptions()
 
               if (!shouldLoadTools) {
@@ -142,6 +143,7 @@ export const withDevtools: WithDevtools = (
                 buttonPosition && devtools.setButtonPosition(buttonPosition)
                 typeof initialIsOpen === 'boolean' &&
                   devtools.setInitialIsOpen(initialIsOpen)
+                theme && devtools.setTheme(theme)
                 return
               }
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@tanstack/angular-query-experimental': patch
 +---
++
 +Add theme option support to Angular floating devtools.