Merge pull request #1211 from ANKeshri/feat/dark-mode-in-guide-page

feat: add dark mode feature in guide page

payment.css

@@ -362,4 +362,73 @@ header {
 
 .hr:hover{
   color: whitesmoke;
+}
+/* Light mode styles (default) */
+body {
+  background-color: #f8f9fa;
+  color: #212529;
+}
+
+.nav-container {
+  background-color: #ffffff;
+}
+
+.footer {
+  background-color: #ffffff;
+  color: #212529;
+}
+
+/* Dark mode styles */
+body.dark-mode {
+  background-color: #002152;
+  color: #ffffff;
+}
+
+body.dark-mode .nav-container {
+  background-color: #343a40;
+}
+
+body.dark-mode .footer {
+  background-color: #343a40;
+  color: #ffffff;
+}
+
+/* Toggle button styles */
+.toggle-container {
+  position: fixed; /* Change this as needed for positioning */
+  top: 10px;
+  right: 10px;
+}
+
+.toggle {
+  width: 50px; /* Adjust size as needed */
+  height: 25px; /* Adjust size as needed */
+  appearance: none;
+  background-color: #ccc;
+  cursor: pointer;
+  border-radius: 25px;
+  position: relative;
+  outline: none;
+}
+
+.toggle:checked {
+  background-color: #333;
+}
+.toggle:checked:before {
+  transform: translateX(25px);
+}
+
+.text-center h2{
+  background: linear-gradient(120deg, #1c99fe 20.69%, #7644ff 50.19%, #fd4766 79.69%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: inline-block;
+  font-weight: 600;
+}
+body.dark-mode #inst{
+  background: black;
+}
+.newNav #btn-style{
+  background-color: var(--btn-border) !important;
+  border: 2px solid var(--btn-border) !important;
 }

payment.html

@@ -25,6 +25,9 @@
         <div class="line"></div>
         <div class="line"></div>
       </div>
+      <div class="toggle-container aos-init aos-animate" data-aos="fade-down">
+        <input id="themeToggle" class="toggle" type="checkbox">
+      </div>
     </nav>
   </div>
 
@@ -39,7 +42,7 @@ <h2 style="text-decoration: underline ;" >Guide</h2>
 
       <div class="py-4 text-left">
 
-        <div style="border:2px solid #a1a1a1; padding: 2rem;">
+        <div id="inst" style="border:2px solid #a1a1a1; padding: 2rem;border-radius: 12px;">
           <p >Before you proceed to checkout, here are some instructions : </p>
           <ul class="connected list no2">
             <li>Fill in the required fields with your personal details (name, email, username etc.)</li>

payment.js

@@ -218,4 +218,29 @@ document.addEventListener("DOMContentLoaded", function () {
 
     updateShippingCost();
   });
+//   adding dark mode feature
+  // payment.js or add in a <script> tag at the end of the body
+document.addEventListener('DOMContentLoaded', () => {
+    const toggleCheckbox = document.getElementById('themeToggle');
+    const body = document.body;
+
+    // Load saved dark mode preference from localStorage
+    if (localStorage.getItem('dark-mode') === 'enabled') {
+      body.classList.add('dark-mode');
+      toggleCheckbox.checked = true;
+    } else {
+      toggleCheckbox.checked = false;
+    }
+
+    toggleCheckbox.addEventListener('change', () => {
+      if (toggleCheckbox.checked) {
+        body.classList.add('dark-mode');
+        localStorage.setItem('dark-mode', 'enabled');
+      } else {
+        body.classList.remove('dark-mode');
+        localStorage.setItem('dark-mode', 'disabled');
+      }
+    });
+  });
+