From 520463bf59b49993a815d071dcfeb65e947b49d1 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Thu, 28 May 2026 10:10:41 +0900
Subject: [PATCH] fix(query-devtools/Devtools): correct the Theme sub-trigger
 className from 'position' to 'theme'

---
 .../devtools-theme-subtrigger-classname.md    |  5 ++++
 packages/query-devtools/src/Devtools.tsx      |  2 +-
 .../src/__tests__/Devtools.test.tsx           | 23 +++++++++----------
 3 files changed, 17 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/devtools-theme-subtrigger-classname.md

diff --git a/.changeset/devtools-theme-subtrigger-classname.md b/.changeset/devtools-theme-subtrigger-classname.md
new file mode 100644
index 0000000000..3a4dfd57b0
--- /dev/null
+++ b/.changeset/devtools-theme-subtrigger-classname.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/query-devtools': patch
+---
+
+fix(query-devtools/Devtools): correct the Theme sub-trigger className from 'position' to 'theme'
diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index dfb66e496a..e391fe91fc 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -1192,7 +1192,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                       class={cx(
                         styles().settingsSubTrigger,
                         'tsqd-settings-menu-sub-trigger',
-                        'tsqd-settings-menu-sub-trigger-position',
+                        'tsqd-settings-menu-sub-trigger-theme',
                       )}
                     >
                       <span>Theme</span>
diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx
index a944d00fd5..4e42035c26 100644
--- a/packages/query-devtools/src/__tests__/Devtools.test.tsx
+++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx
@@ -1078,12 +1078,13 @@ describe('Devtools', () => {
         key: 'Enter',
       })
 
-      const themeTrigger = Array.from(
-        document.querySelectorAll<HTMLElement>(
-          '.tsqd-settings-menu-sub-trigger',
-        ),
-      ).find((el) => String(el.textContent).includes('Theme'))
-      expect(themeTrigger).not.toBeUndefined()
+      const themeTrigger = document.querySelector<HTMLElement>(
+        '.tsqd-settings-menu-sub-trigger-theme',
+      )
+      expect(themeTrigger).not.toBeNull()
+      expect(themeTrigger).not.toBe(
+        document.querySelector('.tsqd-settings-menu-sub-trigger-position'),
+      )
       fireEvent.keyDown(themeTrigger!, { key: 'ArrowRight' })
 
       expect(
@@ -1098,12 +1099,10 @@ describe('Devtools', () => {
         key: 'Enter',
       })
 
-      const themeTrigger = Array.from(
-        document.querySelectorAll<HTMLElement>(
-          '.tsqd-settings-menu-sub-trigger',
-        ),
-      ).find((el) => String(el.textContent).includes('Theme'))
-      expect(themeTrigger).not.toBeUndefined()
+      const themeTrigger = document.querySelector<HTMLElement>(
+        '.tsqd-settings-menu-sub-trigger-theme',
+      )
+      expect(themeTrigger).not.toBeNull()
       fireEvent.keyDown(themeTrigger!, { key: 'ArrowRight' })
 
       const themeMenu = document.querySelector(