Added the dark theme button and fixed social hover

AbhijeetMukherjee-ML · AbhijeetMukherjee-ML · commit f5a6dd07b07f · 2026-06-15T11:29:01.000+05:30
diff --git a/web-app/css/styles.css b/web-app/css/styles.css
@@ -587,6 +587,35 @@ body.sidebar-active .sidebar-dock {
   transition: all var(--duration-fast) ease-in;
 }
 
+.fixed-theme-toggle {
+  position: fixed;
+  top: 18px;
+  left: 18px;
+  z-index: 1101;
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+
+.fixed-theme-toggle:hover {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: var(--border-accent);
+  transform: translateY(-1px);
+}
+
+@media (max-width: 900px) {
+  .fixed-theme-toggle {
+    top: 14px;
+    left: 14px;
+    width: 42px;
+    height: 42px;
+  }
+}
+
 .sound-toggle:hover,
 .theme-toggle:hover {
   background: var(--accent-soft);
@@ -3024,13 +3053,6 @@ body.sidebar-active .sidebar-dock {
   text-decoration: none;
 }
 
-.footer-social-icons a:hover {
-  background: var(--accent-soft);
-  border-color: var(--border-accent);
-  color: var(--accent);
-  transform: translateY(-2px);
-}
-
 .footer-links h3 {
   font-family: var(--font-sans);
   font-size: 0.85rem;
@@ -3158,8 +3180,8 @@ body.sidebar-active .sidebar-dock {
   background: var(--accent-soft);
   border-color: var(--border-accent);
   color: var(--accent);
-  transform: translateY(-4px) scale(1.05);
-  box-shadow: 0 10px 20px rgba(34, 197, 94, 0.16);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.14);
 }
 
 .footer-social-icons a:hover::before {
@@ -3168,7 +3190,7 @@ body.sidebar-active .sidebar-dock {
 }
 
 .footer-social-icons a:active {
-  transform: translateY(-1px) scale(0.98);
+  transform: translateY(0);
 }
 
 .footer-links h3 {
@@ -6361,4 +6383,4 @@ body.sidebar-active .projects-section,
 body.sidebar-collapsed .projects-section {
   padding-left: 0 !important;
   padding-right: 0 !important;
-}
+}
diff --git a/web-app/index.html b/web-app/index.html
@@ -34,11 +34,14 @@
     />
   </head>
   <body class="sidebar-active">
+    <button aria-label="Switch theme" class="theme-toggle fixed-theme-toggle" type="button">
+      <i class="fas fa-moon" aria-hidden="true"></i>
+    </button>
     <!-- Scroll Progress Bar -->
     <div id="scrollProgressContainer" aria-label="Page scroll progress">
       <div id="scrollProgressBar"></div>
     </div>
-
+    
     <a class="skip-link" href="#main-content">Skip to main content</a>
 
     <!-- Cursor Glow -->
@@ -1340,10 +1343,10 @@ <h3>${proj.title}</h3>
             const icon = toggle.querySelector("i");
             if (icon) {
               if (theme === "dark") {
-                icon.className = "fas fa-sun";
+                icon.className = "fas fa-moon";
                 toggle.setAttribute("aria-label", "Switch to light mode");
               } else {
-                icon.className = "fas fa-moon";
+                icon.className = "fas fa-sun";
                 toggle.setAttribute("aria-label", "Switch to dark mode");
               }
             }
@@ -1377,11 +1380,7 @@ <h3>${proj.title}</h3>
 
         // Add click listeners to all theme toggles
         themeToggles.forEach((toggle) => {
-          // Remove any existing listeners
-          const newToggle = toggle.cloneNode(true);
-          toggle.parentNode.replaceChild(newToggle, toggle);
-
-          newToggle.addEventListener("click", function (e) {
+          toggle.addEventListener("click", function (e) {
             e.preventDefault();
             const current = html.getAttribute("data-theme");
             const next = current === "light" ? "dark" : "light";
