diff --git a/README.md b/README.md
index 8705b209..75a9816c 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_charts.png" alt="TanStack Charts" />
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/charts.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/charts.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/charts.png"
+      alt="TanStack Charts"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
diff --git a/media/header_charts.png b/media/header_charts.png
deleted file mode 100644
index f11d6305..00000000
Binary files a/media/header_charts.png and /dev/null differ
diff --git a/packages/alpine-charts/README.md b/packages/alpine-charts/README.md
index a40b63af..9f3ff3b3 100644
--- a/packages/alpine-charts/README.md
+++ b/packages/alpine-charts/README.md
@@ -1,3 +1,21 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Alpine%20Charts&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Alpine%20Charts"
+    />
+    <img
+      src="https://tanstack.com/api/readme/charts.png?title=TanStack%20Alpine%20Charts"
+      alt="TanStack Alpine Charts"
+      width="900"
+    />
+  </picture>
+</div>
+
 # `@tanstack/alpine-charts`
 
 This compatibility package remains supported for existing applications. New
diff --git a/packages/angular-charts/README.md b/packages/angular-charts/README.md
index 8faef023..81693300 100644
--- a/packages/angular-charts/README.md
+++ b/packages/angular-charts/README.md
@@ -1,3 +1,21 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Angular%20Charts&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Angular%20Charts"
+    />
+    <img
+      src="https://tanstack.com/api/readme/charts.png?title=TanStack%20Angular%20Charts"
+      alt="TanStack Angular Charts"
+      width="900"
+    />
+  </picture>
+</div>
+
 # `@tanstack/angular-charts`
 
 This compatibility package remains supported for existing applications. New
diff --git a/packages/charts-core/README.md b/packages/charts-core/README.md
index f474fd3b..9e405767 100644
--- a/packages/charts-core/README.md
+++ b/packages/charts-core/README.md
@@ -1,3 +1,21 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/charts.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/charts.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/charts.png"
+      alt="TanStack Charts"
+      width="900"
+    />
+  </picture>
+</div>
+
 # TanStack Charts
 
 A chart grammar for TypeScript and JavaScript. Marks consume your data
diff --git a/packages/charts-scales/README.md b/packages/charts-scales/README.md
index c795c721..68473617 100644
--- a/packages/charts-scales/README.md
+++ b/packages/charts-scales/README.md
@@ -1,3 +1,21 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/charts.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/charts.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/charts.png"
+      alt="TanStack Charts"
+      width="900"
+    />
+  </picture>
+</div>
+
 # `@tanstack/charts-scales`
 
 This compatibility package remains supported for existing applications. New
diff --git a/packages/lit-charts/README.md b/packages/lit-charts/README.md
index de9b8943..b8cc3f85 100644
--- a/packages/lit-charts/README.md
+++ b/packages/lit-charts/README.md
@@ -1,3 +1,21 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Lit%20Charts&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Lit%20Charts"
+    />
+    <img
+      src="https://tanstack.com/api/readme/charts.png?title=TanStack%20Lit%20Charts"
+      alt="TanStack Lit Charts"
+      width="900"
+    />
+  </picture>
+</div>
+
 # `@tanstack/lit-charts`
 
 This compatibility package remains supported for existing applications. New
diff --git a/packages/octane-charts/README.md b/packages/octane-charts/README.md
index 3056fa22..057bc7b8 100644
--- a/packages/octane-charts/README.md
+++ b/packages/octane-charts/README.md
@@ -1,3 +1,21 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Octane%20Charts&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Octane%20Charts"
+    />
+    <img
+      src="https://tanstack.com/api/readme/charts.png?title=TanStack%20Octane%20Charts"
+      alt="TanStack Octane Charts"
+      width="900"
+    />
+  </picture>
+</div>
+
 # `@tanstack/octane-charts`
 
 This compatibility package remains supported for existing applications. New
diff --git a/packages/preact-charts/README.md b/packages/preact-charts/README.md
index 7597c611..86b7a166 100644
--- a/packages/preact-charts/README.md
+++ b/packages/preact-charts/README.md
@@ -1,3 +1,21 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Preact%20Charts&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Preact%20Charts"
+    />
+    <img
+      src="https://tanstack.com/api/readme/charts.png?title=TanStack%20Preact%20Charts"
+      alt="TanStack Preact Charts"
+      width="900"
+    />
+  </picture>
+</div>
+
 # `@tanstack/preact-charts`
 
 This compatibility package remains supported for existing applications. New
diff --git a/packages/react-charts/README.md b/packages/react-charts/README.md
index e6484a89..60d67e3b 100644
--- a/packages/react-charts/README.md
+++ b/packages/react-charts/README.md
@@ -1,3 +1,21 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/charts.png?framework=react&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/charts.png?framework=react"
+    />
+    <img
+      src="https://tanstack.com/api/readme/charts.png?framework=react"
+      alt="TanStack React Charts"
+      width="900"
+    />
+  </picture>
+</div>
+
 # `@tanstack/react-charts`
 
 This compatibility package remains supported for existing applications. New
diff --git a/packages/react-native-charts/README.md b/packages/react-native-charts/README.md
index 9d751d8b..8f1d079b 100644
--- a/packages/react-native-charts/README.md
+++ b/packages/react-native-charts/README.md
@@ -1,3 +1,21 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20React%20Native%20Charts&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20React%20Native%20Charts"
+    />
+    <img
+      src="https://tanstack.com/api/readme/charts.png?title=TanStack%20React%20Native%20Charts"
+      alt="TanStack React Native Charts"
+      width="900"
+    />
+  </picture>
+</div>
+
 # TanStack React Native Charts
 
 This compatibility package remains supported for existing applications. New
diff --git a/packages/solid-charts/README.md b/packages/solid-charts/README.md
index 5c5fe095..863f0c48 100644
--- a/packages/solid-charts/README.md
+++ b/packages/solid-charts/README.md
@@ -1,3 +1,21 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Solid%20Charts&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Solid%20Charts"
+    />
+    <img
+      src="https://tanstack.com/api/readme/charts.png?title=TanStack%20Solid%20Charts"
+      alt="TanStack Solid Charts"
+      width="900"
+    />
+  </picture>
+</div>
+
 # `@tanstack/solid-charts`
 
 This compatibility package remains supported for existing applications. New
diff --git a/packages/svelte-charts/README.md b/packages/svelte-charts/README.md
index 14592cdf..96a2fa98 100644
--- a/packages/svelte-charts/README.md
+++ b/packages/svelte-charts/README.md
@@ -1,3 +1,21 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Svelte%20Charts&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Svelte%20Charts"
+    />
+    <img
+      src="https://tanstack.com/api/readme/charts.png?title=TanStack%20Svelte%20Charts"
+      alt="TanStack Svelte Charts"
+      width="900"
+    />
+  </picture>
+</div>
+
 # `@tanstack/svelte-charts`
 
 This compatibility package remains supported for existing applications. New
diff --git a/packages/vue-charts/README.md b/packages/vue-charts/README.md
index 48db00ea..94067423 100644
--- a/packages/vue-charts/README.md
+++ b/packages/vue-charts/README.md
@@ -1,3 +1,21 @@
+<div align="center">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Vue%20Charts&theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/charts.png?title=TanStack%20Vue%20Charts"
+    />
+    <img
+      src="https://tanstack.com/api/readme/charts.png?title=TanStack%20Vue%20Charts"
+      alt="TanStack Vue Charts"
+      width="900"
+    />
+  </picture>
+</div>
+
 # `@tanstack/vue-charts`
 
 This compatibility package remains supported for existing applications. New