feat(devtools): allow passing a theme via prop

.changeset/olive-ducks-move.md

@@ -0,0 +1,8 @@
+---
+'@tanstack/react-query-devtools': minor
+'@tanstack/solid-query-devtools': minor
+'@tanstack/vue-query-devtools': minor
+'@tanstack/query-devtools': minor
+---
+
+feat(devtools): allow passing a theme via prop

packages/query-devtools/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()
   })

packages/query-devtools/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()
   })

packages/query-devtools/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()
+            },
           }}
         />
       )

packages/query-devtools/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()
+            },
           }}
         />
       )

packages/query-devtools/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>({

packages/query-devtools/src/index.ts

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

packages/react-query-devtools/src/ReactQueryDevtools.tsx

@@ -6,6 +6,7 @@ import type {
   DevtoolsButtonPosition,
   DevtoolsErrorType,
   DevtoolsPosition,
+  Theme,
 } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/react-query'
 
@@ -46,6 +47,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
 }
 
 export function ReactQueryDevtools(
@@ -61,6 +67,7 @@ export function ReactQueryDevtools(
     styleNonce,
     shadowDOMTarget,
     hideDisabledQueries,
+    theme,
   } = props
   const [devtools] = React.useState(
     new TanstackQueryDevtools({
@@ -75,6 +82,7 @@ export function ReactQueryDevtools(
       styleNonce,
       shadowDOMTarget,
       hideDisabledQueries,
+      theme,
     }),
   )
 
@@ -102,6 +110,10 @@ export function ReactQueryDevtools(
     devtools.setErrorTypes(errorTypes || [])
   }, [errorTypes, devtools])
 
+  React.useEffect(() => {
+    devtools.setTheme(theme)
+  }, [theme, devtools])
+
   React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current)

packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import { onlineManager, useQueryClient } from '@tanstack/react-query'
 import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
-import type { DevtoolsErrorType } from '@tanstack/query-devtools'
+import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/react-query'
 
 export interface DevtoolsPanelOptions {
@@ -39,14 +39,25 @@ export interface DevtoolsPanelOptions {
    * 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
 }
 
 export function ReactQueryDevtoolsPanel(
   props: DevtoolsPanelOptions,
 ): React.ReactElement | null {
   const queryClient = useQueryClient(props.client)
   const ref = React.useRef<HTMLDivElement>(null)
-  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme,
+  } = props
   const [devtools] = React.useState(
     new TanstackQueryDevtoolsPanel({
       client: queryClient,
@@ -61,6 +72,7 @@ export function ReactQueryDevtoolsPanel(
       shadowDOMTarget,
       onClose: props.onClose,
       hideDisabledQueries,
+      theme,
     }),
   )
 
@@ -76,6 +88,10 @@ export function ReactQueryDevtoolsPanel(
     devtools.setErrorTypes(errorTypes || [])
   }, [errorTypes, devtools])
 
+  React.useEffect(() => {
+    devtools.setTheme(theme)
+  }, [theme, devtools])
+
   React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current)

packages/solid-query-devtools/src/devtools.tsx

@@ -5,6 +5,7 @@ import type {
   DevtoolsButtonPosition,
   DevtoolsErrorType,
   DevtoolsPosition,
+  Theme,
 } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/solid-query'
 
@@ -45,6 +46,11 @@ 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
 }
 
 export default function SolidQueryDevtools(props: DevtoolsOptions) {
@@ -63,6 +69,7 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) {
     styleNonce: props.styleNonce,
     shadowDOMTarget: props.shadowDOMTarget,
     hideDisabledQueries: props.hideDisabledQueries,
+    theme: props.theme,
   })
 
   createEffect(() => {
@@ -91,6 +98,10 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) {
     devtools.setErrorTypes(props.errorTypes || [])
   })
 
+  createEffect(() => {
+    devtools.setTheme(props.theme || 'system')
+  })
+
   onMount(() => {
     devtools.mount(ref)
     onCleanup(() => devtools.unmount())

packages/solid-query-devtools/src/devtoolsPanel.tsx

@@ -1,7 +1,7 @@
 import { createEffect, createMemo, onCleanup, onMount } from 'solid-js'
 import { onlineManager, useQueryClient } from '@tanstack/solid-query'
 import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
-import type { DevtoolsErrorType } from '@tanstack/query-devtools'
+import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/solid-query'
 import type { JSX } from 'solid-js'
 
@@ -39,6 +39,11 @@ export interface DevtoolsPanelOptions {
    * 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
 }
 
 export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
@@ -59,6 +64,7 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
     shadowDOMTarget,
     onClose: props.onClose,
     hideDisabledQueries,
+    theme: props.theme,
   })
   createEffect(() => {
     devtools.setClient(client())
@@ -71,6 +77,10 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
     devtools.setErrorTypes(props.errorTypes || [])
   })
 
+  createEffect(() => {
+    devtools.setTheme(props.theme || 'system')
+  })
+
   onMount(() => {
     devtools.mount(ref)
     onCleanup(() => devtools.unmount())

packages/vue-query-devtools/src/devtools.vue

@@ -20,13 +20,15 @@ const devtools = new TanstackQueryDevtools({
   styleNonce: props.styleNonce,
   shadowDOMTarget: props.shadowDOMTarget,
   hideDisabledQueries: props.hideDisabledQueries,
+  theme: props.theme,
 })
 
 watchEffect(() => {
   devtools.setButtonPosition(props.buttonPosition || 'bottom-right')
   devtools.setPosition(props.position || 'bottom')
   devtools.setInitialIsOpen(props.initialIsOpen)
   devtools.setErrorTypes(props.errorTypes || [])
+  devtools.setTheme(props.theme || 'system')
 })
 
 onMounted(() => {