Add auto detect preferred color scheme

cameri · Oct 14, 2024 · a31a3bd · a31a3bd
1 parent 635ef80
commit a31a3bd
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git 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
@@ -98,6 +98,11 @@ <h2 class="text-danger">Invoice expired!</h2>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/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
@@ -62,5 +62,11 @@ <h3>Terms of Service Agreement</h3>
       </div>
     </main>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>