Fix issue #796 : Toggle switch appearance

index.html

@@ -316,7 +316,19 @@ <h1>
             </script>
             <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
           </li>
-          <div class="theme-switch" id="theme-switch"></div>
+          <!-- <div class="theme-switch themeSwitch" id="theme-switch"></div> -->
+
+          <div id="themeSwitch" class="theme-switch">
+            <input type="checkbox" class="checkbox" id="checkbox">
+            <label for="checkbox" class="checkbox-label">
+
+              <img src="./Assets/sun.png" class="theme-btn">
+              <img src="./Assets/moon.png" class="theme-btn">
+              <!-- <i class="fas fa-moon"></i>
+              <i class="fas fa-sun"></i> -->
+              <span class="ball"></span>
+            </label>
+          </div>
         </ul>
       </nav>
 

script/script.js

@@ -1,4 +1,4 @@
-const themeSwitch = document.getElementById('theme-switch'); // Ensure this matches your HTML button's ID
+const themeSwitch = document.getElementById('checkbox'); // Ensure this matches your HTML button's ID
 const body = document.body;
 const header = document.querySelector('header');
 const footer = document.querySelector('footer');

style/style.css

@@ -1190,7 +1190,7 @@ body.dark-mode .newsletter-right {
 }
 
 /* Here are the styles for the theme toggel  */
-.theme-switch {
+/* .theme-switch {
   display: inline-block;
   width: 60px;
   height: 30px;
@@ -1224,8 +1224,49 @@ body.dark-mode .newsletter-right {
 .theme-switch.dark-theme::before {
   left: 33px;
   background-image: url("../Assets/sun.png");
+} */
+
+/* theme toggle switch */
+
+.checkbox {
+  opacity: 0;
+  position: absolute;
 }
 
+.checkbox-label {
+  background: linear-gradient(82deg, #ffffff, #00796b);
+  width: 60px;
+  height: 28px;
+  border-radius: 50px;
+  position: relative;
+  padding: 5px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.theme-btn{
+  height: 23px;
+  height: 23px;
+}
+.checkbox-label .ball {
+  background-color: #000000;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  border-radius: 50%;
+  transition: transform 0.3s linear;
+
+}
+
+.checkbox:checked + .checkbox-label .ball {
+  transform: translateX(31px);
+
+}
+
+
 /*  contact page  dark theme*/
 body.dark-mode .contact-hero {
   margin-bottom: 1px;