From b704c51576f81dff15b263a067dd3abcd9ae4e78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A5=BF=E5=B7=9D=E6=99=BA=E5=A3=AB?=
 <n.satoshi061@gmail.com>
Date: Sun, 27 Sep 2026 13:34:04 +0900
Subject: [PATCH] feat(angular-query-experimental/devtools-panel): add 'theme'
 option to 'injectDevtoolsPanel'

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../angular-devtools-panel-theme-option.md    |  5 +++
 .../__tests__/inject-devtools-panel.test.ts   | 37 +++++++++++++++++++
 .../devtools-panel/inject-devtools-panel.ts   |  3 ++
 .../src/devtools-panel/types.ts               |  8 +++-
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/angular-devtools-panel-theme-option.md

diff --git a/.changeset/angular-devtools-panel-theme-option.md b/.changeset/angular-devtools-panel-theme-option.md
new file mode 100644
index 00000000000..5f17ecd8ad7
--- /dev/null
+++ b/.changeset/angular-devtools-panel-theme-option.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/angular-query-experimental': patch
+---
+
+Add theme option support to Angular devtools panel (`injectDevtoolsPanel`).
diff --git a/packages/angular-query-experimental/src/__tests__/inject-devtools-panel.test.ts b/packages/angular-query-experimental/src/__tests__/inject-devtools-panel.test.ts
index c26e8d118db..7f5f4c66d73 100644
--- a/packages/angular-query-experimental/src/__tests__/inject-devtools-panel.test.ts
+++ b/packages/angular-query-experimental/src/__tests__/inject-devtools-panel.test.ts
@@ -8,12 +8,14 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { QueryClient } from '@tanstack/query-core'
 import { provideTanStackQuery } from '../providers'
 import { injectDevtoolsPanel } from '../devtools-panel'
+import type { Theme } from '@tanstack/query-devtools'
 
 const mockDevtoolsPanelInstance = {
   mount: vi.fn(),
   unmount: vi.fn(),
   setClient: vi.fn(),
   setErrorTypes: vi.fn(),
+  setTheme: vi.fn(),
   setOnClose: vi.fn(),
 }
 
@@ -153,6 +155,41 @@ describe('injectDevtoolsPanel', () => {
     expect(mockDevtoolsPanelInstance.setErrorTypes).toHaveBeenCalledTimes(1)
   })
 
+  it('should pass theme to TanstackQueryDevtoolsPanel', async () => {
+    TestBed.runInInjectionContext(() => {
+      return injectDevtoolsPanel(() => ({
+        hostElement: TestBed.inject(ElementRef),
+        theme: 'dark',
+      }))
+    })
+
+    TestBed.tick()
+    await waitForDevtoolsToBeCreated()
+    expect(mocks.mockTanstackQueryDevtoolsPanel).toHaveBeenCalledWith(
+      expect.objectContaining({ theme: 'dark' }),
+    )
+  })
+
+  it('should update theme', async () => {
+    const theme = signal<Theme>('system')
+
+    TestBed.runInInjectionContext(() => {
+      return injectDevtoolsPanel(() => ({
+        hostElement: TestBed.inject(ElementRef),
+        theme: theme(),
+      }))
+    })
+
+    TestBed.tick()
+    await waitForDevtoolsToBeCreated()
+    expect(mockDevtoolsPanelInstance.setTheme).toHaveBeenCalledTimes(0)
+
+    theme.set('dark')
+    TestBed.tick()
+    expect(mockDevtoolsPanelInstance.setTheme).toHaveBeenCalledTimes(1)
+    expect(mockDevtoolsPanelInstance.setTheme).toHaveBeenCalledWith('dark')
+  })
+
   it('should update onclose', async () => {
     const functionA = () => {}
     const functionB = () => {}
diff --git a/packages/angular-query-experimental/src/devtools-panel/inject-devtools-panel.ts b/packages/angular-query-experimental/src/devtools-panel/inject-devtools-panel.ts
index 94aaa185ca7..c63177ef91f 100644
--- a/packages/angular-query-experimental/src/devtools-panel/inject-devtools-panel.ts
+++ b/packages/angular-query-experimental/src/devtools-panel/inject-devtools-panel.ts
@@ -61,6 +61,7 @@ export const injectDevtoolsPanel: InjectDevtoolsPanel = (
         errorTypes = [],
         styleNonce,
         shadowDOMTarget,
+        theme,
         onClose,
         hostElement,
       } = queryOptions()
@@ -80,6 +81,7 @@ export const injectDevtoolsPanel: InjectDevtoolsPanel = (
                 errorTypes,
                 styleNonce,
                 shadowDOMTarget,
+                theme,
                 onClose,
                 onlineManager,
               })
@@ -94,6 +96,7 @@ export const injectDevtoolsPanel: InjectDevtoolsPanel = (
         } else if (devtools && hostElement) {
           devtools.setClient(client)
           devtools.setErrorTypes(errorTypes)
+          theme && devtools.setTheme(theme)
           onClose && devtools.setOnClose(onClose)
         } else if (devtools && !hostElement) {
           destroy()
diff --git a/packages/angular-query-experimental/src/devtools-panel/types.ts b/packages/angular-query-experimental/src/devtools-panel/types.ts
index 3f01bd0d876..8eb7b4a0106 100644
--- a/packages/angular-query-experimental/src/devtools-panel/types.ts
+++ b/packages/angular-query-experimental/src/devtools-panel/types.ts
@@ -1,4 +1,4 @@
-import type { DevtoolsErrorType } from '@tanstack/query-devtools'
+import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
 import type { ElementRef, Injector } from '@angular/core'
 import type { QueryClient } from '@tanstack/query-core'
 
@@ -38,6 +38,12 @@ export interface DevtoolsPanelOptions {
    * Use this so you can attach the devtool's styles to specific element in the DOM.
    */
   shadowDOMTarget?: ShadowRoot
+  /**
+   * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+   *
+   * @defaultValue system
+   */
+  theme?: Theme
 
   /**
    * Callback function that is called when the devtools panel is closed