diff --git a/.changeset/empty-beds-heal.md b/.changeset/empty-beds-heal.md
new file mode 100644
index 00000000000..150f8297784
--- /dev/null
+++ b/.changeset/empty-beds-heal.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': minor
+---
+
+Make light and dark image variants
diff --git a/docs/src/content/docs/guides/authoring-content.mdx b/docs/src/content/docs/guides/authoring-content.mdx
index 15334b24bb3..b1eb2779d79 100644
--- a/docs/src/content/docs/guides/authoring-content.mdx
+++ b/docs/src/content/docs/guides/authoring-content.mdx
@@ -63,6 +63,18 @@ Relative image paths are also supported for images stored locally in your projec
 ![A rocketship in space](../../assets/images/rocket.svg)
 ```
 
+### Light and dark variants
+
+If you want to show different images for light and dark color schemes, you can append a `#only-light` or `#only-dark` hash fragment to the image URL:
+
+```md
+![Image for the light theme](../../assets/light-logo.svg#only-light)
+![Image for the dark theme](../../assets/dark-logo.svg#only-dark)
+```
+
+![Image for the light theme](https://github.com/user-attachments/assets/5ff75483-d761-4dbd-b3a0-c7823b137ec5#only-light)
+![Image for the dark theme](https://github.com/user-attachments/assets/ab396486-d6a3-41ac-85ff-a961f319fbca#only-dark)
+
 ## Headings
 
 You can structure content using a heading. Headings in Markdown are indicated by a number of `#` at the start of the line.
diff --git a/packages/starlight/style/util.css b/packages/starlight/style/util.css
index 74868532205..33f5624f091 100644
--- a/packages/starlight/style/util.css
+++ b/packages/starlight/style/util.css
@@ -47,6 +47,12 @@
 [data-theme='dark'] .dark\:sl-hidden {
 	display: none;
 }
+[data-theme='light'] img[src$="#only-dark"] {
+	display: none;
+}
+[data-theme='dark'] img[src$="#only-light"] {
+	display: none;
+}
 
 /*
 Flip an element around the y-axis when in an RTL context.