feat: add dark theme support for static html files (#373)

* Add dark theme styling

* Add auto detect preferred  color scheme

Author: rowenslee

resources/css/style.css

@@ -175,4 +175,29 @@
     right: 8px;
     top: 38px;
   }
+}
+
+/* Dark Theme Styles */
+@media (prefers-color-scheme: dark) {
+  body.dark-theme {
+    background-color: #2a2a2a; /* Softer gray background */
+    color: #e0e0e0;
+  }  
+  body.dark-theme h1 {
+    color: #e0e0e0;
+  }
+  body.dark-theme p {
+    color: #b0b0b0;
+  }  
+  body.dark-theme .btn-primary {
+    background-color: #3a3a3a;
+    border-color: #545454;
+  }  
+  body.dark-theme .btn-primary:hover {
+    background-color: #545454;
+  }  
+  body.dark-theme .card {
+    background-color: #3a3a3a;
+    border-color: #545454;
+  }
 }

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>

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}}"

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>