Add Dark/Light Mode Toggle to Contact Us Page for Improved User Accessibility

contactus.html

@@ -4,6 +4,74 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Contact Us - Trainline</title>
+
+
+  <style>
+    /* Light and Dark Mode Variables */
+:root {
+    --bg-color: #e0e5ec; /* Light mode background */
+    --text-color: #333;  /* Light mode text color */
+    --nav-bg-color: #2e3b4e;
+    --nav-text-color: #fff;
+    --highlight-color: #ff4d4d;
+    --form-bg-color: #fff;
+}
+
+body.dark-mode {
+    --bg-color: #1e1e1e; /* Dark mode background */
+    --text-color: #e0e5ec; /* Dark mode text color */
+    --nav-bg-color: #333;
+    --nav-text-color: #ff8c00;
+    --highlight-color: #ff8c00;
+    --form-bg-color: #333;
+}
+
+/* Apply the variables */
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+
+nav {
+    background-color: var(--nav-bg-color);
+    color: var(--nav-text-color);
+}
+
+nav ul li a {
+    color: var(--nav-text-color);
+}
+
+.container {
+    background: var(--bg-color);
+}
+
+.contact-form {
+    background-color: var(--form-bg-color);
+}
+
+form .btn {
+    background-color: var(--highlight-color);
+}
+
+form .btn:hover {
+    color: var(--highlight-color);
+}
+
+/* Footer */
+footer {
+    background-color: var(--nav-bg-color);
+    color: var(--text-color);
+}
+
+footer a {
+    color: var(--highlight-color);
+}
+
+  </style>
+
+
+
+
     <style>
 
 /* cursor animation  */
@@ -396,11 +464,14 @@
         <!-- Toggle Button (Visible on Small Screens) -->   
         <button id="navToggle">☰</button>
 
-        <!-- Navbar Links -->
+
+
+
         <div id="navLinks">
           <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt="" style="border-radius: 50%; height: 35px; width: 35px;">
           <h1 class="logo" style="margin-right: 200px; font-size: 20px; flex-basis: auto;">Ticket Marketplace</h1>
         <div tyle="margin-left: 24rem;">
+
             <a href="index.html"><i class="fas fa-home"></i> Home</a>
             <a href="about.html"><i class="fas fa-info-circle"></i> About</a>
             <a href="buy.html"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
@@ -412,7 +483,14 @@ <h1 class="logo" style="margin-right: 200px; font-size: 20px; flex-basis: auto;"
         <!-- Dark Mode Button -->
         <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
     </nav>
+
+
           </div>
+
+
+=======
+          </div>
+
       </nav>
     <!-- Contact Form Section -->
     <section class="container">
@@ -444,6 +522,7 @@ <h1>Contact Us</h1>
     <footer class="footer-container">
       <div class="footer-top">
 <footer>
+
 
     <div class="footer-container">
         <div class="footer-logo-section">
@@ -1207,5 +1286,36 @@ <h4>FIND US</h4>
 
 
     </script>
+
+
+
+<script>
+  // Dark Mode Toggle Function
+const darkModeToggle = document.getElementById('darkModeToggle');
+
+// Check if dark mode is enabled in local storage
+if (localStorage.getItem('darkMode') === 'enabled') {
+    document.body.classList.add('dark-mode');
+    darkModeToggle.textContent = '☀️';
+} else {
+    darkModeToggle.textContent = '🌙';
+}
+
+// Toggle Dark Mode
+darkModeToggle.addEventListener('click', () => {
+    document.body.classList.toggle('dark-mode');
+
+    // Update button text
+    if (document.body.classList.contains('dark-mode')) {
+        localStorage.setItem('darkMode', 'enabled');
+        darkModeToggle.textContent = '☀️';
+    } else {
+        localStorage.setItem('darkMode', 'disabled');
+        darkModeToggle.textContent = '🌙';
+    }
+});
+
+</script>
 </body>
 </html>
+