feat(svelte-query-devtools): add theme option

.changeset/svelte-devtools-theme-option.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/svelte-query-devtools': patch
+---
+
+Add theme option support to the floating devtools.

docs/framework/svelte/devtools.md

@@ -79,3 +79,6 @@ Place the following code as high in your Svelte app as you can. The closer it is
 - `shadowDOMTarget?: ShadowRoot`
   - Default behavior will apply the devtool's styles to the head tag within the DOM.
   - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM.
+- `theme?: Theme`
+  - Defaults to `system`.
+  - Set this to change the theme of the devtools panel.

packages/svelte-query-devtools/src/Devtools.svelte

@@ -8,6 +8,7 @@
     DevtoolsErrorType,
     DevtoolsPosition,
     TanstackQueryDevtools,
+    Theme,
   } from '@tanstack/query-devtools'
 
   interface DevtoolsOptions {
@@ -47,6 +48,11 @@
      * 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
   }
 
   let {
@@ -58,6 +64,7 @@
     styleNonce = undefined,
     shadowDOMTarget = undefined,
     hideDisabledQueries = false,
+    theme = 'system',
   }: DevtoolsOptions = $props()
 
   let ref: HTMLDivElement
@@ -80,6 +87,7 @@
           styleNonce,
           shadowDOMTarget,
           hideDisabledQueries,
+          theme,
         })
 
         devtools.mount(ref)
@@ -102,6 +110,10 @@
     $effect(() => {
       devtools?.setErrorTypes(errorTypes)
     })
+
+    $effect(() => {
+      devtools?.setTheme(theme)
+    })
   }
 </script>