diff --git a/templates/embed.js b/templates/embed.js
index 25e2de6..4e488a4 100644
--- a/templates/embed.js
+++ b/templates/embed.js
@@ -39,5 +39,11 @@
                 iframe.contentWindow.postMessage({showGradient: true}, '*');
             }
         }
+
+        const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        if (darkModeQuery.matches) {
+            // Dark mode is preferred
+            iframe.contentWindow.postMessage({setDarkMode: true}, '*');
+        }
     });
 })();
diff --git a/templates/embedded_note.html b/templates/embedded_note.html
index 2aa9403..21ba748 100644
--- a/templates/embedded_note.html
+++ b/templates/embedded_note.html
@@ -102,12 +102,15 @@
           var gradient = document.getElementById('bottom-gradient')
           gradient.classList.remove('hidden')
         }
+        if (event.data.setDarkMode) {
+          document.querySelector('html').classList.add('theme--dark')
+        }
       })
     </script>
 
     <div
       id="bottom-gradient"
-      class="pointer-events-none sticky bottom-0 left-0 hidden h-20 w-full bg-gradient-to-b from-transparent to-white"
+      class="pointer-events-none sticky bottom-0 left-0 hidden h-20 w-full bg-gradient-to-b from-transparent to-white dark:to-neutral-900"
     ></div>
 
     <img