diff --git a/docs/index.css b/docs/index.css
index 65097de..8410ac6 100755
--- a/docs/index.css
+++ b/docs/index.css
@@ -128,10 +128,10 @@ body {
 
 .download__ext[data-version]::after,
 .download__app[data-version]::after {
-    color: var(--text-color-secondary);
     content: attr(data-version);
     font-size: 0.75em;
     margin-left: 0.5rem;
+    opacity: 0.75;
 }
 
 .download__app-other {
@@ -248,11 +248,6 @@ body {
     transform: translate(-22px, -18px);
 }
 
-:root.theme-light .preview-dark,
-:root.theme-dark .preview--light {
-    display: none;
-}
-
 
 .faqs {
     grid-area: faqs;
@@ -281,6 +276,7 @@ body {
 }
 .faq__content {
     max-width: 70rem;
+    overflow-x: auto;
     padding: 2rem;
     padding-top: 1rem;
 }
diff --git a/docs/index.html b/docs/index.html
index f2b94b8..be838b4 100755
--- a/docs/index.html
+++ b/docs/index.html
@@ -260,13 +260,7 @@
                  src="images/preview-bg.png"
                  srcset="images/preview-bg.png,
                          images/preview-bg@2x.png 2x">
-            <img class="preview preview--fg preview--light"
-                 alt="Screenshot preview, foreground"
-                 width="462"
-                 src="images/preview-fg.png"
-                 srcset="images/preview-fg.png,
-                         images/preview-fg@2x.png 2x">
-            <img class="preview preview--fg preview--dark"
+            <img class="preview preview--fg"
                  alt="Screenshot preview, foreground"
                  width="396"
                  src="images/preview-fg_macOS.png"
diff --git a/docs/index.js b/docs/index.js
index 565960f..84d40e6 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -1,5 +1,21 @@
 "use strict";
 
+function updateThemeClass (mediaQuery) {
+    if (mediaQuery.matches) {
+        document.documentElement.classList.remove("theme-dark");
+        document.documentElement.classList.add("theme-light");
+    } else {
+        document.documentElement.classList.remove("theme-light");
+        document.documentElement.classList.add("theme-dark");
+    }
+}
+
+const prefersLightScheme = window.matchMedia("(prefers-color-scheme: light)");
+
+updateThemeClass(prefersLightScheme);
+prefersLightScheme.addListener(updateThemeClass);
+
+
 const downloadAppBtn = document.querySelector(".download__app");
 const downloadAppOther = document.querySelector(".download__app-other");
 const downloadAppOtherSummary = downloadAppOther.querySelector(":scope > summary");