Merge pull request #325 from soniya-malviy/index.html

Added dark mode functionality
Rajan-Barnwal · Jun 14, 2024 · 1ed2d18 · 1ed2d18
2 parents 3d382ce + 62cb784
commit 1ed2d18
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 19 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/index.html b/index.html
@@ -40,13 +40,13 @@
             <li><a href="pricing.html" class="hover-link">Pricing</a></li>
             <li><a href="resources.html" class="hover-link">Resources</a></li>
             <li>
-              <a href="signin.html" class="btn hover-link text-light"
-                >Sign in</a
+              <a href="signin.html" class="hover-link"
+                >SignIn</a
               >
             </li>
             <li>
-              <a href="signup.html" class="btn hover-link text-light"
-                >Sign up</a
+              <a href="signup.html" class="hover-link"
+                >SignUp</a
               >
             </li>
             <img src="moon.png" id="icon" />
@@ -355,23 +355,25 @@ <h4>Resources</h4>
     ></script>
 
     <script>
-      const toggleButton = document.getElementById("nav-toggle");
-      const navLinks = document.getElementById("nav-links");
+      document.addEventListener("DOMContentLoaded", () => {
+        const toggleButton = document.getElementById("nav-toggle");
+        const navLinks = document.getElementById("nav-links");
+        const icon = document.getElementById("icon");
 
-      toggleButton.addEventListener("click", () => {
-        navLinks.classList.toggle("active");
-      });
-
-      var icon = document.getElementById("icon");
+        toggleButton.addEventListener("click", () => {
+          navLinks.classList.toggle("active");
+        });
 
-      icon.onclick = function () {
-        document.body.classList.toggle("dark-theme");
-        if (document.body.classList.contains("dark-theme")) {
-          icon.src = "sun.png";
-        } else {
-          icon.src = "moon.png";
-        }
-      };
+        icon.addEventListener("click", () => {
+          document.body.classList.toggle("dark-theme");
+          if (document.body.classList.contains("dark-theme")) {
+            icon.src = "sun.png";
+          } else {
+            icon.src = "moon.png";
+          }
+        });
+      });
     </script>
+
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -654,3 +654,11 @@ button {
   background: linear-gradient(270deg, #e4f1ff, #cce5ff);
   color: var(--accent-color);
 }
+
+#nav-links.active {
+  display: block;
+}
+.dark-theme {
+  background-color: #333;
+  color: #fff;
+}