diff --git a/README.md b/README.md
index 97e97e1..581c59f 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
-<img src="docs/images/preview-fg_macOS@2x.png"
+<img src="docs/images/preview-fg_macOS_dark@2x.png"
      alt="Preview of cast device selection popup"
      align="right"
-     width="396">
+     width="462">
 
 # fx_cast
 
diff --git a/docs/images/preview-fg_macOS_dark.png b/docs/images/preview-fg_macOS_dark.png
new file mode 100644
index 0000000..de5f85b
Binary files /dev/null and b/docs/images/preview-fg_macOS_dark.png differ
diff --git a/docs/images/preview-fg_macOS_dark@2x.png b/docs/images/preview-fg_macOS_dark@2x.png
new file mode 100644
index 0000000..6cd8512
Binary files /dev/null and b/docs/images/preview-fg_macOS_dark@2x.png differ
diff --git a/docs/images/preview-fg_macOS_light.png b/docs/images/preview-fg_macOS_light.png
new file mode 100644
index 0000000..df1c4eb
Binary files /dev/null and b/docs/images/preview-fg_macOS_light.png differ
diff --git a/docs/images/preview-fg_macOS_light@2x.png b/docs/images/preview-fg_macOS_light@2x.png
new file mode 100644
index 0000000..006a433
Binary files /dev/null and b/docs/images/preview-fg_macOS_light@2x.png differ
diff --git a/docs/index.css b/docs/index.css
index 0fc1097..ee55c95 100755
--- a/docs/index.css
+++ b/docs/index.css
@@ -241,11 +241,11 @@ body {
     margin-top: 1rem;
 }
 
-.preview--fg[src="images/preview-fg.png"] {
-    transform: translate(-56px, -28px);
-}
-.preview--fg[src="images/preview-fg_macOS.png"] {
-    transform: translate(-22px, -18px);
+.preview--fg[src="images/preview-fg_macOS_dark.png"],
+.preview--fg[src="images/preview-fg_macOS_dark@2x.png"],
+.preview--fg[src="images/preview-fg_macOS_light.png"],
+.preview--fg[src="images/preview-fg_macOS_light@2x.png"] {
+    transform: translate(-55px, -36px);
 }
 
 
diff --git a/docs/index.html b/docs/index.html
index 6e4857d..dad438f 100755
--- a/docs/index.html
+++ b/docs/index.html
@@ -263,12 +263,19 @@
                  src="images/preview-bg.png"
                  srcset="images/preview-bg.png,
                          images/preview-bg@2x.png 2x">
-            <img class="preview preview--fg"
-                 alt="Screenshot preview, foreground"
-                 width="396"
-                 src="images/preview-fg_macOS.png"
-                 srcset="images/preview-fg_macOS.png,
-                         images/preview-fg_macOS@2x.png 2x">
+
+            <picture style="display: contents">
+                <source alt="Media context menu"
+                        srcset="images/preview-fg_macOS_light.png,
+                                images/preview-fg_macOS_light@2x.png 2x"
+                        media="(prefers-color-scheme: light)">
+                <img class="preview preview--fg"
+                     alt="Media context menu"
+                     width="462"
+                     src="images/preview-fg_macOS_dark.png"
+                     srcset="images/preview-fg_macOS_dark.png,
+                             images/preview-fg_macOS_dark@2x.png 2x">
+            </picture>
 
             <footer class="footer">
                 <div class="links">