Merge pull request #1367 from meetarora10/tog-branch

feat: Added light dark mode toggle feature on T&C and privacy pages .
apu52 · Aug 10, 2024 · 664671b · 664671b
2 parents 599aa9a + c597a0e
commit 664671b
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 1 deletion.
diff --git a/privacy.html b/privacy.html
@@ -29,7 +29,6 @@
             font-size: 2.5rem;
             font-weight: bold;
             margin-bottom: 20px;
-            color: #639ace !important;
         }
         .section-title {
             font-family: 'ABeeZee', sans-serif;
@@ -191,6 +190,12 @@
         <div class="circle"></div>
         <div class="circle"></div>
     </div>
+    <a>
+        <div class="theme-toggle">
+          <i class="fas fa-sun"></i>
+          <i class="fas fa-moon"></i>
+        </div>
+       </a>
     <script>
         document.addEventListener("DOMContentLoaded", function () {
             const coords = { x: 0, y: 0 };
@@ -302,6 +307,29 @@ <h2 class="section-title">Changes to This Privacy Policy</h2>
           document.documentElement.scrollTop = 0;
         }
       </script>
+      <script>
+        document.addEventListener("DOMContentLoaded", function () {
+        const themeToggle = document.querySelector(".theme-toggle");
+        const body = document.body;
+
+        // Load the saved theme from local storage and apply it
+        const savedTheme = localStorage.getItem("theme");
+        if (savedTheme && savedTheme === "dark") {
+          body.classList.add("dark-theme");
+        }
+
+        themeToggle.addEventListener("click", function () {
+          body.classList.toggle("dark-theme");
+
+          // Save the current theme in local storage
+          if (body.classList.contains("dark-theme")) {
+            localStorage.setItem("theme", "dark");
+          } else {
+            localStorage.setItem("theme", "light");
+          }
+        });
+      });
+      </script>
 
 <script>
     document.addEventListener("DOMContentLoaded", () => {

diff --git a/tnc.css b/tnc.css
@@ -279,3 +279,69 @@ html {
         transition: width 0.09s ease-in-out;
         border-radius: 10px;
     }
+    .theme-toggle {
+      position: fixed;
+      top: 26px;
+      right: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      background-color: yellow;
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      transition: background-color 0.3s, box-shadow 0.3s;
+      z-index: 1000;
+    }
+
+    .theme-toggle i {
+      font-size: 20px;
+      color: rgb(3, 3, 38);
+    }
+
+    .theme-toggle .fa-moon {
+      display: none;
+    }
+
+    /* Dark Theme Styles */
+    body.dark-theme {
+      background-color: #121212;
+      color: #ffffff;
+    }
+
+    body.dark-theme .header,
+    body.dark-theme .footer,
+    body.dark-theme .navbar {
+      background-color: black;
+      color: #ffffff;
+    }
+
+
+    body.dark-theme .theme-toggle {
+      background-color: rgb(3, 3, 38);
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+    }
+
+    body.dark-theme .theme-toggle .fa-sun {
+      display: none;
+    }
+
+    body.dark-theme .theme-toggle .fa-moon {
+      display: inline;
+      color: #f1c40f;
+    }
+
+    body.dark-theme a {
+      color: #f1c40f;
+    }
+    body.dark-theme .content p{
+      color: #95e9e9;
+    }
+    body.dark-theme .title,
+    body.dark-theme .section-title
+    {
+      color: blue;
+    }
+
diff --git a/tnc.html b/tnc.html
@@ -88,6 +88,12 @@
         <div class="circle"></div>
         <div class="circle"></div>
       </div>
+      <a>
+        <div class="theme-toggle">
+          <i class="fas fa-sun"></i>
+          <i class="fas fa-moon"></i>
+        </div>
+       </a>
       <script>
         document.addEventListener("DOMContentLoaded", function () {
           const coords = { x: 0, y: 0 };
@@ -225,7 +231,29 @@ <h2 class="section-title">8. Our Copyright Dispute Policy</h2>
           document.documentElement.scrollTop = 0;
         }
       </script>
+      <script>
+        document.addEventListener("DOMContentLoaded", function () {
+        const themeToggle = document.querySelector(".theme-toggle");
+        const body = document.body;
+
+        // Load the saved theme from local storage and apply it
+        const savedTheme = localStorage.getItem("theme");
+        if (savedTheme && savedTheme === "dark") {
+          body.classList.add("dark-theme");
+        }
 
+        themeToggle.addEventListener("click", function () {
+          body.classList.toggle("dark-theme");
+
+          // Save the current theme in local storage
+          if (body.classList.contains("dark-theme")) {
+            localStorage.setItem("theme", "dark");
+          } else {
+            localStorage.setItem("theme", "light");
+          }
+        });
+      });
+      </script>
       <script>
         document.addEventListener("DOMContentLoaded", () => {
           setTimeout(() => {