From 5a6f3def5dec3549c164325d7bd4790f3e9fabb0 Mon Sep 17 00:00:00 2001 From: Damian Osipiuk Date: Wed, 19 Nov 2025 15:45:03 +0100 Subject: [PATCH 1/3] feat(devtools): allow passing a theme via prop --- .changeset/olive-ducks-move.md | 8 ++++++++ .../query-devtools/src/DevtoolsComponent.tsx | 8 ++++---- .../src/DevtoolsPanelComponent.tsx | 8 ++++---- .../src/TanstackQueryDevtools.tsx | 12 ++++++++++++ .../src/TanstackQueryDevtoolsPanel.tsx | 12 ++++++++++++ .../src/contexts/QueryDevtoolsContext.ts | 2 ++ .../src/ReactQueryDevtools.tsx | 10 ++++++++++ .../src/ReactQueryDevtoolsPanel.tsx | 17 ++++++++++++++++- packages/solid-query-devtools/src/devtools.tsx | 9 +++++++++ .../solid-query-devtools/src/devtoolsPanel.tsx | 9 +++++++++ packages/vue-query-devtools/src/devtools.vue | 2 ++ .../vue-query-devtools/src/devtoolsPanel.vue | 2 ++ packages/vue-query-devtools/src/types.ts | 8 ++++++++ 13 files changed, 98 insertions(+), 9 deletions(-) create mode 100644 .changeset/olive-ducks-move.md diff --git a/.changeset/olive-ducks-move.md b/.changeset/olive-ducks-move.md new file mode 100644 index 0000000000..272a602f90 --- /dev/null +++ b/.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 diff --git a/packages/query-devtools/src/DevtoolsComponent.tsx b/packages/query-devtools/src/DevtoolsComponent.tsx index 45d93204e0..bef775fc88 100644 --- a/packages/query-devtools/src/DevtoolsComponent.tsx +++ b/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 = (localStore.theme_preference || + props.theme || + THEME_PREFERENCE) as Theme if (preference !== 'system') return preference return colorScheme() }) diff --git a/packages/query-devtools/src/DevtoolsPanelComponent.tsx b/packages/query-devtools/src/DevtoolsPanelComponent.tsx index eb3d19e4d9..acafc22a17 100644 --- a/packages/query-devtools/src/DevtoolsPanelComponent.tsx +++ b/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 = (localStore.theme_preference || + props.theme || + THEME_PREFERENCE) as Theme if (preference !== 'system') return preference return colorScheme() }) diff --git a/packages/query-devtools/src/TanstackQueryDevtools.tsx b/packages/query-devtools/src/TanstackQueryDevtools.tsx index 2fee7ac00a..9da721a3d8 100644 --- a/packages/query-devtools/src/TanstackQueryDevtools.tsx +++ b/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 | undefined> #hideDisabledQueries: Signal #Component: DevtoolsComponentType | undefined + #theme: Signal #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(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() + }, }} /> ) diff --git a/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx b/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx index 8b72850acd..75b1aae0b6 100644 --- a/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx +++ b/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 #onClose: Signal<(() => unknown) | undefined> #Component: DevtoolsComponentType | undefined + #theme: Signal #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(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() + }, }} /> ) diff --git a/packages/query-devtools/src/contexts/QueryDevtoolsContext.ts b/packages/query-devtools/src/contexts/QueryDevtoolsContext.ts index 51b44b3bae..77969931cb 100644 --- a/packages/query-devtools/src/contexts/QueryDevtoolsContext.ts +++ b/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({ diff --git a/packages/react-query-devtools/src/ReactQueryDevtools.tsx b/packages/react-query-devtools/src/ReactQueryDevtools.tsx index 7c6ebcd25e..93259b839b 100644 --- a/packages/react-query-devtools/src/ReactQueryDevtools.tsx +++ b/packages/react-query-devtools/src/ReactQueryDevtools.tsx @@ -46,6 +46,10 @@ export interface DevtoolsOptions { * Set this to true to hide disabled queries from the devtools panel. */ hideDisabledQueries?: boolean + /** + * Set this to 'light' or 'dark' to change the theme of the devtools panel. + */ + theme?: 'light' | 'dark' | 'system' } export function ReactQueryDevtools( @@ -61,6 +65,7 @@ export function ReactQueryDevtools( styleNonce, shadowDOMTarget, hideDisabledQueries, + theme, } = props const [devtools] = React.useState( new TanstackQueryDevtools({ @@ -75,6 +80,7 @@ export function ReactQueryDevtools( styleNonce, shadowDOMTarget, hideDisabledQueries, + theme, }), ) @@ -102,6 +108,10 @@ export function ReactQueryDevtools( devtools.setErrorTypes(errorTypes || []) }, [errorTypes, devtools]) + React.useEffect(() => { + devtools.setTheme(theme || 'system') + }, [theme, devtools]) + React.useEffect(() => { if (ref.current) { devtools.mount(ref.current) diff --git a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx b/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx index d1db23537f..de01fae722 100644 --- a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx +++ b/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx @@ -39,6 +39,10 @@ export interface DevtoolsPanelOptions { * Set this to true to hide disabled queries from the devtools panel. */ hideDisabledQueries?: boolean + /** + * Set this to 'light' or 'dark' to change the theme of the devtools panel. + */ + theme?: 'light' | 'dark' | 'system' } export function ReactQueryDevtoolsPanel( @@ -46,7 +50,13 @@ export function ReactQueryDevtoolsPanel( ): React.ReactElement | null { const queryClient = useQueryClient(props.client) const ref = React.useRef(null) - const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props + const { + errorTypes, + styleNonce, + shadowDOMTarget, + hideDisabledQueries, + theme, + } = props const [devtools] = React.useState( new TanstackQueryDevtoolsPanel({ client: queryClient, @@ -61,6 +71,7 @@ export function ReactQueryDevtoolsPanel( shadowDOMTarget, onClose: props.onClose, hideDisabledQueries, + theme, }), ) @@ -76,6 +87,10 @@ export function ReactQueryDevtoolsPanel( devtools.setErrorTypes(errorTypes || []) }, [errorTypes, devtools]) + React.useEffect(() => { + devtools.setTheme(theme || 'system') + }, [theme, devtools]) + React.useEffect(() => { if (ref.current) { devtools.mount(ref.current) diff --git a/packages/solid-query-devtools/src/devtools.tsx b/packages/solid-query-devtools/src/devtools.tsx index a787ce8d76..5bd718ab89 100644 --- a/packages/solid-query-devtools/src/devtools.tsx +++ b/packages/solid-query-devtools/src/devtools.tsx @@ -45,6 +45,10 @@ interface DevtoolsOptions { * Set this to true to hide disabled queries from the devtools panel. */ hideDisabledQueries?: boolean + /** + * Set this to 'light' or 'dark' to change the theme of the devtools panel. + */ + theme?: 'light' | 'dark' | 'system' } export default function SolidQueryDevtools(props: DevtoolsOptions) { @@ -63,6 +67,7 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) { styleNonce: props.styleNonce, shadowDOMTarget: props.shadowDOMTarget, hideDisabledQueries: props.hideDisabledQueries, + theme: props.theme, }) createEffect(() => { @@ -91,6 +96,10 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) { devtools.setErrorTypes(props.errorTypes || []) }) + createEffect(() => { + devtools.setTheme(props.theme || 'system') + }) + onMount(() => { devtools.mount(ref) onCleanup(() => devtools.unmount()) diff --git a/packages/solid-query-devtools/src/devtoolsPanel.tsx b/packages/solid-query-devtools/src/devtoolsPanel.tsx index 5ddc5319ac..473032bc4d 100644 --- a/packages/solid-query-devtools/src/devtoolsPanel.tsx +++ b/packages/solid-query-devtools/src/devtoolsPanel.tsx @@ -39,6 +39,10 @@ export interface DevtoolsPanelOptions { * Set this to true to hide disabled queries from the devtools panel. */ hideDisabledQueries?: boolean + /** + * Set this to 'light' or 'dark' to change the theme of the devtools panel. + */ + theme?: 'light' | 'dark' | 'system' } export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) { @@ -59,6 +63,7 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) { shadowDOMTarget, onClose: props.onClose, hideDisabledQueries, + theme: props.theme, }) createEffect(() => { devtools.setClient(client()) @@ -71,6 +76,10 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) { devtools.setErrorTypes(props.errorTypes || []) }) + createEffect(() => { + devtools.setTheme(props.theme || 'system') + }) + onMount(() => { devtools.mount(ref) onCleanup(() => devtools.unmount()) diff --git a/packages/vue-query-devtools/src/devtools.vue b/packages/vue-query-devtools/src/devtools.vue index b995adb56c..d4e5482f9a 100644 --- a/packages/vue-query-devtools/src/devtools.vue +++ b/packages/vue-query-devtools/src/devtools.vue @@ -20,6 +20,7 @@ const devtools = new TanstackQueryDevtools({ styleNonce: props.styleNonce, shadowDOMTarget: props.shadowDOMTarget, hideDisabledQueries: props.hideDisabledQueries, + theme: props.theme, }) watchEffect(() => { @@ -27,6 +28,7 @@ watchEffect(() => { devtools.setPosition(props.position || 'bottom') devtools.setInitialIsOpen(props.initialIsOpen) devtools.setErrorTypes(props.errorTypes || []) + devtools.setTheme(props.theme || 'system') }) onMounted(() => { diff --git a/packages/vue-query-devtools/src/devtoolsPanel.vue b/packages/vue-query-devtools/src/devtoolsPanel.vue index 189f86330b..3b7fc66ce5 100644 --- a/packages/vue-query-devtools/src/devtoolsPanel.vue +++ b/packages/vue-query-devtools/src/devtoolsPanel.vue @@ -28,11 +28,13 @@ const devtools = new TanstackQueryDevtoolsPanel({ shadowDOMTarget: props.shadowDOMTarget, hideDisabledQueries: props.hideDisabledQueries, onClose: props.onClose, + theme: props.theme, }) watchEffect(() => { devtools.setOnClose(props.onClose ?? (() => {})) devtools.setErrorTypes(props.errorTypes || []) + devtools.setTheme(props.theme || 'system') }) onMounted(() => { diff --git a/packages/vue-query-devtools/src/types.ts b/packages/vue-query-devtools/src/types.ts index 8007b06504..a4054506e6 100644 --- a/packages/vue-query-devtools/src/types.ts +++ b/packages/vue-query-devtools/src/types.ts @@ -42,6 +42,10 @@ export interface DevtoolsOptions { * Set this to true to hide disabled queries from the devtools panel. */ hideDisabledQueries?: boolean + /** + * Set this to 'light' or 'dark' to change the theme of the devtools panel. + */ + theme?: 'light' | 'dark' | 'system' } export interface DevtoolsPanelOptions { @@ -78,4 +82,8 @@ export interface DevtoolsPanelOptions { * Set this to true to hide disabled queries from the devtools panel. */ hideDisabledQueries?: boolean + /** + * Set this to 'light' or 'dark' to change the theme of the devtools panel. + */ + theme?: 'light' | 'dark' | 'system' } From e4dbcdd4e059da9238bfdb718aedc28bdc24644e Mon Sep 17 00:00:00 2001 From: Damian Osipiuk Date: Wed, 19 Nov 2025 16:24:50 +0100 Subject: [PATCH 2/3] fix: docs, prop takes precedence --- packages/query-devtools/src/DevtoolsComponent.tsx | 4 ++-- .../query-devtools/src/DevtoolsPanelComponent.tsx | 4 ++-- packages/query-devtools/src/index.ts | 1 + .../react-query-devtools/src/ReactQueryDevtools.tsx | 6 ++++-- .../src/ReactQueryDevtoolsPanel.tsx | 7 ++++--- packages/solid-query-devtools/src/devtools.tsx | 6 ++++-- packages/solid-query-devtools/src/devtoolsPanel.tsx | 7 ++++--- packages/vue-query-devtools/src/types.ts | 11 +++++++---- 8 files changed, 28 insertions(+), 18 deletions(-) diff --git a/packages/query-devtools/src/DevtoolsComponent.tsx b/packages/query-devtools/src/DevtoolsComponent.tsx index bef775fc88..069d79c87a 100644 --- a/packages/query-devtools/src/DevtoolsComponent.tsx +++ b/packages/query-devtools/src/DevtoolsComponent.tsx @@ -15,8 +15,8 @@ const DevtoolsComponent: DevtoolsComponentType = (props) => { const colorScheme = getPreferredColorScheme() const theme = createMemo(() => { - const preference = (localStore.theme_preference || - props.theme || + const preference = (props.theme || + localStore.theme_preference || THEME_PREFERENCE) as Theme if (preference !== 'system') return preference return colorScheme() diff --git a/packages/query-devtools/src/DevtoolsPanelComponent.tsx b/packages/query-devtools/src/DevtoolsPanelComponent.tsx index acafc22a17..cae641b44a 100644 --- a/packages/query-devtools/src/DevtoolsPanelComponent.tsx +++ b/packages/query-devtools/src/DevtoolsPanelComponent.tsx @@ -15,8 +15,8 @@ const DevtoolsPanelComponent: DevtoolsComponentType = (props) => { const colorScheme = getPreferredColorScheme() const theme = createMemo(() => { - const preference = (localStore.theme_preference || - props.theme || + const preference = (props.theme || + localStore.theme_preference || THEME_PREFERENCE) as Theme if (preference !== 'system') return preference return colorScheme() diff --git a/packages/query-devtools/src/index.ts b/packages/query-devtools/src/index.ts index 1cf3cedd17..4a163cb2d3 100644 --- a/packages/query-devtools/src/index.ts +++ b/packages/query-devtools/src/index.ts @@ -2,6 +2,7 @@ export type { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, + Theme, } from './contexts' export { TanstackQueryDevtools, diff --git a/packages/react-query-devtools/src/ReactQueryDevtools.tsx b/packages/react-query-devtools/src/ReactQueryDevtools.tsx index 93259b839b..56ae2c52af 100644 --- a/packages/react-query-devtools/src/ReactQueryDevtools.tsx +++ b/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' @@ -47,9 +48,10 @@ export interface DevtoolsOptions { */ hideDisabledQueries?: boolean /** - * Set this to 'light' or 'dark' to change the theme of the devtools panel. + * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. + * Defaults to 'system'. */ - theme?: 'light' | 'dark' | 'system' + theme?: Theme } export function ReactQueryDevtools( diff --git a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx b/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx index de01fae722..dc35c8acb6 100644 --- a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx +++ b/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 { @@ -40,9 +40,10 @@ export interface DevtoolsPanelOptions { */ hideDisabledQueries?: boolean /** - * Set this to 'light' or 'dark' to change the theme of the devtools panel. + * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. + * Defaults to 'system'. */ - theme?: 'light' | 'dark' | 'system' + theme?: Theme } export function ReactQueryDevtoolsPanel( diff --git a/packages/solid-query-devtools/src/devtools.tsx b/packages/solid-query-devtools/src/devtools.tsx index 5bd718ab89..079f8bf95d 100644 --- a/packages/solid-query-devtools/src/devtools.tsx +++ b/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' @@ -46,9 +47,10 @@ interface DevtoolsOptions { */ hideDisabledQueries?: boolean /** - * Set this to 'light' or 'dark' to change the theme of the devtools panel. + * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. + * Defaults to 'system'. */ - theme?: 'light' | 'dark' | 'system' + theme?: Theme } export default function SolidQueryDevtools(props: DevtoolsOptions) { diff --git a/packages/solid-query-devtools/src/devtoolsPanel.tsx b/packages/solid-query-devtools/src/devtoolsPanel.tsx index 473032bc4d..1288b031e7 100644 --- a/packages/solid-query-devtools/src/devtoolsPanel.tsx +++ b/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' @@ -40,9 +40,10 @@ export interface DevtoolsPanelOptions { */ hideDisabledQueries?: boolean /** - * Set this to 'light' or 'dark' to change the theme of the devtools panel. + * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. + * Defaults to 'system'. */ - theme?: 'light' | 'dark' | 'system' + theme?: Theme } export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) { diff --git a/packages/vue-query-devtools/src/types.ts b/packages/vue-query-devtools/src/types.ts index a4054506e6..67dd9a2755 100644 --- a/packages/vue-query-devtools/src/types.ts +++ b/packages/vue-query-devtools/src/types.ts @@ -2,6 +2,7 @@ import type { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, + Theme, } from '@tanstack/query-devtools' import type { QueryClient } from '@tanstack/vue-query' @@ -43,9 +44,10 @@ export interface DevtoolsOptions { */ hideDisabledQueries?: boolean /** - * Set this to 'light' or 'dark' to change the theme of the devtools panel. + * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. + * Defaults to 'system'. */ - theme?: 'light' | 'dark' | 'system' + theme?: Theme } export interface DevtoolsPanelOptions { @@ -83,7 +85,8 @@ export interface DevtoolsPanelOptions { */ hideDisabledQueries?: boolean /** - * Set this to 'light' or 'dark' to change the theme of the devtools panel. + * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel. + * Defaults to 'system'. */ - theme?: 'light' | 'dark' | 'system' + theme?: Theme } From 312e9d002ff4ed8a269deba7fd8b309be4b01cd7 Mon Sep 17 00:00:00 2001 From: Damian Osipiuk Date: Fri, 21 Nov 2025 11:31:37 +0100 Subject: [PATCH 3/3] fix: example issue? --- packages/query-devtools/src/TanstackQueryDevtools.tsx | 2 +- packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx | 2 +- packages/react-query-devtools/src/ReactQueryDevtools.tsx | 2 +- packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx | 2 +- packages/vue-query-devtools/src/devtoolsPanel.vue | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/query-devtools/src/TanstackQueryDevtools.tsx b/packages/query-devtools/src/TanstackQueryDevtools.tsx index 9da721a3d8..f8928d5d47 100644 --- a/packages/query-devtools/src/TanstackQueryDevtools.tsx +++ b/packages/query-devtools/src/TanstackQueryDevtools.tsx @@ -86,7 +86,7 @@ class TanstackQueryDevtools { this.#client[1](client) } - setTheme(theme: Theme) { + setTheme(theme?: Theme) { this.#theme[1](theme) } diff --git a/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx b/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx index 75b1aae0b6..699a64dbc1 100644 --- a/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx +++ b/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx @@ -94,7 +94,7 @@ class TanstackQueryDevtoolsPanel { this.#onClose[1](() => onClose) } - setTheme(theme: Theme) { + setTheme(theme?: Theme) { this.#theme[1](theme) } diff --git a/packages/react-query-devtools/src/ReactQueryDevtools.tsx b/packages/react-query-devtools/src/ReactQueryDevtools.tsx index 56ae2c52af..959d5a739b 100644 --- a/packages/react-query-devtools/src/ReactQueryDevtools.tsx +++ b/packages/react-query-devtools/src/ReactQueryDevtools.tsx @@ -111,7 +111,7 @@ export function ReactQueryDevtools( }, [errorTypes, devtools]) React.useEffect(() => { - devtools.setTheme(theme || 'system') + devtools.setTheme(theme) }, [theme, devtools]) React.useEffect(() => { diff --git a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx b/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx index dc35c8acb6..8ff179ea3d 100644 --- a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx +++ b/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx @@ -89,7 +89,7 @@ export function ReactQueryDevtoolsPanel( }, [errorTypes, devtools]) React.useEffect(() => { - devtools.setTheme(theme || 'system') + devtools.setTheme(theme) }, [theme, devtools]) React.useEffect(() => { diff --git a/packages/vue-query-devtools/src/devtoolsPanel.vue b/packages/vue-query-devtools/src/devtoolsPanel.vue index 3b7fc66ce5..0443831240 100644 --- a/packages/vue-query-devtools/src/devtoolsPanel.vue +++ b/packages/vue-query-devtools/src/devtoolsPanel.vue @@ -34,7 +34,7 @@ const devtools = new TanstackQueryDevtoolsPanel({ watchEffect(() => { devtools.setOnClose(props.onClose ?? (() => {})) devtools.setErrorTypes(props.errorTypes || []) - devtools.setTheme(props.theme || 'system') + devtools.setTheme(props.theme) }) onMounted(() => {