From b0606ff4a1e20574fe887cdc50d4c59ae3dae863 Mon Sep 17 00:00:00 2001
From: prishsha <prishavadhavkar@gmail.com>
Date: Sat, 5 Oct 2024 14:23:00 +0530
Subject: [PATCH] dark mode toggle

---
 index.html |  8 ++++++
 script.js  | 23 ++++++++++++++++++
 style.css  | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 99 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index c3ab5bb0..1eea6a85 100644
--- a/index.html
+++ b/index.html
@@ -21,10 +21,18 @@
                         <li><a href="#">Media Remotes</a></li>
                         <li><a href="#">Others</a></li>
                         <li class="login"><a href="login/login.html">Login</a></li>
+                    <label class="switch">
+                        <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
+                        <span class="slider"></span>
+                    </label>
                     </ul>
                 </nav>
                 <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
             </div>
+            <label class="switch">
+                <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
+                <span class="slider"></span>
+            </label>
 
         <!-- PS4 Controller Section -->
         <div class="row">
diff --git a/script.js b/script.js
index 673239b6..0b5ca9e1 100644
--- a/script.js
+++ b/script.js
@@ -25,3 +25,26 @@ function scrollToTop() {
         behavior: 'smooth'
     });
 }
+
+function toggleTheme() {
+    const body = document.body;
+    const themeToggle = document.getElementById('theme-toggle');
+    body.classList.toggle('dark-mode', themeToggle.checked);
+
+    // Save the user's preference in localStorage
+    if (themeToggle.checked) {
+        localStorage.setItem('theme', 'dark');
+    } else {
+        localStorage.setItem('theme', 'light');
+    }
+}
+
+// Load theme from localStorage on page load
+window.onload = () => {
+    const savedTheme = localStorage.getItem('theme');
+    const themeToggle = document.getElementById('theme-toggle');
+    if (savedTheme === 'dark') {
+        document.body.classList.add('dark-mode');
+        themeToggle.checked = true;
+    }
+};
diff --git a/style.css b/style.css
index d3292b97..b21d8097 100644
--- a/style.css
+++ b/style.css
@@ -3,6 +3,12 @@
     padding: 0;
     font-family: sans-serif;
 }
+
+*.dark-mode{
+    background-color: #493d3d;
+    color:#f1f1f1;
+}
+
 html {
     overflow-y: scroll;
 }
@@ -28,7 +34,6 @@ html::-webkit-scrollbar-thumb:window-inactive {
     padding-left: 5%;
     padding-right: 5%;
     box-sizing: border-box;
-    overflow: hidden;
 }
 
 .navbar {
@@ -40,9 +45,61 @@ html::-webkit-scrollbar-thumb:window-inactive {
     overflow: hidden;
     background-color: #fff;
     z-index: 1000;
- 
 }
 
+.dark-mode .navbar{
+    background-color: #493d3d;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px !important;
+    height: 24px !important;
+    margin-right: 20px;
+
+  }
+  
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 34px;
+  }
+  
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 22px;
+    width: 22px;
+    left: 6px;
+    bottom: 2px;
+    top:1px;
+    background-color: black;
+    transition: .4s;
+    border-radius: 50%;
+  }
+  
+  input:checked + .slider {
+    background:linear-gradient(to right, #fb5283, #ff3527) !important;
+  }
+  
+  input:checked + .slider:before {
+    transform: translateX(26px);
+  }
+  
+
 .logo {
     width: 50px;
     cursor: pointer;
@@ -93,7 +150,7 @@ nav {
 
 nav ul li {
     list-style: none;
-    display: inline-block;
+    display: inline;
     margin-right: 30px;
 }
 
@@ -106,6 +163,9 @@ nav ul li a {
     transition: color 0.5s, transform 0.5s;
 }
 
+.dark-mode nav ul li a{
+    color:#ccc;
+}
 nav ul li a:hover {
     color: #e00999;
     transform: scale(1.18);
@@ -127,6 +187,7 @@ nav ul li.login:hover {
     color: #fff;
 }
 
+
 .row {
     display: flex;
     justify-content: space-between;
@@ -147,6 +208,10 @@ nav ul li.login:hover {
     letter-spacing: 1px;
 }
 
+.dark-mode h2{
+    color: #ccc;
+}
+
 .col-1 h3 {
     font-size: 30px;
     color: #707070;