Updating theme toggle

sk66641 · Jul 28, 2024 · e29200a · e29200a
1 parent 5c283fa
commit e29200a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 27 deletions.
diff --git a/pages/privacy.html b/pages/privacy.html
@@ -146,7 +146,18 @@
           animateCircles();
         });
       </script>
-    <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="../sun.svg" style = "display: block;"></span>
+                    <span class="dark-mode-icon"><img src="../moon.svg"style = "display: block;"></span>
+                </div>
+            </label>
+        </div>
+        <div>
         <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
     </div>
     <div class="snowflakes" style="display: block;">
@@ -288,19 +299,6 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
         </div>
     </footer>
 
-    <!-- Mode toggler -->
-    <label id="themeChangeToggle" class="theme-toggle" for="themeToggle" style="position: fixed; 
-        top: 30px; 
-        right: 30px; 
-        z-index: 100; 
-        display: flex; 
-        align-items: center; 
-        border: none; 
-        background-color: transparent;">
-        <input type="checkbox" id="themeToggle" onclick="toggleTheme()" checked aria-label="Switch theme mode">
-        <span class="slider" style="width: 40px; height: 20px;"></span>
-    </label>
-
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="../js/background.js"></script>
     <script src="../js/script.js"></script>

diff --git a/pages/terms.html b/pages/terms.html
@@ -146,6 +146,17 @@
           animateCircles();
         });
       </script>
+       <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="../sun.svg" style = "display: block;"></span>
+                   <span class="dark-mode-icon"><img src="../moon.svg"style = "display: block;"></span>
+               </div>
+           </label>
+       </div>
     <div>
         <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
     </div>
@@ -297,19 +308,6 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
         </div>
     </footer>
 
-    <!-- Mode toggler -->
-    <label id="themeChangeToggle" class="theme-toggle" for="themeToggle" style="position: fixed; 
-        top: 30px; 
-        right: 30px; 
-        z-index: 100; 
-        display: flex; 
-        align-items: center; 
-        border: none; 
-        background-color: transparent;">
-        <input type="checkbox" id="themeToggle" onclick="toggleTheme()" checked aria-label="Switch theme mode">
-        <span class="slider" style="width: 40px; height: 20px;"></span>
-    </label>
-
 
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="../js/background.js"></script>