Add dynamic toggle icon

index.html

@@ -39,6 +39,8 @@
             var elements = document.getElementsByClassName("style-one");
             for (const element of elements)
                 element.classList.toggle("dark_mode_style-one");
+            var icon = document.getElementById("toggleICON");
+            icon.classList.toggle("fas fa-sun");  
         }
     </script>
 }
@@ -51,7 +53,7 @@
         <a href="#teaching">Teaching</a>
         <a href="#research">Research</a>
         <a href="#service">Service</a>
-        <a href="" onclick="toggleDarkLight();return false"><i class="fas fa-sun"></i></a>
+        <a href="" onclick="toggleDarkLight();return false"><i id="toggleICON" class="fas fa-moon"></i></a>
     </div>
 
     <div class="main" id="home">
@@ -541,6 +543,12 @@
         <div class="ball"></div>
         <div class="ball"></div>
     </div>
+    <script>
+        const ICON_tog = document.querySelector('#toggle');
+        ICON_tog.addEventListener('click', () => {
+        ICON_tog.classList.toggle("is-active");
+    });
+    </script>
 </body>
 
 </html>