Fix: Light Mode Styling Not Applying on FAQ Page

public/AboutUs.html

@@ -50,6 +50,7 @@
           <a href="AboutUs.html" class="nav-link active">About Us</a>
           <a href="contact.html" class="nav-link">Contact</a>
           <a href="settings.html" class="nav-link">Settings</a>
+          <button id="themeToggle" class="theme-toggle">🌙</button>
         </div>
       </div>
     </nav>
@@ -232,6 +233,33 @@ <h4>Company</h4>
 <!-- Blue Cursor Trail -->
 <div class="circle-container" id="cursorTrail"></div>
 <script>
+
+const toggle = document.getElementById("themeToggle");
+
+// Toggle theme
+toggle.addEventListener("click", function(){
+
+document.body.classList.toggle("dark-mode");
+
+if(document.body.classList.contains("dark-mode")){
+localStorage.setItem("theme","dark");
+toggle.textContent="☀️";
+}
+else{
+localStorage.setItem("theme","light");
+toggle.textContent="🌙";
+}
+
+});
+
+// Load saved theme
+if(localStorage.getItem("theme") === "dark"){
+document.body.classList.add("dark-mode");
+toggle.textContent="☀️";
+}
+
+</script>
+<script>
 /* ============================= */
 /* 🔝 Scroll To Top Script */
 /* ============================= */

public/aboutus.css

@@ -3,6 +3,10 @@
    HELP CENTER – SAFE UI ENHANCEMENTS
    (NO PARENT LAYOUT CHANGES)
 ========================= */
+body.dark-mode .feedback-form button{
+  background:#2563eb;
+  color:white;
+}
 html{
   scroll-behavior: smooth;
 }
@@ -653,4 +657,181 @@ html{
     width: 45px;
     height: 45px;
   }
+}/* Toggle Button */
+.theme-toggle{
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: inherit;
+  margin-left: 15px;
+}
+
+/* Dark Mode Base */
+body.dark-mode{
+  background:#0f172a;
+  color:#e5e7eb;
+}
+
+/* Cards */
+body.dark-mode .balance-card{
+  background:#1e293b;
+  color:#e5e7eb;
+}
+
+/* Navbar */
+body.dark-mode .navbar{
+  background:#020617;
+}
+
+/* Footer */
+body.dark-mode .footer{
+  background:#020617;
+}
+
+/* Links */
+body.dark-mode a{
+  color:#38bdf8;
+}
+
+/* Inputs */
+body.dark-mode input,
+body.dark-mode textarea{
+  background:#1e293b;
+  color:white;
+  border:1px solid #334155;
+}
+
+/* Button */
+body.dark-mode button{
+  background:#2563eb;
+  color:white;
+}/* ============================= */
+/* GLOBAL LIGHT MODE (DEFAULT) */
+/* ============================= */
+
+body{
+  background:#ffffff;
+  color:#111827;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+/* Links */
+a{
+  color:#2563eb;
+}
+
+/* Navbar */
+.navbar{
+  background:#ffffff;
+  color:#111827;
+}
+
+/* Footer */
+.footer{
+  background:#f3f4f6;
+  color:#111827;
+}
+
+/* Cards */
+.balance-card{
+  background:#ffffff;
+  color:#111827;
+  border:1px solid #e5e7eb;
+}
+
+/* Inputs */
+input,
+textarea{
+  background:#ffffff;
+  color:#111827;
+  border:1px solid #d1d5db;
+}
+
+/* Buttons */
+button{
+  background:#6366f1;
+  color:white;
+}
+
+
+/* ============================= */
+/* DARK MODE */
+/* ============================= */
+
+body.dark-mode{
+  background:#0f172a;
+  color:#e5e7eb;
+}
+
+/* Navbar */
+body.dark-mode .navbar{
+  background:#020617;
+  color:#e5e7eb;
+}
+
+/* Footer */
+body.dark-mode .footer{
+  background:#020617;
+  color:#e5e7eb;
+}
+
+/* Cards */
+body.dark-mode .balance-card{
+  background:#1e293b;
+  color:#e5e7eb;
+  border:1px solid #334155;
+}
+
+/* Links */
+body.dark-mode a{
+  color:#38bdf8;
+}
+
+/* Inputs */
+body.dark-mode input,
+body.dark-mode textarea{
+  background:#1e293b;
+  color:#ffffff;
+  border:1px solid #334155;
+}
+
+/* Feedback button only */
+body.dark-mode .feedback-form button{
+  background:#2563eb;
+  color:white;
+}
+
+
+/* ============================= */
+/* THEME TOGGLE BUTTON */
+/* ============================= */
+
+.theme-toggle{
+  background:none;
+  border:none;
+  font-size:20px;
+  cursor:pointer;
+  color:inherit;
+  margin-left:15px;
+  transition:transform 0.2s ease;
+}
+
+.theme-toggle:hover{
+  transform:scale(1.15);
+}
+
+
+/* ============================= */
+/* SMOOTH TRANSITIONS */
+/* ============================= */
+
+body,
+.navbar,
+.footer,
+.balance-card,
+input,
+textarea,
+button{
+  transition: all 0.3s ease;
 }

public/faq.css

@@ -624,3 +624,61 @@ html[data-theme="dark"] {
     --bg-secondary: #1e293b;
     --text-primary: #f1f5f9;
 }
+.theme-toggle{
+  background:none;
+  border:none;
+  font-size:18px;
+  cursor:pointer;
+  margin-left:15px;
+  color:inherit;
+}
+
+.theme-toggle:hover{
+  transform:scale(1.1);
+}/* ============================= */
+/* LIGHT MODE GLOBAL FIX */
+/* ============================= */
+
+html[data-theme="light"] body{
+    background:#ffffff;
+    color:#111111;
+}
+
+/* Navbar */
+html[data-theme="light"] .navbar{
+    background:#ffffff;
+    border-bottom:1px solid rgba(0,0,0,0.1);
+}
+
+/* Footer */
+html[data-theme="light"] .footer{
+    background:#f5f5f5;
+    border-top:1px solid rgba(0,0,0,0.1);
+}
+
+/* Links */
+html[data-theme="light"] .nav-link{
+    color:#374151;
+}
+
+html[data-theme="light"] .nav-link:hover,
+html[data-theme="light"] .nav-link.active{
+    color:#2563eb;
+}
+
+/* Categories */
+html[data-theme="light"] .category-btn{
+    background:#ffffff;
+    border:1px solid rgba(37,99,235,0.2);
+    color:#374151;
+}
+
+html[data-theme="light"] .category-btn:hover{
+    background:rgba(37,99,235,0.08);
+    color:#2563eb;
+}
+
+/* FAQ hover */
+html[data-theme="light"] .faq-item:hover{
+    background:#f9fafb;
+}

public/faq.html

@@ -24,10 +24,15 @@
                 <i class="fas fa-wallet"></i> ExpenseFlow
             </a>
             <div class="nav-links">
-                <a href="index.html" class="nav-link">Home</a>
-                <a href="faq.html" class="nav-link active">FAQ</a>
-                <a href="login-signup.html" class="nav-link">Login</a>
-            </div>
+    <a href="index.html" class="nav-link">Home</a>
+    <a href="faq.html" class="nav-link active">FAQ</a>
+    <a href="login-signup.html" class="nav-link">Login</a>
+
+    <!-- Theme Toggle -->
+    <button id="themeToggle" class="theme-toggle">
+        <i class="fas fa-moon"></i>
+    </button>
+</div>
         </div>
     </nav>
 

public/faq.js

@@ -217,3 +217,24 @@ document.addEventListener('click', (e) => {
         trackFAQInteraction('category_switch', category);
     }
 });
+const toggle = document.getElementById("themeToggle");
+
+toggle.addEventListener("click", () => {
+
+let currentTheme = document.documentElement.getAttribute("data-theme");
+
+if(currentTheme === "light"){
+document.documentElement.setAttribute("data-theme","dark");
+localStorage.setItem("theme","dark");
+}else{
+document.documentElement.setAttribute("data-theme","light");
+localStorage.setItem("theme","light");
+}
+
+});
+
+const savedTheme = localStorage.getItem("theme");
+
+if(savedTheme){
+document.documentElement.setAttribute("data-theme",savedTheme);
+}