Adjust theme toggler button

khushi-joshi-05 · Oct 6, 2024 · 95238b6 · 95238b6
1 parent b23a63b
commit 95238b6
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/Css-files/mode-toggler.css b/Css-files/mode-toggler.css
@@ -26,7 +26,7 @@
 
 .theme-switch {
   position: relative;
-  width: 45px;
+  width: 50px;
   height: 30px;
   background-color: #ccc;
   border-radius: 20px;
@@ -44,7 +44,7 @@
   font-size: 19px;
   position: absolute;
   cursor: pointer;
-  top: 50%;
+  /* top: 50%; */
   transform: translateY(-50%);
   transition: opacity 0.5s ease, color 0.5s ease;
 }
@@ -84,6 +84,6 @@
 }
 
 .switch-checkbox:checked + .theme-switch .toggle-button {
-  transform: translateX(13px);
+  transform: translateX(18px);
   /* background-color: #34495e; */
 }
diff --git a/index.html b/index.html
@@ -358,9 +358,7 @@
 
                 </ul>
             </div>
-            <!-- Theme Toggle Icon -->
-
-
+
             <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
 
 
@@ -439,6 +437,7 @@
                 </ul>
             </div>
         </div>
+        <!-- Theme Toggle Icon -->
         <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">