From 3d1e5733cc8064f6526ca100aded2f08309b0de5 Mon Sep 17 00:00:00 2001
From: TL <37297314+rowenslee@users.noreply.github.com>
Date: Mon, 21 Oct 2024 07:16:26 +0700
Subject: [PATCH] feat: add dark theme support for static html files (#373)

* Add dark theme styling

* Add auto detect preferred  color scheme
---
 resources/css/style.css | 25 +++++++++++++++++++++++++
 resources/index.html    |  5 +++++
 resources/invoices.html |  5 +++++
 resources/terms.html    |  6 ++++++
 4 files changed, 41 insertions(+)

diff --git a/resources/css/style.css b/resources/css/style.css
index 1ec11f2d..5acc3138 100644
--- 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;
+  }
 }
\ No newline at end of file
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>