Merge pull request #1572 from VijaySamant4368/toggle-mode

Changed button

Css-files/mode-toggler.css

@@ -0,0 +1,89 @@
+.toggle-container {
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  right: -4px;
+  top: 15px;
+  /* position: fixed; */
+  top: 40px;
+  right: 20%;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  width: 40px;
+  height: 20px;
+  margin-top: 10px;
+}
+
+
+/* Hidden Checkbox */
+.switch-checkbox {
+  display: none;
+}
+
+.theme-switch {
+  position: relative;
+  width: 45px;
+  height: 30px;
+  background-color: #ccc;
+  border-radius: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.5s ease;
+}
+
+.theme-switch .light-mode-icon,
+.theme-switch .dark-mode-icon {
+  font-size: 19px;
+  position: absolute;
+  cursor: pointer;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: opacity 0.5s ease, color 0.5s ease;
+}
+
+.theme-switch .light-mode-icon {
+  color: #f39c12;
+}
+
+.theme-switch .dark-mode-icon {
+  color: #bdc3c7;
+  opacity: 0;
+}
+
+.toggle-button {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 25px;
+  height: 25px;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transition: transform 0.5s ease, background-color 0.5s ease;
+}
+
+/* Checkbox Checked State */
+.switch-checkbox:checked + .theme-switch {
+  background-color: #34495e;
+}
+
+.switch-checkbox:checked + .theme-switch .light-mode-icon {
+  opacity: 0;
+}
+
+.switch-checkbox:checked + .theme-switch .dark-mode-icon {
+  opacity: 1;
+}
+
+.switch-checkbox:checked + .theme-switch .toggle-button {
+  transform: translateX(13px);
+  /* background-color: #34495e; */
+}

Html-files/navbar.js

@@ -1,14 +1,9 @@
-// Theme change icon toggling behavior
-let themeToggleIcon = document.getElementById("theme-toggle-icon");
-
-themeToggleIcon.addEventListener("click", function () {
+//Themechange icon toggling behaviour
+function toggleTheme() {
   document.body.classList.toggle("dark-theme");
-  if (document.body.classList.contains("dark-theme")) {
-    themeToggleIcon.style.backgroundImage = "url('../Images/navbar/sun.png')";
-  } else {
-    themeToggleIcon.style.backgroundImage = "url('../Images/navbar/moon.png')";
-  }
-});
+  document.body.classList.toggle(":root")
+}
+
 
 // Services dropdown
 const dropdownli = document.querySelector(".nav-item.dropdown");

index.html

@@ -25,7 +25,10 @@
     <link rel="stylesheet" href="Css-files/scroll-top-button.css">
     <link rel="stylesheet" href="Css-files/navbar.css">
     <link rel="stylesheet" href="Css-files/footer.css">
-       <link rel="stylesheet" href="./style.css">
+
+    <link rel="stylesheet" href="Css-files/mode-toggler.css">
+    <link rel="stylesheet" href="./style.css">
+
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
     <link rel="stylesheet" href="Css-files/googletranslate.css">
     <!-- Sun Icon -->
@@ -285,12 +288,18 @@
                 </ul>
             </div>
             <!-- Theme Toggle Icon -->
-            <div class="order-0 ml-auto p-2">
-
-                <img class="nav-link" src="Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
 
-
-            </div>
+            <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
+
+            <div id="sun-moon-mode-toggler" class="toggle-container" >
+              <input type="checkbox" id="themeToggle" class="switch-checkbox" onclick="toggleTheme()">
+              <label  id="themeChangeToggle" class="theme-switch" for="themeToggle">
+              <div class="toggle-button">
+                  <span class="light-mode-icon"><img src="images/sun.svg" style = "display: block;"></span>
+                  <span class="dark-mode-icon"><img src="images/moon.svg"style = "display: block;"></span>
+              </div>
+              </label>
+          </div>
 
             <!-- End Navbar Links -->