@tanstack/query-devtools 5.90.1 → 5.91.0

package/build/DevtoolsComponent/{NCMVHL6D.js → 3Y4HR3WR.js}

@@ -8,7 +8,7 @@ var DevtoolsComponent = (props) => {
   });
   const colorScheme = getPreferredColorScheme();
   const theme = createMemo(() => {
-    const preference = localStore.theme_preference || THEME_PREFERENCE;
+    const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
     if (preference !== "system") return preference;
     return colorScheme();
   });

package/build/DevtoolsComponent/{6ELMOJL2.js → TO44TVBA.js}

@@ -8,7 +8,7 @@ var DevtoolsComponent = (props) => {
   });
   const colorScheme = getPreferredColorScheme();
   const theme = createMemo(() => {
-    const preference = localStore.theme_preference || THEME_PREFERENCE;
+    const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
     if (preference !== "system") return preference;
     return colorScheme();
   });

package/build/DevtoolsPanelComponent/{2AITGKQY.js → NZQXYXX4.js}

@@ -8,7 +8,7 @@ var DevtoolsPanelComponent = (props) => {
   });
   const colorScheme = getPreferredColorScheme();
   const theme = createMemo(() => {
-    const preference = localStore.theme_preference || THEME_PREFERENCE;
+    const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
     if (preference !== "system") return preference;
     return colorScheme();
   });

package/build/DevtoolsPanelComponent/{PULY4AJ7.js → YK4QRCEX.js}

@@ -8,7 +8,7 @@ var DevtoolsPanelComponent = (props) => {
   });
   const colorScheme = getPreferredColorScheme();
   const theme = createMemo(() => {
-    const preference = localStore.theme_preference || THEME_PREFERENCE;
+    const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
     if (preference !== "system") return preference;
     return colorScheme();
   });

package/build/dev.cjs

@@ -15936,7 +15936,7 @@ var init_DevtoolsComponent = __esm({
       });
       const colorScheme = getPreferredColorScheme();
       const theme = createMemo(() => {
-        const preference = localStore.theme_preference || THEME_PREFERENCE;
+        const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
         if (preference !== "system") return preference;
         return colorScheme();
       });
@@ -15986,7 +15986,7 @@ var init_DevtoolsPanelComponent = __esm({
       });
       const colorScheme = getPreferredColorScheme();
       const theme = createMemo(() => {
-        const preference = localStore.theme_preference || THEME_PREFERENCE;
+        const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
         if (preference !== "system") return preference;
         return colorScheme();
       });
@@ -16044,6 +16044,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
   #errorTypes;
   #hideDisabledQueries;
   #Component;
+  #theme;
   #dispose;
   constructor(config) {
     const {
@@ -16057,7 +16058,8 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -16070,6 +16072,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
     this.#initialIsOpen = createSignal(initialIsOpen);
     this.#errorTypes = createSignal(errorTypes);
     this.#hideDisabledQueries = createSignal(hideDisabledQueries);
+    this.#theme = createSignal(theme);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -16086,6 +16089,9 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
   setClient(client) {
     this.#client[1](client);
   }
+  setTheme(theme) {
+    this.#theme[1](theme);
+  }
   mount(el) {
     if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
@@ -16098,6 +16104,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
       const [errors] = this.#errorTypes;
       const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
+      const [theme] = this.#theme;
       let Devtools2;
       if (this.#Component) {
         Devtools2 = this.#Component;
@@ -16137,6 +16144,9 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
         },
         get hideDisabledQueries() {
           return hideDisabledQueries();
+        },
+        get theme() {
+          return theme();
         }
       }));
     }, el);
@@ -16173,6 +16183,7 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
   #hideDisabledQueries;
   #onClose;
   #Component;
+  #theme;
   #dispose;
   constructor(config) {
     const {
@@ -16187,7 +16198,8 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
       styleNonce,
       shadowDOMTarget,
       onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -16201,6 +16213,7 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
     this.#errorTypes = createSignal(errorTypes);
     this.#hideDisabledQueries = createSignal(hideDisabledQueries);
     this.#onClose = createSignal(onClose);
+    this.#theme = createSignal(theme);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -16220,6 +16233,9 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
   setOnClose(onClose) {
     this.#onClose[1](() => onClose);
   }
+  setTheme(theme) {
+    this.#theme[1](theme);
+  }
   mount(el) {
     if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
@@ -16233,6 +16249,7 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
       const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
       const [onClose] = this.#onClose;
+      const [theme] = this.#theme;
       let Devtools2;
       if (this.#Component) {
         Devtools2 = this.#Component;
@@ -16275,6 +16292,9 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
         },
         get onClose() {
           return onClose();
+        },
+        get theme() {
+          return theme();
         }
       }));
     }, el);

package/build/dev.js

@@ -15,6 +15,7 @@ var TanstackQueryDevtools = class {
   #errorTypes;
   #hideDisabledQueries;
   #Component;
+  #theme;
   #dispose;
   constructor(config) {
     const {
@@ -28,7 +29,8 @@ var TanstackQueryDevtools = class {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -41,6 +43,7 @@ var TanstackQueryDevtools = class {
     this.#initialIsOpen = createSignal(initialIsOpen);
     this.#errorTypes = createSignal(errorTypes);
     this.#hideDisabledQueries = createSignal(hideDisabledQueries);
+    this.#theme = createSignal(theme);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -57,6 +60,9 @@ var TanstackQueryDevtools = class {
   setClient(client) {
     this.#client[1](client);
   }
+  setTheme(theme) {
+    this.#theme[1](theme);
+  }
   mount(el) {
     if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
@@ -69,11 +75,12 @@ var TanstackQueryDevtools = class {
       const [errors] = this.#errorTypes;
       const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
+      const [theme] = this.#theme;
       let Devtools;
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./DevtoolsComponent/6ELMOJL2.js'));
+        Devtools = lazy(() => import('./DevtoolsComponent/TO44TVBA.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
@@ -108,6 +115,9 @@ var TanstackQueryDevtools = class {
         },
         get hideDisabledQueries() {
           return hideDisabledQueries();
+        },
+        get theme() {
+          return theme();
         }
       }));
     }, el);
@@ -139,6 +149,7 @@ var TanstackQueryDevtoolsPanel = class {
   #hideDisabledQueries;
   #onClose;
   #Component;
+  #theme;
   #dispose;
   constructor(config) {
     const {
@@ -153,7 +164,8 @@ var TanstackQueryDevtoolsPanel = class {
       styleNonce,
       shadowDOMTarget,
       onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -167,6 +179,7 @@ var TanstackQueryDevtoolsPanel = class {
     this.#errorTypes = createSignal(errorTypes);
     this.#hideDisabledQueries = createSignal(hideDisabledQueries);
     this.#onClose = createSignal(onClose);
+    this.#theme = createSignal(theme);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -186,6 +199,9 @@ var TanstackQueryDevtoolsPanel = class {
   setOnClose(onClose) {
     this.#onClose[1](() => onClose);
   }
+  setTheme(theme) {
+    this.#theme[1](theme);
+  }
   mount(el) {
     if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
@@ -199,11 +215,12 @@ var TanstackQueryDevtoolsPanel = class {
       const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
       const [onClose] = this.#onClose;
+      const [theme] = this.#theme;
       let Devtools;
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./DevtoolsPanelComponent/PULY4AJ7.js'));
+        Devtools = lazy(() => import('./DevtoolsPanelComponent/YK4QRCEX.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
@@ -241,6 +258,9 @@ var TanstackQueryDevtoolsPanel = class {
         },
         get onClose() {
           return onClose();
+        },
+        get theme() {
+          return theme();
         }
       }));
     }, el);

package/build/index.cjs

@@ -15934,7 +15934,7 @@ var init_DevtoolsComponent = __esm({
       });
       const colorScheme = getPreferredColorScheme();
       const theme = createMemo(() => {
-        const preference = localStore.theme_preference || THEME_PREFERENCE;
+        const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
         if (preference !== "system") return preference;
         return colorScheme();
       });
@@ -15984,7 +15984,7 @@ var init_DevtoolsPanelComponent = __esm({
       });
       const colorScheme = getPreferredColorScheme();
       const theme = createMemo(() => {
-        const preference = localStore.theme_preference || THEME_PREFERENCE;
+        const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
         if (preference !== "system") return preference;
         return colorScheme();
       });
@@ -16042,6 +16042,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
   #errorTypes;
   #hideDisabledQueries;
   #Component;
+  #theme;
   #dispose;
   constructor(config) {
     const {
@@ -16055,7 +16056,8 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -16068,6 +16070,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
     this.#initialIsOpen = createSignal(initialIsOpen);
     this.#errorTypes = createSignal(errorTypes);
     this.#hideDisabledQueries = createSignal(hideDisabledQueries);
+    this.#theme = createSignal(theme);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -16084,6 +16087,9 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
   setClient(client) {
     this.#client[1](client);
   }
+  setTheme(theme) {
+    this.#theme[1](theme);
+  }
   mount(el) {
     if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
@@ -16096,6 +16102,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
       const [errors] = this.#errorTypes;
       const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
+      const [theme] = this.#theme;
       let Devtools2;
       if (this.#Component) {
         Devtools2 = this.#Component;
@@ -16135,6 +16142,9 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
         },
         get hideDisabledQueries() {
           return hideDisabledQueries();
+        },
+        get theme() {
+          return theme();
         }
       }));
     }, el);
@@ -16171,6 +16181,7 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
   #hideDisabledQueries;
   #onClose;
   #Component;
+  #theme;
   #dispose;
   constructor(config) {
     const {
@@ -16185,7 +16196,8 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
       styleNonce,
       shadowDOMTarget,
       onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -16199,6 +16211,7 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
     this.#errorTypes = createSignal(errorTypes);
     this.#hideDisabledQueries = createSignal(hideDisabledQueries);
     this.#onClose = createSignal(onClose);
+    this.#theme = createSignal(theme);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -16218,6 +16231,9 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
   setOnClose(onClose) {
     this.#onClose[1](() => onClose);
   }
+  setTheme(theme) {
+    this.#theme[1](theme);
+  }
   mount(el) {
     if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
@@ -16231,6 +16247,7 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
       const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
       const [onClose] = this.#onClose;
+      const [theme] = this.#theme;
       let Devtools2;
       if (this.#Component) {
         Devtools2 = this.#Component;
@@ -16273,6 +16290,9 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
         },
         get onClose() {
           return onClose();
+        },
+        get theme() {
+          return theme();
         }
       }));
     }, el);

package/build/index.d.cts

@@ -4,6 +4,7 @@ type XPosition = 'left' | 'right';
 type YPosition = 'top' | 'bottom';
 type DevtoolsPosition = XPosition | YPosition;
 type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative';
+type Theme = 'dark' | 'light' | 'system';
 interface DevtoolsErrorType {
     /**
      * The name of the error.
@@ -26,6 +27,7 @@ interface QueryDevtoolsProps {
     shadowDOMTarget?: ShadowRoot;
     onClose?: () => unknown;
     hideDisabledQueries?: boolean;
+    theme?: Theme;
 }
 
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
@@ -40,6 +42,7 @@ declare class TanstackQueryDevtools {
     setInitialIsOpen(isOpen: boolean): void;
     setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
     setClient(client: QueryClient): void;
+    setTheme(theme?: Theme): void;
     mount<T extends HTMLElement>(el: T): void;
     unmount(): void;
 }
@@ -58,8 +61,9 @@ declare class TanstackQueryDevtoolsPanel {
     setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
     setClient(client: QueryClient): void;
     setOnClose(onClose: () => unknown): void;
+    setTheme(theme?: Theme): void;
     mount<T extends HTMLElement>(el: T): void;
     unmount(): void;
 }
 
-export { type DevtoolsButtonPosition, type DevtoolsErrorType, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig, TanstackQueryDevtoolsPanel, type TanstackQueryDevtoolsPanelConfig };
+export { type DevtoolsButtonPosition, type DevtoolsErrorType, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig, TanstackQueryDevtoolsPanel, type TanstackQueryDevtoolsPanelConfig, type Theme };

package/build/index.d.ts

@@ -4,6 +4,7 @@ type XPosition = 'left' | 'right';
 type YPosition = 'top' | 'bottom';
 type DevtoolsPosition = XPosition | YPosition;
 type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative';
+type Theme = 'dark' | 'light' | 'system';
 interface DevtoolsErrorType {
     /**
      * The name of the error.
@@ -26,6 +27,7 @@ interface QueryDevtoolsProps {
     shadowDOMTarget?: ShadowRoot;
     onClose?: () => unknown;
     hideDisabledQueries?: boolean;
+    theme?: Theme;
 }
 
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
@@ -40,6 +42,7 @@ declare class TanstackQueryDevtools {
     setInitialIsOpen(isOpen: boolean): void;
     setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
     setClient(client: QueryClient): void;
+    setTheme(theme?: Theme): void;
     mount<T extends HTMLElement>(el: T): void;
     unmount(): void;
 }
@@ -58,8 +61,9 @@ declare class TanstackQueryDevtoolsPanel {
     setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
     setClient(client: QueryClient): void;
     setOnClose(onClose: () => unknown): void;
+    setTheme(theme?: Theme): void;
     mount<T extends HTMLElement>(el: T): void;
     unmount(): void;
 }
 
-export { type DevtoolsButtonPosition, type DevtoolsErrorType, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig, TanstackQueryDevtoolsPanel, type TanstackQueryDevtoolsPanelConfig };
+export { type DevtoolsButtonPosition, type DevtoolsErrorType, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig, TanstackQueryDevtoolsPanel, type TanstackQueryDevtoolsPanelConfig, type Theme };

package/build/index.js

@@ -15,6 +15,7 @@ var TanstackQueryDevtools = class {
   #errorTypes;
   #hideDisabledQueries;
   #Component;
+  #theme;
   #dispose;
   constructor(config) {
     const {
@@ -28,7 +29,8 @@ var TanstackQueryDevtools = class {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -41,6 +43,7 @@ var TanstackQueryDevtools = class {
     this.#initialIsOpen = createSignal(initialIsOpen);
     this.#errorTypes = createSignal(errorTypes);
     this.#hideDisabledQueries = createSignal(hideDisabledQueries);
+    this.#theme = createSignal(theme);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -57,6 +60,9 @@ var TanstackQueryDevtools = class {
   setClient(client) {
     this.#client[1](client);
   }
+  setTheme(theme) {
+    this.#theme[1](theme);
+  }
   mount(el) {
     if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
@@ -69,11 +75,12 @@ var TanstackQueryDevtools = class {
       const [errors] = this.#errorTypes;
       const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
+      const [theme] = this.#theme;
       let Devtools;
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./DevtoolsComponent/NCMVHL6D.js'));
+        Devtools = lazy(() => import('./DevtoolsComponent/3Y4HR3WR.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
@@ -108,6 +115,9 @@ var TanstackQueryDevtools = class {
         },
         get hideDisabledQueries() {
           return hideDisabledQueries();
+        },
+        get theme() {
+          return theme();
         }
       }));
     }, el);
@@ -139,6 +149,7 @@ var TanstackQueryDevtoolsPanel = class {
   #hideDisabledQueries;
   #onClose;
   #Component;
+  #theme;
   #dispose;
   constructor(config) {
     const {
@@ -153,7 +164,8 @@ var TanstackQueryDevtoolsPanel = class {
       styleNonce,
       shadowDOMTarget,
       onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -167,6 +179,7 @@ var TanstackQueryDevtoolsPanel = class {
     this.#errorTypes = createSignal(errorTypes);
     this.#hideDisabledQueries = createSignal(hideDisabledQueries);
     this.#onClose = createSignal(onClose);
+    this.#theme = createSignal(theme);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -186,6 +199,9 @@ var TanstackQueryDevtoolsPanel = class {
   setOnClose(onClose) {
     this.#onClose[1](() => onClose);
   }
+  setTheme(theme) {
+    this.#theme[1](theme);
+  }
   mount(el) {
     if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
@@ -199,11 +215,12 @@ var TanstackQueryDevtoolsPanel = class {
       const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
       const [onClose] = this.#onClose;
+      const [theme] = this.#theme;
       let Devtools;
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./DevtoolsPanelComponent/2AITGKQY.js'));
+        Devtools = lazy(() => import('./DevtoolsPanelComponent/NZQXYXX4.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
@@ -241,6 +258,9 @@ var TanstackQueryDevtoolsPanel = class {
         },
         get onClose() {
           return onClose();
+        },
+        get theme() {
+          return theme();
         }
       }));
     }, el);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.90.1",
+  "version": "5.91.0",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "superjson": "^2.2.2",
     "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.11.6",
-    "@tanstack/query-core": "5.90.1"
+    "@tanstack/query-core": "5.90.10"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",

package/src/DevtoolsComponent.tsx

@@ -4,6 +4,7 @@ import { Devtools } from './Devtools'
 import { getPreferredColorScheme } from './utils'
 import { THEME_PREFERENCE } from './constants'
 import { PiPProvider, QueryDevtoolsContext, ThemeContext } from './contexts'
+import type { Theme } from './contexts'
 import type { DevtoolsComponentType } from './Devtools'
 
 const DevtoolsComponent: DevtoolsComponentType = (props) => {
@@ -14,10 +15,9 @@ const DevtoolsComponent: DevtoolsComponentType = (props) => {
   const colorScheme = getPreferredColorScheme()
 
   const theme = createMemo(() => {
-    const preference = (localStore.theme_preference || THEME_PREFERENCE) as
-      | 'system'
-      | 'dark'
-      | 'light'
+    const preference = (props.theme ||
+      localStore.theme_preference ||
+      THEME_PREFERENCE) as Theme
     if (preference !== 'system') return preference
     return colorScheme()
   })

package/src/DevtoolsPanelComponent.tsx

@@ -4,6 +4,7 @@ import { ContentView, ParentPanel } from './Devtools'
 import { getPreferredColorScheme } from './utils'
 import { THEME_PREFERENCE } from './constants'
 import { PiPProvider, QueryDevtoolsContext, ThemeContext } from './contexts'
+import type { Theme } from './contexts'
 import type { DevtoolsComponentType } from './Devtools'
 
 const DevtoolsPanelComponent: DevtoolsComponentType = (props) => {
@@ -14,10 +15,9 @@ const DevtoolsPanelComponent: DevtoolsComponentType = (props) => {
   const colorScheme = getPreferredColorScheme()
 
   const theme = createMemo(() => {
-    const preference = (localStore.theme_preference || THEME_PREFERENCE) as
-      | 'system'
-      | 'dark'
-      | 'light'
+    const preference = (props.theme ||
+      localStore.theme_preference ||
+      THEME_PREFERENCE) as Theme
     if (preference !== 'system') return preference
     return colorScheme()
   })

package/src/TanstackQueryDevtools.tsx

@@ -11,6 +11,7 @@ import type {
   DevtoolsErrorType,
   DevtoolsPosition,
   QueryDevtoolsProps,
+  Theme,
 } from './contexts'
 import type { Signal } from 'solid-js'
 
@@ -33,6 +34,7 @@ class TanstackQueryDevtools {
   #errorTypes: Signal<Array<DevtoolsErrorType> | undefined>
   #hideDisabledQueries: Signal<boolean | undefined>
   #Component: DevtoolsComponentType | undefined
+  #theme: Signal<Theme | undefined>
   #dispose?: () => void
 
   constructor(config: TanstackQueryDevtoolsConfig) {
@@ -48,6 +50,7 @@ class TanstackQueryDevtools {
       styleNonce,
       shadowDOMTarget,
       hideDisabledQueries,
+      theme,
     } = config
     this.#client = createSignal(client)
     this.#queryFlavor = queryFlavor
@@ -60,6 +63,7 @@ class TanstackQueryDevtools {
     this.#initialIsOpen = createSignal(initialIsOpen)
     this.#errorTypes = createSignal(errorTypes)
     this.#hideDisabledQueries = createSignal(hideDisabledQueries)
+    this.#theme = createSignal(theme)
   }
 
   setButtonPosition(position: DevtoolsButtonPosition) {
@@ -82,6 +86,10 @@ class TanstackQueryDevtools {
     this.#client[1](client)
   }
 
+  setTheme(theme?: Theme) {
+    this.#theme[1](theme)
+  }
+
   mount<T extends HTMLElement>(el: T) {
     if (this.#isMounted) {
       throw new Error('Devtools is already mounted')
@@ -93,6 +101,7 @@ class TanstackQueryDevtools {
       const [errors] = this.#errorTypes
       const [hideDisabledQueries] = this.#hideDisabledQueries
       const [queryClient] = this.#client
+      const [theme] = this.#theme
       let Devtools: DevtoolsComponentType
 
       if (this.#Component) {
@@ -128,6 +137,9 @@ class TanstackQueryDevtools {
             get hideDisabledQueries() {
               return hideDisabledQueries()
             },
+            get theme() {
+              return theme()
+            },
           }}
         />
       )

package/src/TanstackQueryDevtoolsPanel.tsx

@@ -11,6 +11,7 @@ import type {
   DevtoolsErrorType,
   DevtoolsPosition,
   QueryDevtoolsProps,
+  Theme,
 } from './contexts'
 import type { Signal } from 'solid-js'
 
@@ -35,6 +36,7 @@ class TanstackQueryDevtoolsPanel {
   #hideDisabledQueries: Signal<boolean | undefined>
   #onClose: Signal<(() => unknown) | undefined>
   #Component: DevtoolsComponentType | undefined
+  #theme: Signal<Theme | undefined>
   #dispose?: () => void
 
   constructor(config: TanstackQueryDevtoolsPanelConfig) {
@@ -51,6 +53,7 @@ class TanstackQueryDevtoolsPanel {
       shadowDOMTarget,
       onClose,
       hideDisabledQueries,
+      theme,
     } = config
     this.#client = createSignal(client)
     this.#queryFlavor = queryFlavor
@@ -64,6 +67,7 @@ class TanstackQueryDevtoolsPanel {
     this.#errorTypes = createSignal(errorTypes)
     this.#hideDisabledQueries = createSignal(hideDisabledQueries)
     this.#onClose = createSignal(onClose)
+    this.#theme = createSignal(theme)
   }
 
   setButtonPosition(position: DevtoolsButtonPosition) {
@@ -90,6 +94,10 @@ class TanstackQueryDevtoolsPanel {
     this.#onClose[1](() => onClose)
   }
 
+  setTheme(theme?: Theme) {
+    this.#theme[1](theme)
+  }
+
   mount<T extends HTMLElement>(el: T) {
     if (this.#isMounted) {
       throw new Error('Devtools is already mounted')
@@ -102,6 +110,7 @@ class TanstackQueryDevtoolsPanel {
       const [hideDisabledQueries] = this.#hideDisabledQueries
       const [queryClient] = this.#client
       const [onClose] = this.#onClose
+      const [theme] = this.#theme
       let Devtools: DevtoolsComponentType
 
       if (this.#Component) {
@@ -140,6 +149,9 @@ class TanstackQueryDevtoolsPanel {
             get onClose() {
               return onClose()
             },
+            get theme() {
+              return theme()
+            },
           }}
         />
       )

package/src/contexts/QueryDevtoolsContext.ts

@@ -5,6 +5,7 @@ type XPosition = 'left' | 'right'
 type YPosition = 'top' | 'bottom'
 export type DevtoolsPosition = XPosition | YPosition
 export type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative'
+export type Theme = 'dark' | 'light' | 'system'
 
 export interface DevtoolsErrorType {
   /**
@@ -30,6 +31,7 @@ export interface QueryDevtoolsProps {
   shadowDOMTarget?: ShadowRoot
   onClose?: () => unknown
   hideDisabledQueries?: boolean
+  theme?: Theme
 }
 
 export const QueryDevtoolsContext = createContext<QueryDevtoolsProps>({

package/src/index.ts

@@ -2,6 +2,7 @@ export type {
   DevtoolsButtonPosition,
   DevtoolsErrorType,
   DevtoolsPosition,
+  Theme,
 } from './contexts'
 export {
   TanstackQueryDevtools,