diff --git a/.changeset/svelte-devtools-theme-option.md b/.changeset/svelte-devtools-theme-option.md
new file mode 100644
index 00000000000..00c37ead258
--- /dev/null
+++ b/.changeset/svelte-devtools-theme-option.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/svelte-query-devtools': patch
+---
+
+Add theme option support to the floating devtools.
diff --git a/docs/framework/svelte/devtools.md b/docs/framework/svelte/devtools.md
index efdb77e922d..a2b29c9db92 100644
--- a/docs/framework/svelte/devtools.md
+++ b/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.
diff --git a/packages/svelte-query-devtools/src/Devtools.svelte b/packages/svelte-query-devtools/src/Devtools.svelte
index d0df767098e..29d4ce94264 100644
--- a/packages/svelte-query-devtools/src/Devtools.svelte
+++ b/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>