Merge pull request #255 from prakhar-1005/darkModeIcon

Dark & Light mode icons added
gsasansol · Nov 26, 2022 · f8496d1 · f8496d1
2 parents 247c30b + 931a665
commit f8496d1
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/CONTRIBUTORS b/CONTRIBUTORS
@@ -39,3 +39,4 @@ Daniele Avolio <[email protected]>
 Adhetya Narayan J.M <[email protected]>
 Ranjana Reghunath <[email protected]>
 Rudraksh Karpe <[email protected]>
+Prakhar Pandey <[email protected]>
diff --git a/index.html b/index.html
@@ -161,7 +161,7 @@
 
             <!--dark mode button is now outside the option class-->
             <button onclick="darkMode()" class="toggleButton">
-                <i class='fas fa-sun'></i>
+                 <i class="fa-solid fa-moon fa-2x" id="dark-mode-enable"></i>
             </button>
         </nav>
 

diff --git a/index.js b/index.js
@@ -40,6 +40,17 @@ function darkMode() {
       element.style.borderRight = "2px solid white";
     }
   }
+
+  const toggleButton = document.getElementById("dark-mode-enable");
+
+  if(toggleButton.classList.contains("fa-moon")){
+    toggleButton.classList.remove("fa-moon");
+    toggleButton.classList.add("fa-lightbulb");
+  }
+  else{
+    toggleButton.classList.remove("fa-lightbulb");
+    toggleButton.classList.add("fa-moon");
+  }
 }
 const toggles = document.querySelectorAll(".faq-toggle");