Merge pull request #1357 from haseebzaki-07/new_branch_4

Add theme toggle
apu52 · Nov 3, 2024 · c1dc48b · c1dc48b
2 parents 053609d + f2401ed
commit c1dc48b
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 25 deletions.
diff --git a/about.html b/about.html
@@ -21,6 +21,7 @@
     - favicon
   -->
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="assets/css/themeToggle.css">
   <link rel="shortcut icon" href="./images/metaverse.png" type="image/x-icon">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <script src="https://kit.fontawesome.com/1a1ffb78ee.js" crossorigin="anonymous"></script>
@@ -396,11 +397,14 @@
             <div class="heading">
               <span>💻&nbsp;</span><span>A</span><span>B</span><span>O</span><span>U</span><span>T</span><span>&nbsp;</span><span>&nbsp;</span><span>U</span><span>S</span>
             </div>
-            <label class="theme-toggle" for="themeToggle" style="z-index: 100; margin-top: -270px; ">
-
-              <input type="checkbox" id="themeToggle" onclick="toggleTheme()" checked aria-label="Switch theme mode">
-              <span class="slider"></span>
-            </label>
+            <div class="container">
+
+              <label class="switch">
+                  <input type="checkbox" id="theme-toggle">
+                  <span class="slider"></span>
+              </label>
+
+          </div>
           </div>
           <br>
 
@@ -528,6 +532,7 @@ <h1 class="closure"></h1>
   <script src="./assets/js/scroll.js"></script>
   <script src="./assets/js/contributors.js"></script>
   <script src="./assets/js/mouse_transition.js"></script>
+  <script src="./assets/js/toggletheme."></script>
   </div>
 </body>
 

diff --git a/assets/css/themeToggle.css b/assets/css/themeToggle.css
@@ -0,0 +1,78 @@
+body {
+    font-family: Arial, sans-serif;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+/* Light and Dark themes */
+body.light {
+    background-color: #ffffff;
+    color: #000000;
+}
+
+body.dark {
+    background-color: #333333;
+    color: #ffffff;
+}
+
+/* Container styling for the toggle switch */
+.switch {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+/* Hide checkbox */
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* Toggle slider styling */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+    border-radius: 34px;
+}
+
+/* Slider knob styling */
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    border-radius: 50%;
+    transition: 0.4s;
+    background-size: 18px 18px;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+
+/* Sun icon in light mode */
+body.light .slider:before {
+    background-image: url('/assets/img/sun.icon.png'); /* Update path as necessary */
+}
+
+/* Moon icon in dark mode */
+body.dark .slider:before {
+    background-image: url('/assets/img/moon.icon.png'); /* Update path as necessary */
+}
+
+/* Move knob to right when checked */
+input:checked + .slider:before {
+    transform: translateX(26px); /* Move knob to the right */
+}
diff --git a/assets/img/moon.icon.png b/assets/img/moon.icon.png
diff --git a/assets/img/sun.icon.png b/assets/img/sun.icon.png
diff --git a/assets/js/toggletheme.js b/assets/js/toggletheme.js
@@ -0,0 +1,20 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const themeToggleButton = document.getElementById('theme-toggle');
+    const body = document.body;
+
+
+    const currentTheme = localStorage.getItem('theme') || 'light';
+    body.classList.add(currentTheme);
+    themeToggleButton.checked = currentTheme === 'dark'; // Set checkbox state
+
+
+    themeToggleButton.addEventListener('change', () => {
+        if (themeToggleButton.checked) {
+            body.classList.replace('light', 'dark');
+            localStorage.setItem('theme', 'dark');
+        } else {
+            body.classList.replace('dark', 'light');
+            localStorage.setItem('theme', 'light');
+        }
+    });
+});
diff --git a/contributor.html b/contributor.html
@@ -32,6 +32,7 @@
   <link rel="stylesheet" href="./assets/css/scroll.css">
   <link rel="stylesheet" href="./assets/css/contributors.css">
   <link rel="stylesheet" href="./assets/css/cursor_transition.css">
+  <link rel="stylesheet" href="./assets/css/themeToggle.css">
 
   <!--
     - google font link
@@ -44,6 +45,7 @@
   <!-- <script src="https://cdn.tailwindcss.com"></script> -->
 
   <style>
+
     #preloader {
       position: fixed;
       top: 0;
@@ -80,6 +82,9 @@
       animation: spin 1s linear infinite;
     }
 
+
+
+
     #loading-percentage {
       position: absolute;
       font-size: 24px;
@@ -136,15 +141,6 @@
   }
   </style>
 </head>
-<!-- Light-Dark theme SWITCH -->
-
-
-<!-- <p class="invert-color" style="position: sticky; top: 30px; z-index:100; margin-left: 30px;">Theme :</p> -->
-<label class="theme-toggle" for="themeToggle" style="position: fixed; top: 28px; z-index: 100; margin-left: 30px">
-
-  <input type="checkbox" id="themeToggle" onclick="toggleTheme()" checked aria-label="Switch theme mode">
-  <span class="slider"></span>
-</label>
 
 <body>
 <div class="circle-container">
@@ -178,6 +174,14 @@
   <div class="circle"></div>
   <div class="circle"></div>
   <div class="circle"></div>
+  <div class="container">
+
+    <label class="switch">
+        <input type="checkbox" id="theme-toggle">
+        <span class="slider"></span>
+    </label>
+
+</div>
 </div>
 <script>
   document.addEventListener("DOMContentLoaded", function () {
@@ -441,6 +445,7 @@ <h2>Meet Our Contributors</h2>
   <script src="./assets/js/contributors.js"></script>
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script src="./assets/js/mouse_transition.js"></script>
+  <script src="./assets/js/toggletheme.js"></script>
   </div>
 </body>
 

diff --git a/copyright.html b/copyright.html
@@ -30,9 +30,10 @@
   -->
   <link rel="stylesheet" href="./assets/css/style.css">
   <link rel="stylesheet" href="./assets/css/about.css">
-  <link rel="stylesheet" href="./assets/css/scroll.css">
+  <link rel="stylesheet" href="./assets/css/scroll.css">/
   <link rel="stylesheet" href="./assets/css/contributors.css">
   <link rel="stylesheet" href="./assets/css/cursor_transition.css">
+  <link rel="stylesheet" href="./assets/css/themeToggle.css">
 
   <!--
     - google font link
@@ -44,6 +45,8 @@
     href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
   <!-- <script src="https://cdn.tailwindcss.com"></script> -->
   <style>
+
+
     .circle {
       position: absolute;
       width: 25px;
@@ -301,11 +304,14 @@
           <div class="heading">
             <span>C</span><span>O</span><span>P</span><span>Y</span><span>R</span><span>I</span><span>G</span><span>H</span><span>T</span><span>&nbsp;</span><span>P</span><span>O</span><span>L</span><span>I</span><span>C</span><span>Y</span>
           </div>
-          <label class="theme-toggle" for="themeToggle" style="z-index: 100; margin-top: -270px; ">
-
-            <input type="checkbox" id="themeToggle" onclick="toggleTheme()" checked aria-label="Switch theme mode">
-            <span class="slider"></span>
-          </label>
+          <div class="container">
+
+            <label class="switch">
+                <input type="checkbox" id="theme-toggle">
+                <span class="slider"></span>
+            </label>
+
+        </div>
         </div>
         <br>
 
@@ -425,6 +431,7 @@ <h2>6. Changes to This Copyright Policy</h2>
   <script src="./assets/js/scroll.js"></script>
   <script src="./assets/js/contributors.js"></script>
   <script src="./assets/js/mouse_transition.js"></script>
+  <script src="./assets/js/toggletheme.js"></script>
 </div>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -30,6 +30,7 @@
   <link rel="stylesheet" href="./assets/css/style.css">
   <link rel="stylesheet" href="./assets/css/scroll.css">
   <link rel="stylesheet" href="./assets/css/contributors.css">
+  <link rel="stylesheet" href="./assets/css/themeToggle.css">
 
   <!--
     - google font link
@@ -414,11 +415,14 @@
           <div class="heading">
             <span>🚀&nbsp;</span><span>M</span><span>E</span><span>T</span><span>A</span><span>V</span><span>E</span><span>R</span><span>S</span><span>E</span>
           </div>
-          <label class="theme-toggle" for="themeToggle">
-
-            <input type="checkbox" id="themeToggle" onclick="toggleTheme()" checked aria-label="Switch theme mode">
-            <span class="slider"></span>
-          </label>
+          <div class="container">
+
+            <label class="switch">
+                <input type="checkbox" id="theme-toggle">
+                <span class="slider"></span>
+            </label>
+
+        </div>
         </div>
 
 
@@ -565,11 +569,13 @@ <h3>Subscribe to our Newsletter</h3>
     <script src="./assets/js/index.js"></script>
     <script src="./assets/js/script.js"></script>
     <script src="./assets/js/scroll.js"></script>
+    <script src="./assets/js/toggletheme.js"></script>
     <script src="./assets/js/contributors.js"></script>
     <!-- <script src="./assets/js/mouse_transition.js"></script> -->
     <script src="scrolldownprogressbar.js"></script>
     <script src="./assets/js/subscribe.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
+
 
   </div>
   <style>