Skip to content

Commit 5a6f3de

Browse files
DamianOsipiukDamianOsipiuk
committed
feat(devtools): allow passing a theme via prop
1 parent 66a194e commit 5a6f3de

13 files changed

Lines changed: 98 additions & 9 deletions

File tree

‎.changeset/olive-ducks-move.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@tanstack/react-query-devtools': minor
3+
'@tanstack/solid-query-devtools': minor
4+
'@tanstack/vue-query-devtools': minor
5+
'@tanstack/query-devtools': minor
6+
---
7+
8+
feat(devtools): allow passing a theme via prop

‎packages/query-devtools/src/DevtoolsComponent.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Devtools } from './Devtools'
44
import { getPreferredColorScheme } from './utils'
55
import { THEME_PREFERENCE } from './constants'
66
import { PiPProvider, QueryDevtoolsContext, ThemeContext } from './contexts'
7+
import type { Theme } from './contexts'
78
import type { DevtoolsComponentType } from './Devtools'
89

910
const DevtoolsComponent: DevtoolsComponentType = (props) => {
@@ -14,10 +15,9 @@ const DevtoolsComponent: DevtoolsComponentType = (props) => {
1415
const colorScheme = getPreferredColorScheme()
1516

1617
const theme = createMemo(() => {
17-
const preference = (localStore.theme_preference || THEME_PREFERENCE) as
18-
| 'system'
19-
| 'dark'
20-
| 'light'
18+
const preference = (localStore.theme_preference ||
19+
props.theme ||
20+
THEME_PREFERENCE) as Theme
2121
if (preference !== 'system') return preference
2222
return colorScheme()
2323
})

‎packages/query-devtools/src/DevtoolsPanelComponent.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ContentView, ParentPanel } from './Devtools'
44
import { getPreferredColorScheme } from './utils'
55
import { THEME_PREFERENCE } from './constants'
66
import { PiPProvider, QueryDevtoolsContext, ThemeContext } from './contexts'
7+
import type { Theme } from './contexts'
78
import type { DevtoolsComponentType } from './Devtools'
89

910
const DevtoolsPanelComponent: DevtoolsComponentType = (props) => {
@@ -14,10 +15,9 @@ const DevtoolsPanelComponent: DevtoolsComponentType = (props) => {
1415
const colorScheme = getPreferredColorScheme()
1516

1617
const theme = createMemo(() => {
17-
const preference = (localStore.theme_preference || THEME_PREFERENCE) as
18-
| 'system'
19-
| 'dark'
20-
| 'light'
18+
const preference = (localStore.theme_preference ||
19+
props.theme ||
20+
THEME_PREFERENCE) as Theme
2121
if (preference !== 'system') return preference
2222
return colorScheme()
2323
})

‎packages/query-devtools/src/TanstackQueryDevtools.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import type {
1111
DevtoolsErrorType,
1212
DevtoolsPosition,
1313
QueryDevtoolsProps,
14+
Theme,
1415
} from './contexts'
1516
import type { Signal } from 'solid-js'
1617

@@ -33,6 +34,7 @@ class TanstackQueryDevtools {
3334
#errorTypes: Signal<Array<DevtoolsErrorType> | undefined>
3435
#hideDisabledQueries: Signal<boolean | undefined>
3536
#Component: DevtoolsComponentType | undefined
37+
#theme: Signal<Theme | undefined>
3638
#dispose?: () => void
3739

3840
constructor(config: TanstackQueryDevtoolsConfig) {
@@ -48,6 +50,7 @@ class TanstackQueryDevtools {
4850
styleNonce,
4951
shadowDOMTarget,
5052
hideDisabledQueries,
53+
theme,
5154
} = config
5255
this.#client = createSignal(client)
5356
this.#queryFlavor = queryFlavor
@@ -60,6 +63,7 @@ class TanstackQueryDevtools {
6063
this.#initialIsOpen = createSignal(initialIsOpen)
6164
this.#errorTypes = createSignal(errorTypes)
6265
this.#hideDisabledQueries = createSignal(hideDisabledQueries)
66+
this.#theme = createSignal(theme)
6367
}
6468

6569
setButtonPosition(position: DevtoolsButtonPosition) {
@@ -82,6 +86,10 @@ class TanstackQueryDevtools {
8286
this.#client[1](client)
8387
}
8488

89+
setTheme(theme: Theme) {
90+
this.#theme[1](theme)
91+
}
92+
8593
mount<T extends HTMLElement>(el: T) {
8694
if (this.#isMounted) {
8795
throw new Error('Devtools is already mounted')
@@ -93,6 +101,7 @@ class TanstackQueryDevtools {
93101
const [errors] = this.#errorTypes
94102
const [hideDisabledQueries] = this.#hideDisabledQueries
95103
const [queryClient] = this.#client
104+
const [theme] = this.#theme
96105
let Devtools: DevtoolsComponentType
97106

98107
if (this.#Component) {
@@ -128,6 +137,9 @@ class TanstackQueryDevtools {
128137
get hideDisabledQueries() {
129138
return hideDisabledQueries()
130139
},
140+
get theme() {
141+
return theme()
142+
},
131143
}}
132144
/>
133145
)

‎packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import type {
1111
DevtoolsErrorType,
1212
DevtoolsPosition,
1313
QueryDevtoolsProps,
14+
Theme,
1415
} from './contexts'
1516
import type { Signal } from 'solid-js'
1617

@@ -35,6 +36,7 @@ class TanstackQueryDevtoolsPanel {
3536
#hideDisabledQueries: Signal<boolean | undefined>
3637
#onClose: Signal<(() => unknown) | undefined>
3738
#Component: DevtoolsComponentType | undefined
39+
#theme: Signal<Theme | undefined>
3840
#dispose?: () => void
3941

4042
constructor(config: TanstackQueryDevtoolsPanelConfig) {
@@ -51,6 +53,7 @@ class TanstackQueryDevtoolsPanel {
5153
shadowDOMTarget,
5254
onClose,
5355
hideDisabledQueries,
56+
theme,
5457
} = config
5558
this.#client = createSignal(client)
5659
this.#queryFlavor = queryFlavor
@@ -64,6 +67,7 @@ class TanstackQueryDevtoolsPanel {
6467
this.#errorTypes = createSignal(errorTypes)
6568
this.#hideDisabledQueries = createSignal(hideDisabledQueries)
6669
this.#onClose = createSignal(onClose)
70+
this.#theme = createSignal(theme)
6771
}
6872

6973
setButtonPosition(position: DevtoolsButtonPosition) {
@@ -90,6 +94,10 @@ class TanstackQueryDevtoolsPanel {
9094
this.#onClose[1](() => onClose)
9195
}
9296

97+
setTheme(theme: Theme) {
98+
this.#theme[1](theme)
99+
}
100+
93101
mount<T extends HTMLElement>(el: T) {
94102
if (this.#isMounted) {
95103
throw new Error('Devtools is already mounted')
@@ -102,6 +110,7 @@ class TanstackQueryDevtoolsPanel {
102110
const [hideDisabledQueries] = this.#hideDisabledQueries
103111
const [queryClient] = this.#client
104112
const [onClose] = this.#onClose
113+
const [theme] = this.#theme
105114
let Devtools: DevtoolsComponentType
106115

107116
if (this.#Component) {
@@ -140,6 +149,9 @@ class TanstackQueryDevtoolsPanel {
140149
get onClose() {
141150
return onClose()
142151
},
152+
get theme() {
153+
return theme()
154+
},
143155
}}
144156
/>
145157
)

‎packages/query-devtools/src/contexts/QueryDevtoolsContext.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ type XPosition = 'left' | 'right'
55
type YPosition = 'top' | 'bottom'
66
export type DevtoolsPosition = XPosition | YPosition
77
export type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative'
8+
export type Theme = 'dark' | 'light' | 'system'
89

910
export interface DevtoolsErrorType {
1011
/**
@@ -30,6 +31,7 @@ export interface QueryDevtoolsProps {
3031
shadowDOMTarget?: ShadowRoot
3132
onClose?: () => unknown
3233
hideDisabledQueries?: boolean
34+
theme?: Theme
3335
}
3436

3537
export const QueryDevtoolsContext = createContext<QueryDevtoolsProps>({

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@ export interface DevtoolsOptions {
4646
* Set this to true to hide disabled queries from the devtools panel.
4747
*/
4848
hideDisabledQueries?: boolean
49+
/**
50+
* Set this to 'light' or 'dark' to change the theme of the devtools panel.
51+
*/
52+
theme?: 'light' | 'dark' | 'system'
4953
}
5054

5155
export function ReactQueryDevtools(
@@ -61,6 +65,7 @@ export function ReactQueryDevtools(
6165
styleNonce,
6266
shadowDOMTarget,
6367
hideDisabledQueries,
68+
theme,
6469
} = props
6570
const [devtools] = React.useState(
6671
new TanstackQueryDevtools({
@@ -75,6 +80,7 @@ export function ReactQueryDevtools(
7580
styleNonce,
7681
shadowDOMTarget,
7782
hideDisabledQueries,
83+
theme,
7884
}),
7985
)
8086

@@ -102,6 +108,10 @@ export function ReactQueryDevtools(
102108
devtools.setErrorTypes(errorTypes || [])
103109
}, [errorTypes, devtools])
104110

111+
React.useEffect(() => {
112+
devtools.setTheme(theme || 'system')
113+
}, [theme, devtools])
114+
105115
React.useEffect(() => {
106116
if (ref.current) {
107117
devtools.mount(ref.current)

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,24 @@ export interface DevtoolsPanelOptions {
3939
* Set this to true to hide disabled queries from the devtools panel.
4040
*/
4141
hideDisabledQueries?: boolean
42+
/**
43+
* Set this to 'light' or 'dark' to change the theme of the devtools panel.
44+
*/
45+
theme?: 'light' | 'dark' | 'system'
4246
}
4347

4448
export function ReactQueryDevtoolsPanel(
4549
props: DevtoolsPanelOptions,
4650
): React.ReactElement | null {
4751
const queryClient = useQueryClient(props.client)
4852
const ref = React.useRef<HTMLDivElement>(null)
49-
const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props
53+
const {
54+
errorTypes,
55+
styleNonce,
56+
shadowDOMTarget,
57+
hideDisabledQueries,
58+
theme,
59+
} = props
5060
const [devtools] = React.useState(
5161
new TanstackQueryDevtoolsPanel({
5262
client: queryClient,
@@ -61,6 +71,7 @@ export function ReactQueryDevtoolsPanel(
6171
shadowDOMTarget,
6272
onClose: props.onClose,
6373
hideDisabledQueries,
74+
theme,
6475
}),
6576
)
6677

@@ -76,6 +87,10 @@ export function ReactQueryDevtoolsPanel(
7687
devtools.setErrorTypes(errorTypes || [])
7788
}, [errorTypes, devtools])
7889

90+
React.useEffect(() => {
91+
devtools.setTheme(theme || 'system')
92+
}, [theme, devtools])
93+
7994
React.useEffect(() => {
8095
if (ref.current) {
8196
devtools.mount(ref.current)

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ interface DevtoolsOptions {
4545
* Set this to true to hide disabled queries from the devtools panel.
4646
*/
4747
hideDisabledQueries?: boolean
48+
/**
49+
* Set this to 'light' or 'dark' to change the theme of the devtools panel.
50+
*/
51+
theme?: 'light' | 'dark' | 'system'
4852
}
4953

5054
export default function SolidQueryDevtools(props: DevtoolsOptions) {
@@ -63,6 +67,7 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) {
6367
styleNonce: props.styleNonce,
6468
shadowDOMTarget: props.shadowDOMTarget,
6569
hideDisabledQueries: props.hideDisabledQueries,
70+
theme: props.theme,
6671
})
6772

6873
createEffect(() => {
@@ -91,6 +96,10 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) {
9196
devtools.setErrorTypes(props.errorTypes || [])
9297
})
9398

99+
createEffect(() => {
100+
devtools.setTheme(props.theme || 'system')
101+
})
102+
94103
onMount(() => {
95104
devtools.mount(ref)
96105
onCleanup(() => devtools.unmount())

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@ export interface DevtoolsPanelOptions {
3939
* Set this to true to hide disabled queries from the devtools panel.
4040
*/
4141
hideDisabledQueries?: boolean
42+
/**
43+
* Set this to 'light' or 'dark' to change the theme of the devtools panel.
44+
*/
45+
theme?: 'light' | 'dark' | 'system'
4246
}
4347

4448
export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
@@ -59,6 +63,7 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
5963
shadowDOMTarget,
6064
onClose: props.onClose,
6165
hideDisabledQueries,
66+
theme: props.theme,
6267
})
6368
createEffect(() => {
6469
devtools.setClient(client())
@@ -71,6 +76,10 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
7176
devtools.setErrorTypes(props.errorTypes || [])
7277
})
7378

79+
createEffect(() => {
80+
devtools.setTheme(props.theme || 'system')
81+
})
82+
7483
onMount(() => {
7584
devtools.mount(ref)
7685
onCleanup(() => devtools.unmount())

0 commit comments

Comments
 (0)