feat(angular-query): add devtools theme option

.changeset/angular-devtools-theme-option.md

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

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.

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)
+                if (theme) devtools.setTheme(theme)
                 return
               }