diff --git a/docs/assets/screenshots/en/dark/iphone-home.png b/docs/assets/screenshots/en/dark/iphone-home.png
new file mode 100644
index 0000000..b55f1df
Binary files /dev/null and b/docs/assets/screenshots/en/dark/iphone-home.png differ
diff --git a/docs/assets/screenshots/en/dark/iphone-keyboard_idle.png b/docs/assets/screenshots/en/dark/iphone-keyboard_idle.png
new file mode 100644
index 0000000..a2061e3
Binary files /dev/null and b/docs/assets/screenshots/en/dark/iphone-keyboard_idle.png differ
diff --git a/docs/assets/screenshots/en/dark/iphone-keyboard_recording.png b/docs/assets/screenshots/en/dark/iphone-keyboard_recording.png
new file mode 100644
index 0000000..db24da8
Binary files /dev/null and b/docs/assets/screenshots/en/dark/iphone-keyboard_recording.png differ
diff --git a/docs/assets/screenshots/en/dark/mac-dashboard.png b/docs/assets/screenshots/en/dark/mac-dashboard.png
new file mode 100644
index 0000000..3a60be4
Binary files /dev/null and b/docs/assets/screenshots/en/dark/mac-dashboard.png differ
diff --git a/docs/assets/screenshots/en/dark/mac-dictionary.png b/docs/assets/screenshots/en/dark/mac-dictionary.png
new file mode 100644
index 0000000..5ecde3f
Binary files /dev/null and b/docs/assets/screenshots/en/dark/mac-dictionary.png differ
diff --git a/docs/assets/screenshots/en/dark/mac-history.png b/docs/assets/screenshots/en/dark/mac-history.png
new file mode 100644
index 0000000..d8bb7a2
Binary files /dev/null and b/docs/assets/screenshots/en/dark/mac-history.png differ
diff --git a/docs/assets/screenshots/en/dark/mac-recording.png b/docs/assets/screenshots/en/dark/mac-recording.png
new file mode 100644
index 0000000..526cff3
Binary files /dev/null and b/docs/assets/screenshots/en/dark/mac-recording.png differ
diff --git a/docs/assets/screenshots/en/dark/mac-settings.png b/docs/assets/screenshots/en/dark/mac-settings.png
new file mode 100644
index 0000000..070cccc
Binary files /dev/null and b/docs/assets/screenshots/en/dark/mac-settings.png differ
diff --git a/docs/assets/screenshots/en/light/iphone-home.png b/docs/assets/screenshots/en/light/iphone-home.png
new file mode 100644
index 0000000..290c7a5
Binary files /dev/null and b/docs/assets/screenshots/en/light/iphone-home.png differ
diff --git a/docs/assets/screenshots/en/light/iphone-keyboard_idle.png b/docs/assets/screenshots/en/light/iphone-keyboard_idle.png
new file mode 100644
index 0000000..888741e
Binary files /dev/null and b/docs/assets/screenshots/en/light/iphone-keyboard_idle.png differ
diff --git a/docs/assets/screenshots/en/light/iphone-keyboard_recording.png b/docs/assets/screenshots/en/light/iphone-keyboard_recording.png
new file mode 100644
index 0000000..84b198d
Binary files /dev/null and b/docs/assets/screenshots/en/light/iphone-keyboard_recording.png differ
diff --git a/docs/assets/screenshots/en/light/mac-dashboard.png b/docs/assets/screenshots/en/light/mac-dashboard.png
new file mode 100644
index 0000000..66377ca
Binary files /dev/null and b/docs/assets/screenshots/en/light/mac-dashboard.png differ
diff --git a/docs/assets/screenshots/en/light/mac-dictionary.png b/docs/assets/screenshots/en/light/mac-dictionary.png
new file mode 100644
index 0000000..fffd7f7
Binary files /dev/null and b/docs/assets/screenshots/en/light/mac-dictionary.png differ
diff --git a/docs/assets/screenshots/en/light/mac-history.png b/docs/assets/screenshots/en/light/mac-history.png
new file mode 100644
index 0000000..76503bb
Binary files /dev/null and b/docs/assets/screenshots/en/light/mac-history.png differ
diff --git a/docs/assets/screenshots/en/light/mac-recording.png b/docs/assets/screenshots/en/light/mac-recording.png
new file mode 100644
index 0000000..add1219
Binary files /dev/null and b/docs/assets/screenshots/en/light/mac-recording.png differ
diff --git a/docs/assets/screenshots/en/light/mac-settings.png b/docs/assets/screenshots/en/light/mac-settings.png
new file mode 100644
index 0000000..48b940e
Binary files /dev/null and b/docs/assets/screenshots/en/light/mac-settings.png differ
diff --git a/docs/assets/screenshots/ipad-home.png b/docs/assets/screenshots/ipad-home.png
deleted file mode 100644
index ca2200c..0000000
Binary files a/docs/assets/screenshots/ipad-home.png and /dev/null differ
diff --git a/docs/assets/screenshots/iphone-dictionary.png b/docs/assets/screenshots/iphone-dictionary.png
deleted file mode 100644
index 8267900..0000000
Binary files a/docs/assets/screenshots/iphone-dictionary.png and /dev/null differ
diff --git a/docs/assets/screenshots/iphone-home.png b/docs/assets/screenshots/iphone-home.png
deleted file mode 100644
index 431dee6..0000000
Binary files a/docs/assets/screenshots/iphone-home.png and /dev/null differ
diff --git a/docs/assets/screenshots/mac-dashboard.png b/docs/assets/screenshots/mac-dashboard.png
deleted file mode 100644
index 19dd69e..0000000
Binary files a/docs/assets/screenshots/mac-dashboard.png and /dev/null differ
diff --git a/docs/assets/screenshots/mac-dictionary.png b/docs/assets/screenshots/mac-dictionary.png
deleted file mode 100644
index 28fec08..0000000
Binary files a/docs/assets/screenshots/mac-dictionary.png and /dev/null differ
diff --git a/docs/assets/screenshots/mac-history.png b/docs/assets/screenshots/mac-history.png
deleted file mode 100644
index fb46992..0000000
Binary files a/docs/assets/screenshots/mac-history.png and /dev/null differ
diff --git a/docs/assets/screenshots/mac-recording.png b/docs/assets/screenshots/mac-recording.png
deleted file mode 100644
index 138a938..0000000
Binary files a/docs/assets/screenshots/mac-recording.png and /dev/null differ
diff --git a/docs/assets/screenshots/mac-settings.png b/docs/assets/screenshots/mac-settings.png
deleted file mode 100644
index fb6ffab..0000000
Binary files a/docs/assets/screenshots/mac-settings.png and /dev/null differ
diff --git a/docs/assets/screenshots/zh/dark/iphone-home.png b/docs/assets/screenshots/zh/dark/iphone-home.png
new file mode 100644
index 0000000..4fee0e1
Binary files /dev/null and b/docs/assets/screenshots/zh/dark/iphone-home.png differ
diff --git a/docs/assets/screenshots/zh/dark/iphone-keyboard_idle.png b/docs/assets/screenshots/zh/dark/iphone-keyboard_idle.png
new file mode 100644
index 0000000..49cefcb
Binary files /dev/null and b/docs/assets/screenshots/zh/dark/iphone-keyboard_idle.png differ
diff --git a/docs/assets/screenshots/zh/dark/iphone-keyboard_recording.png b/docs/assets/screenshots/zh/dark/iphone-keyboard_recording.png
new file mode 100644
index 0000000..2cccfbb
Binary files /dev/null and b/docs/assets/screenshots/zh/dark/iphone-keyboard_recording.png differ
diff --git a/docs/assets/screenshots/zh/dark/mac-dashboard.png b/docs/assets/screenshots/zh/dark/mac-dashboard.png
new file mode 100644
index 0000000..a47a98a
Binary files /dev/null and b/docs/assets/screenshots/zh/dark/mac-dashboard.png differ
diff --git a/docs/assets/screenshots/zh/dark/mac-dictionary.png b/docs/assets/screenshots/zh/dark/mac-dictionary.png
new file mode 100644
index 0000000..3341ab1
Binary files /dev/null and b/docs/assets/screenshots/zh/dark/mac-dictionary.png differ
diff --git a/docs/assets/screenshots/zh/dark/mac-history.png b/docs/assets/screenshots/zh/dark/mac-history.png
new file mode 100644
index 0000000..c1f6b18
Binary files /dev/null and b/docs/assets/screenshots/zh/dark/mac-history.png differ
diff --git a/docs/assets/screenshots/zh/dark/mac-recording.png b/docs/assets/screenshots/zh/dark/mac-recording.png
new file mode 100644
index 0000000..f3890b5
Binary files /dev/null and b/docs/assets/screenshots/zh/dark/mac-recording.png differ
diff --git a/docs/assets/screenshots/zh/dark/mac-settings.png b/docs/assets/screenshots/zh/dark/mac-settings.png
new file mode 100644
index 0000000..02b7436
Binary files /dev/null and b/docs/assets/screenshots/zh/dark/mac-settings.png differ
diff --git a/docs/assets/screenshots/zh/light/iphone-home.png b/docs/assets/screenshots/zh/light/iphone-home.png
new file mode 100644
index 0000000..5022465
Binary files /dev/null and b/docs/assets/screenshots/zh/light/iphone-home.png differ
diff --git a/docs/assets/screenshots/iphone-keyboard_idle.png b/docs/assets/screenshots/zh/light/iphone-keyboard_idle.png
similarity index 100%
rename from docs/assets/screenshots/iphone-keyboard_idle.png
rename to docs/assets/screenshots/zh/light/iphone-keyboard_idle.png
diff --git a/docs/assets/screenshots/iphone-keyboard_recording.png b/docs/assets/screenshots/zh/light/iphone-keyboard_recording.png
similarity index 100%
rename from docs/assets/screenshots/iphone-keyboard_recording.png
rename to docs/assets/screenshots/zh/light/iphone-keyboard_recording.png
diff --git a/docs/assets/screenshots/zh/light/mac-dashboard.png b/docs/assets/screenshots/zh/light/mac-dashboard.png
new file mode 100644
index 0000000..f5a0e35
Binary files /dev/null and b/docs/assets/screenshots/zh/light/mac-dashboard.png differ
diff --git a/docs/assets/screenshots/zh/light/mac-dictionary.png b/docs/assets/screenshots/zh/light/mac-dictionary.png
new file mode 100644
index 0000000..c775d6f
Binary files /dev/null and b/docs/assets/screenshots/zh/light/mac-dictionary.png differ
diff --git a/docs/assets/screenshots/zh/light/mac-history.png b/docs/assets/screenshots/zh/light/mac-history.png
new file mode 100644
index 0000000..18febbf
Binary files /dev/null and b/docs/assets/screenshots/zh/light/mac-history.png differ
diff --git a/docs/assets/screenshots/zh/light/mac-recording.png b/docs/assets/screenshots/zh/light/mac-recording.png
new file mode 100644
index 0000000..7cb805c
Binary files /dev/null and b/docs/assets/screenshots/zh/light/mac-recording.png differ
diff --git a/docs/assets/screenshots/zh/light/mac-settings.png b/docs/assets/screenshots/zh/light/mac-settings.png
new file mode 100644
index 0000000..0755d03
Binary files /dev/null and b/docs/assets/screenshots/zh/light/mac-settings.png differ
diff --git a/docs/index.html b/docs/index.html
index a184ee4..d6d95ff 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -15,7 +15,7 @@
   <meta property="og:title" content="OSGKeyboard — 开口即文字">
   <meta property="og:description" content="免费 · 跨端 · 开源 · 隐私优先 · BYOK。语音留在本机，AI 用你自己的 Key。">
   <meta property="og:url" content="https://hkgood.github.io/OSGKeyboard/">
-  <meta property="og:image" content="https://hkgood.github.io/OSGKeyboard/assets/screenshots/mac-dashboard.png">
+  <meta property="og:image" content="https://hkgood.github.io/OSGKeyboard/assets/screenshots/zh/dark/mac-dashboard.png">
   <meta name="twitter:card" content="summary_large_image">
   <script type="application/ld+json">
   {
@@ -728,7 +728,7 @@
           <div class="sonic-ring" aria-hidden="true"></div>
           <div class="sonic-ring" aria-hidden="true"></div>
           <div class="hero-stage-frame">
-              <img src="assets/screenshots/mac-dashboard.png" width="1440" height="900" alt="OSGKeyboard Mac dashboard" loading="eager">
+              <img data-shot="mac-dashboard" src="assets/screenshots/zh/dark/mac-dashboard.png" width="1440" height="900" alt="OSGKeyboard Mac dashboard" loading="eager">
           </div>
         </div>
       </div>
@@ -790,7 +790,7 @@
           </div>
           <div class="story-media">
             <figure class="shot">
-              <img src="assets/screenshots/mac-recording.png" width="1440" height="900" alt="Mac dictation recording" loading="lazy">
+              <img data-shot="mac-recording" src="assets/screenshots/zh/dark/mac-recording.png" width="1440" height="900" alt="Mac dictation recording" loading="lazy">
             </figure>
           </div>
         </div>
@@ -806,7 +806,7 @@
           </div>
           <div class="story-media">
             <figure class="shot shot--phone">
-              <img src="assets/screenshots/iphone-keyboard_recording.png" width="552" height="1200" alt="iPhone keyboard recording" loading="lazy">
+              <img data-shot="iphone-keyboard_recording" src="assets/screenshots/zh/light/iphone-keyboard_recording.png" width="552" height="1200" alt="iPhone keyboard recording" loading="lazy">
             </figure>
           </div>
         </div>
@@ -822,7 +822,7 @@
           </div>
           <div class="story-media">
             <figure class="shot">
-              <img src="assets/screenshots/mac-dictionary.png" width="1440" height="900" alt="Mac personal dictionary" loading="lazy">
+              <img data-shot="mac-dictionary" src="assets/screenshots/zh/dark/mac-dictionary.png" width="1440" height="900" alt="Mac personal dictionary" loading="lazy">
             </figure>
           </div>
         </div>
@@ -838,7 +838,7 @@
           </div>
           <div class="story-media">
             <figure class="shot">
-              <img src="assets/screenshots/mac-settings.png" width="1440" height="900" alt="Mac settings local ASR" loading="lazy">
+              <img data-shot="mac-settings" src="assets/screenshots/zh/dark/mac-settings.png" width="1440" height="900" alt="Mac settings local ASR" loading="lazy">
             </figure>
           </div>
         </div>
@@ -855,19 +855,19 @@
         <div class="device-strip reveal">
           <div class="device-item mac">
             <figure class="device-card mac">
-              <img src="assets/screenshots/mac-history.png" width="1440" height="900" alt="Mac history" loading="lazy">
+              <img data-shot="mac-history" src="assets/screenshots/zh/dark/mac-history.png" width="1440" height="900" alt="Mac history" loading="lazy">
             </figure>
             <div class="device-caption" data-i18n="gallery.cap.mac">Mac · 听写历史</div>
           </div>
           <div class="device-item">
             <figure class="device-card phone">
-              <img src="assets/screenshots/iphone-home.png" width="552" height="1200" alt="iPhone home" loading="lazy">
+              <img data-shot="iphone-home" src="assets/screenshots/zh/light/iphone-home.png" width="552" height="1200" alt="iPhone home" loading="lazy">
             </figure>
             <div class="device-caption" data-i18n="gallery.cap.home">iPhone · 首页统计</div>
           </div>
           <div class="device-item">
             <figure class="device-card phone">
-              <img src="assets/screenshots/iphone-keyboard_idle.png" width="552" height="1200" alt="iPhone keyboard idle" loading="lazy">
+              <img data-shot="iphone-keyboard_idle" src="assets/screenshots/zh/light/iphone-keyboard_idle.png" width="552" height="1200" alt="iPhone keyboard idle" loading="lazy">
             </figure>
             <div class="device-caption" data-i18n="gallery.cap.kb">iPhone · 键盘待机</div>
           </div>
@@ -1123,6 +1123,32 @@
         btn.classList.toggle("active", btn.dataset.lang === lang);
       });
       try { localStorage.setItem("osg-lang", lang); } catch (_) {}
+      applyShots(lang);
+    }
+
+    function resolvedTheme() {
+      const theme = document.documentElement.getAttribute("data-theme") || "system";
+      if (theme === "light" || theme === "dark") return theme;
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+
+    function shotURL(name, langOverride) {
+      let lang = langOverride;
+      if (!lang) {
+        try { lang = localStorage.getItem("osg-lang"); } catch (_) {}
+      }
+      if (!lang) lang = document.documentElement.lang.startsWith("zh") ? "zh" : "en";
+      const theme = resolvedTheme();
+      return `assets/screenshots/${lang}/${theme}/${name}.png`;
+    }
+
+    function applyShots(langOverride) {
+      document.querySelectorAll("img[data-shot]").forEach((img) => {
+        const name = img.getAttribute("data-shot");
+        if (!name) return;
+        const next = shotURL(name, langOverride);
+        if (img.getAttribute("src") !== next) img.setAttribute("src", next);
+      });
     }
 
     function applyTheme(theme) {
@@ -1132,6 +1158,7 @@
         icon.textContent = theme === "dark" ? "light_mode" : theme === "light" ? "dark_mode" : "contrast";
       }
       try { localStorage.setItem("osg-theme", theme); } catch (_) {}
+      applyShots();
     }
 
     function cycleTheme() {
@@ -1150,6 +1177,14 @@
     applyLang(savedLang || ((navigator.language || "").startsWith("zh") ? "zh" : "en"));
     applyTheme(savedTheme || "system");
 
+    try {
+      window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+        if ((document.documentElement.getAttribute("data-theme") || "system") === "system") {
+          applyShots();
+        }
+      });
+    } catch (_) {}
+
     // Scroll reveal
     const reveals = document.querySelectorAll(".reveal");
     if ("IntersectionObserver" in window) {