diff --git a/resources/index.html b/resources/index.html
index b4e4ca1d..07f3e735 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -151,6 +151,11 @@ <h5 class="modal-title">Terms of Service</h5>
         if (processor === 'zebedee') {
           document.getElementById('powered-by-zebedee').classList.remove('d-none')
         }
+
+        // Check for system preference on load
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          document.body.classList.add('dark-theme');
+        }
       }
     </script>
   </body>
diff --git a/resources/invoices.html b/resources/invoices.html
index 83efab47..94dc1f3e 100644
--- a/resources/invoices.html
+++ b/resources/invoices.html
@@ -98,6 +98,11 @@ <h2 class="text-danger">Invoice expired!</h2>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script>
+      // Check for system preference on load
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.body.classList.add('dark-theme');
+      }
+
       var reference = "{{reference}}"
       var relayUrl = "{{relay_url}}"
       var relayPubkey = "{{relay_pubkey}}"
diff --git a/resources/terms.html b/resources/terms.html
index 587ba552..6c694fbb 100644
--- a/resources/terms.html
+++ b/resources/terms.html
@@ -62,5 +62,11 @@ <h3>Terms of Service Agreement</h3>
       </div>
     </main>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
+    <script>
+      // Check for system preference on load
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.body.classList.add('dark-theme');
+      }
+    </script>
   </body>
 </html>