[ENHANCEMENT] Add Dark/Light Theme Toggle to Help Center and Terms & Service Pages

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>

public/finance-tips.css

@@ -495,3 +495,58 @@ html{
     transform: translate(-50%, -50%) scale(1.3);
     background: linear-gradient(135deg, #00b4d8 0%, #64ffda 100%) !important;
   }
+/* Dark mode without changing existing colors */
+
+body.dark-mode{
+  filter: invert(1) hue-rotate(180deg);
+}
+
+/* Fix images & icons */
+body.dark-mode img,
+body.dark-mode video,
+body.dark-mode iframe{
+  filter: invert(1) hue-rotate(180deg);
+}/* ======================
+   THEME VARIABLES
+====================== */
+
+:root{
+  --bg-color:#ffffff;
+  --card-bg:#f8fafc;
+  --text-color:#1e293b;
+  --accent:#22c55e;
+}
+
+[data-theme="dark"]{
+  --bg-color:#0f172a;
+  --card-bg:#1e293b;
+  --text-color:#f1f5f9;
+  --accent:#4ade80;
+}
+
+/* Apply theme */
+
+body{
+  background:var(--bg-color);
+  color:var(--text-color);
+  transition:0.3s;
+}
+
+.balance-card{
+  background:var(--card-bg);
+}
+
+.hero-section{
+  background:linear-gradient(135deg,var(--accent),#15803d);
+}
+
+/* Toggle button */
+
+.theme-toggle{
+  border:none;
+  background:transparent;
+  font-size:18px;
+  cursor:pointer;
+  color:var(--text-color);
+  margin-left:15px;
+}

public/finance-tips.html

@@ -29,19 +29,25 @@
 <!-- HEADER -->
 <header class="header">
   <nav class="navbar">
-    <div class="nav-container">
-      <div class="nav-logo">
-        <i class="fas fa-wallet"></i>
-        <span><a href="index.html" class="nav-link">ExpenseFlow</a></span>
-      </div>
+   <div class="nav-container">
+  <div class="nav-logo">
+    <i class="fas fa-wallet"></i>
+    <span><a href="index.html" class="nav-link">ExpenseFlow</a></span>
+  </div>
 
-      <div class="nav-menu">
-        <a href="index.html" class="nav-link">Dashboard</a>
-        <a href="analytics.html" class="nav-link">Analytics</a>
-        <a href="finance-tips.html" class="nav-link active">Finance Tips</a>
-        <a href="settings.html" class="nav-link">Settings</a>
-      </div>
-    </div>
+  <div class="nav-menu">
+    <a href="index.html" class="nav-link">Dashboard</a>
+    <a href="analytics.html" class="nav-link">Analytics</a>
+    <a href="finance-tips.html" class="nav-link active">Finance Tips</a>
+    <a href="settings.html" class="nav-link">Settings</a>
+  </div>
+
+  <!-- DARK MODE BUTTON -->
+  <button id="theme-toggle" class="theme-toggle">
+    <i class="fas fa-moon"></i>
+  </button>
+
+</div>
   </nav>
 </header>
 

public/finance-tips.js

@@ -150,3 +150,27 @@
   // Start animation
   animateTrail();
 })();
+const toggleBtn = document.getElementById("theme-toggle");
+
+// Load saved theme
+const savedTheme = localStorage.getItem("theme");
+
+if(savedTheme === "dark"){
+  document.documentElement.setAttribute("data-theme","dark");
+}
+
+// Toggle theme
+toggleBtn.addEventListener("click", () => {
+
+  const currentTheme =
+    document.documentElement.getAttribute("data-theme");
+
+  if(currentTheme === "dark"){
+    document.documentElement.removeAttribute("data-theme");
+    localStorage.setItem("theme","light");
+  }else{
+    document.documentElement.setAttribute("data-theme","dark");
+    localStorage.setItem("theme","dark");
+  }
+
+});