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

* Add dark theme styling * Add auto detect preferred color scheme
cameri · Oct 21, 2024 · 3d1e573 · 3d1e573
1 parent b6133a1
commit 3d1e573
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 0 deletions.
diff --git a/resources/css/style.css b/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;
+  }
 }
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/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
@@ -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>