made the functinalin dark mode and light mode contact us

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  */
@@ -400,9 +468,7 @@
         <button id="navToggle">☰</button>
 
         <!-- Navbar Links -->
-        <div id="navLinks">
-        <div class="logo" style="margin-right: 200px; font-size: 20px;">Ticket Marketplace</div>
-        <div>
+
             <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>
@@ -415,12 +481,9 @@
         <!-- Dark Mode Button -->
         <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
     </nav>
-            <a href="#contact"><i class="fas fa-envelope"></i> Contact</a>
-            <a href="contributor.html"><i class="fas fa-users"></i> Contributors</a>
-            <a href="register.html"><i class="fas fa-sign-in-alt"></i> Login</a>
-
+
           </div>
-          <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
+           
 
       </nav>
     <!-- Contact Form Section -->
@@ -454,18 +517,7 @@ <h1>Contact Us</h1>
       <div class="footer-top">
 <footer>
 
-    <div class="footer-logo-section">
-        <a href="#"> <img src="./images/3.jpeg" alt="easyJet holidays logo" class="footer-logo"></a>
-        <p style="color: #b5fdf4;">Affordable adventures, unforgettable memories—explore with ease.</p>
-        <p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>
-        <div class="social-icons">
-          <a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
-          <a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
-          <a href="https://www.twitter.com"><i class="fab fa-twitter"></i></a>
-          <a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
-          <a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a>
-      </div>      
-    </div>
+
 
     <div class="footer-container">
         <div class="footer-logo-section">
@@ -1229,5 +1281,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>
+