docs: add README header banners to the framework adapter packages (#491)

Author: AlemTuzlak

packages/preact-devtools/README.md

@@ -1,3 +1,20 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=preact&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=preact"
+    />
+    <img
+      src="https://tanstack.com/api/readme/devtools.png?framework=preact"
+      alt="TanStack Preact Devtools"
+      width="900"
+    />
+  </picture>
+</div>
 # @tanstack/preact-devtools
 
 This package is still under active development and might have breaking changes in the future. Please use it with caution.

packages/react-devtools/README.md

@@ -1,3 +1,20 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=react&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=react"
+    />
+    <img
+      src="https://tanstack.com/api/readme/devtools.png?framework=react"
+      alt="TanStack React Devtools"
+      width="900"
+    />
+  </picture>
+</div>
 # @tanstack/react-devtools
 
 This package is still under active development and might have breaking changes in the future. Please use it with caution.

packages/solid-devtools/README.md

@@ -1,3 +1,20 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=solid&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=solid"
+    />
+    <img
+      src="https://tanstack.com/api/readme/devtools.png?framework=solid"
+      alt="TanStack Solid Devtools"
+      width="900"
+    />
+  </picture>
+</div>
 # @tanstack/solid-devtools
 
 This package is still under active development and might have breaking changes in the future. Please use it with caution.

packages/vue-devtools/README.md

@@ -1,3 +1,20 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=vue&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/devtools.png?framework=vue"
+    />
+    <img
+      src="https://tanstack.com/api/readme/devtools.png?framework=vue"
+      alt="TanStack Vue Devtools"
+      width="900"
+    />
+  </picture>
+</div>
 # @tanstack/vue-devtools
 
 This package is still under active development and might have breaking changes in the future. Please use it with caution.