added dark light toggle on help cneter page

Author: Eshajha19

public/Help-Center.html

@@ -50,7 +50,100 @@
     #scrollTopBtn:hover {
       transform: translateY(-5px) scale(1.1);
       box-shadow: 0 12px 30px rgba(0,0,0,0.3);
-    }
+    }/* =========================
+   DARK MODE SYSTEM
+========================= */
+
+/* Toggle button */
+.theme-toggle{
+  border:none;
+  background:transparent;
+  font-size:18px;
+  cursor:pointer;
+  margin-left:10px;
+  color:inherit;
+}
+
+/* Smooth transition */
+body{
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+/* Dark mode base */
+body.dark-mode{
+  background:#0f172a;
+  color:#e2e8f0;
+}
+
+/* Navbar */
+body.dark-mode .header{
+  background:#020617;
+}
+
+/* Navigation links */
+body.dark-mode .nav-link{
+  color:#e2e8f0;
+}
+
+/* Cards */
+body.dark-mode .balance-card{
+  background:#1e293b;
+  border:1px solid #334155;
+  color:#e2e8f0;
+}
+
+/* Info section */
+body.dark-mode .data-management-section{
+  background:#1e293b;
+  border:1px solid #334155;
+}
+
+/* Footer */
+body.dark-mode .footer{
+  background:#020617;
+  color:#e2e8f0;
+}
+
+/* Footer links */
+body.dark-mode .footer-links a{
+  color:#e2e8f0;
+}
+
+body.dark-mode .footer-links a:hover{
+  color:#3b82f6;
+}
+
+/* Scroll button */
+body.dark-mode #scrollTopBtn{
+  background:linear-gradient(135deg,#1d4ed8,#2563eb);
+}/* Default Light Mode */
+body{
+    background:#f8fafc;
+    color:#1e293b;
+}
+
+/* Dark Mode */
+body.dark-mode{
+    background:#0f172a;
+    color:#e2e8f0;
+}
+
+/* Navbar */
+body.dark-mode .header{
+    background:#020617;
+}
+
+/* Cards */
+body.dark-mode .balance-card{
+    background:#1e293b;
+    color:#e2e8f0;
+}
+
+/* Footer */
+body.dark-mode .footer{
+    background:#020617;
+    color:#e2e8f0;
+}
   </style>
 </head>
 
@@ -73,7 +166,9 @@
         <a href="finance-tips.html" class="nav-link">Finance Tips</a>
         <a href="Help-Center.html" class="nav-link active">Help Center</a>
         <a href="#" class="nav-link">Settings</a>
-
+       <button id="themeToggle" class="theme-toggle">
+  <i class="fas fa-moon"></i>
+</button>
         <div class="lang-wrapper">
           <i class="fas fa-language"></i>
           <select id="languageSelect">
@@ -279,7 +374,33 @@ <h4>Resources</h4>
   animateCursor();
 }
 </script>
+<script>
 
+/* =============================
+   DARK / LIGHT MODE
+============================= */
+
+const toggleBtn = document.getElementById("themeToggle");
+
+/* Load saved theme */
+if(localStorage.getItem("theme") === "dark"){
+  document.body.classList.add("dark-mode");
+}
+
+/* Toggle */
+toggleBtn.addEventListener("click", () => {
+
+  document.body.classList.toggle("dark-mode");
+
+  if(document.body.classList.contains("dark-mode")){
+      localStorage.setItem("theme","dark");
+  }else{
+      localStorage.setItem("theme","light");
+  }
+
+});
+
+</script>
 <script src="helpcenter.js"></script>
 
 </body>