diff --git a/README.md b/README.md
index cfb1328495..7d2f718da7 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,9 @@
-[![Cybernetically enhanced web apps: Svelte](https://sveltejs.github.io/assets/banner.png)](https://svelte.dev)
+<a href="https://svelte.dev">
+	<picture>
+		<source media="(prefers-color-scheme: dark)" srcset="assets/banner_dark.png">
+		<img src="assets/banner.png" alt="Svelte - web development for the rest of us" />
+	</picture>
+</a>
 
 [![license](https://img.shields.io/npm/l/svelte.svg)](LICENSE.md) [![Chat](https://img.shields.io/discord/457912077277855764?label=chat&logo=discord)](https://svelte.dev/chat)
 
diff --git a/assets/banner.png b/assets/banner.png
new file mode 100644
index 0000000000..3428b278bf
Binary files /dev/null and b/assets/banner.png differ
diff --git a/assets/banner_dark.png b/assets/banner_dark.png
new file mode 100644
index 0000000000..1adba40d8e
Binary files /dev/null and b/assets/banner_dark.png differ
diff --git a/packages/svelte/README.md b/packages/svelte/README.md
index 23e35fd4a7..c37617da30 100644
--- a/packages/svelte/README.md
+++ b/packages/svelte/README.md
@@ -1,4 +1,9 @@
-[![Cybernetically enhanced web apps: Svelte](https://sveltejs.github.io/assets/banner.png)](https://svelte.dev)
+<a href="https://svelte.dev">
+	<picture>
+		<source media="(prefers-color-scheme: dark)" srcset="../../assets/banner_dark.png">
+		<img src="../../assets/banner.png" alt="Svelte - web development for the rest of us" />
+	</picture>
+</a>
 
 [![npm version](https://img.shields.io/npm/v/svelte.svg)](https://www.npmjs.com/package/svelte) [![license](https://img.shields.io/npm/l/svelte.svg)](LICENSE.md) [![Chat](https://img.shields.io/discord/457912077277855764?label=chat&logo=discord)](https://svelte.dev/chat)