.

scripts/app.js

@@ -10,6 +10,9 @@ document.addEventListener("DOMContentLoaded", function() {
     const savedTheme = localStorage.getItem("theme");
     if (savedTheme) {
         document.body.classList.toggle("light-mode", savedTheme === "light");
+        const themeSwitchCheckbox = document.querySelector(".theme-switch__checkbox");
+        themeSwitchCheckbox.checked = savedTheme === "light";
+        updateThemeIcon(themeSwitchCheckbox.checked);
     }
 });
 
@@ -20,23 +23,31 @@ function loadComponent(id, url) {
             document.getElementById(id).innerHTML = data;
             if (id === "header") {
                 addEventListeners();
-                updateThemeSwitchState(); // Ensure theme switch state is updated
             }
         });
 }
 
 function addEventListeners() {
-    document.querySelector(".theme-switch__checkbox").addEventListener("change", toggleTheme);
+    const themeSwitchCheckbox = document.querySelector(".theme-switch__checkbox");
+    themeSwitchCheckbox.addEventListener("change", toggleTheme);
 }
 
 function toggleTheme() {
+    const themeSwitchCheckbox = document.querySelector(".theme-switch__checkbox");
     const isLightMode = document.body.classList.toggle("light-mode");
     localStorage.setItem("theme", isLightMode ? "light" : "dark");
+    updateThemeIcon(isLightMode);
 }
 
-function updateThemeSwitchState() {
-    const savedTheme = localStorage.getItem("theme");
-    document.querySelector(".theme-switch__checkbox").checked = savedTheme === "light";
+function updateThemeIcon(isLightMode) {
+    const themeIcon = document.querySelector(".theme-switch__sun-moon-container");
+    if (isLightMode) {
+        themeIcon.classList.add("sun");
+        themeIcon.classList.remove("moon");
+    } else {
+        themeIcon.classList.add("moon");
+        themeIcon.classList.remove("sun");
+    }
 }
 
 document.querySelector('.outer').addEventListener('mousemove', (e) => {

styles/styles.css

@@ -326,6 +326,13 @@ nav ul li a:hover {
   overflow: hidden;
   transition: var(--transition);
 }
+.theme-switch__sun-moon-container.sun .theme-switch__moon {
+  display: none;
+}
+
+.theme-switch__sun-moon-container.moon .theme-switch__moon {
+  display: block;
+}
 
 .theme-switch__moon {
   transform: translateX(100%);