From f32de1199b9cd1a1e9dc8176dee064f76dadabfc Mon Sep 17 00:00:00 2001
From: 29deepanshutyagi <123951725+29deepanshutyagi@users.noreply.github.com>
Date: Tue, 3 Oct 2023 22:01:50 +0530
Subject: [PATCH 1/3] dark mode button is added

---
 index.html      |  8 +++++++-
 scrollEffect.js | 20 ++++++++++++++++++++
 styles.css      | 13 +++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 333ca30..61a2aa5 100644
--- a/index.html
+++ b/index.html
@@ -48,10 +48,16 @@
                     <div class="navbar-nav">
                         <a class="nav-link nav-home " href="./index.html"
                             style="color: var(--col1); border: #1f1f1f solid ; border-radius: 20px; border-width: 2px; height: 45px; margin-top: 2px; ">Home</a>
-                        <div class="theme-btn nav-link">
+                        <!-- <div class="theme-btn nav-link">
                             <button id="btn" class="btn btn-outline-dark btn-md" style=" border-radius: 30%;"
                                 onclick=""><i id="themeIcon" class="bi bi-brightness-high "></i></button>
+                        </div> -->
+                        <div class="theme-btn nav-link">
+                            <button id="btn" class="btn btn-outline-dark btn-md" style=" border-radius: 30%;" onclick="toggleDarkMode()">
+                                <i id="themeIcon" class="bi bi-moon"></i>
+                            </button>
                         </div>
+                        
                     </div>
                 </div>
                 <form class="nosubmit">
diff --git a/scrollEffect.js b/scrollEffect.js
index 622593b..beda63c 100644
--- a/scrollEffect.js
+++ b/scrollEffect.js
@@ -23,3 +23,23 @@ Options);
 cards.forEach((card) => {
   animationAppear.observe(card);
 });
+
+    // Function to toggle dark mode
+    function toggleDarkMode() {
+        const body = document.body;
+        const themeIcon = document.getElementById("themeIcon");
+
+        // Toggle dark mode class on body
+        body.classList.toggle("dark-mode");
+
+        // Toggle moon/sun icon
+        if (body.classList.contains("dark-mode")) {
+            // Dark mode is on
+            themeIcon.classList.remove("bi-moon");
+            themeIcon.classList.add("bi-sun");
+        } else {
+            // Dark mode is off
+            themeIcon.classList.remove("bi-sun");
+            themeIcon.classList.add("bi-moon");
+        }
+    }
diff --git a/styles.css b/styles.css
index a9c709f..1fe08f2 100644
--- a/styles.css
+++ b/styles.css
@@ -511,6 +511,19 @@ h2 {
   font-size: 20px;
   color: black;
 }
+/* Dark mode styles */
+.dark-mode {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+/* Styles for elements in dark mode */
+.dark-mode a {
+  color: #bb86fc; /* Purple color for links in dark mode */
+}
+
+/* Additional dark mode styles for your specific elements */
+
 body {
   background-color: white;
   font-family: "Ninja Naruto", arial;

From e0de1609a0d98afc31cf2c1a67cfc25e59857123 Mon Sep 17 00:00:00 2001
From: 29deepanshutyagi <123951725+29deepanshutyagi@users.noreply.github.com>
Date: Tue, 3 Oct 2023 22:12:30 +0530
Subject: [PATCH 2/3] dark mode button is added

---
 Scripts/Theme.js | 65 +++++++++++++++++++++++++++++++-----------------
 index.html       |  2 ++
 styles.css       | 12 +++++++++
 3 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/Scripts/Theme.js b/Scripts/Theme.js
index 1bf5b25..cf3768e 100644
--- a/Scripts/Theme.js
+++ b/Scripts/Theme.js
@@ -1,28 +1,47 @@
-// Function to toggle dark mode
-function toggleDarkMode() {
-    const body = document.body;
-    const header = document.querySelector('header');
-    const button = document.querySelector('#btn');
-    const word = document.querySelector('#All');
+// // Function to toggle dark mode
+// function toggleDarkMode() {
+//     const body = document.body;
+//     const header = document.querySelector('header');
+//     const button = document.querySelector('#btn');
+//     const word = document.querySelector('#All');
 
-    body.classList.toggle('dark-mode');
-    header.classList.toggle('dark-mode');
-    button.classList.toggle('dark-mode');
-    word.classList.toggle('dark-mode');
+//     body.classList.toggle('dark-mode');
+//     header.classList.toggle('dark-mode');
+//     button.classList.toggle('dark-mode');
+//     word.classList.toggle('dark-mode');
     
-    // Store the user's preference in local storage
-    if (body.classList.contains('dark-mode')) {
-        localStorage.setItem('dark-mode', 'enabled');
+//     // Store the user's preference in local storage
+//     if (body.classList.contains('dark-mode')) {
+//         localStorage.setItem('dark-mode', 'enabled');
+//     } else {
+//         localStorage.setItem('dark-mode', 'disabled');
+//     }
+// }
+
+// // Check user's preference from local storage
+// const storedTheme = localStorage.getItem('dark-mode');
+// if (storedTheme === 'enabled') {
+//     toggleDarkMode();
+// }
+
+// // Add click event listener to the theme toggle button
+// document.querySelector('#btn').addEventListener('click', toggleDarkMode);
+  // Function to toggle dark mode
+  function toggleDarkMode() {
+    const body = document.body;
+    const themeIcon = document.getElementById("themeIcon");
+
+    // Toggle dark mode class on body
+    body.classList.toggle("dark-mode");
+
+    // Toggle moon/sun icon
+    if (body.classList.contains("dark-mode")) {
+        // Dark mode is on
+        themeIcon.classList.remove("bi-moon");
+        themeIcon.classList.add("bi-sun");
     } else {
-        localStorage.setItem('dark-mode', 'disabled');
+        // Dark mode is off
+        themeIcon.classList.remove("bi-sun");
+        themeIcon.classList.add("bi-moon");
     }
 }
-
-// Check user's preference from local storage
-const storedTheme = localStorage.getItem('dark-mode');
-if (storedTheme === 'enabled') {
-    toggleDarkMode();
-}
-
-// Add click event listener to the theme toggle button
-document.querySelector('#btn').addEventListener('click', toggleDarkMode);
diff --git a/index.html b/index.html
index d5b9908..71c0c06 100644
--- a/index.html
+++ b/index.html
@@ -52,12 +52,14 @@
                             <button id="btn" class="btn btn-outline-dark btn-md" style=" border-radius: 30%;"
                                 onclick=""><i id="themeIcon" class="bi bi-brightness-high "></i></button>
                         </div> -->
+
                         <div class="theme-btn nav-link">
                             <button id="btn" class="btn btn-outline-dark btn-md" style=" border-radius: 30%;" onclick="toggleDarkMode()">
                                 <i id="themeIcon" class="bi bi-moon"></i>
                             </button>
                         </div>
                         
+                        
                     </div>
                 </div>
                 <form class="nosubmit">
diff --git a/styles.css b/styles.css
index d0c9307..cc22f61 100644
--- a/styles.css
+++ b/styles.css
@@ -3,6 +3,18 @@ html {
   margin: 0;
   padding: 0;
 }
+/* Dark mode styles */
+.dark-mode {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+/* Styles for elements in dark mode */
+.dark-mode a {
+  color: #bb86fc; /* Purple color for links in dark mode */
+}
+
+/* Additional dark mode styles for your specific elements */
 
 :root {
   --col1: #222;

From 24be2609ee39773861958345514e0aff52f64327 Mon Sep 17 00:00:00 2001
From: 29deepanshutyagi <123951725+29deepanshutyagi@users.noreply.github.com>
Date: Tue, 3 Oct 2023 22:19:44 +0530
Subject: [PATCH 3/3] new changes

---
 index.html | 22 +++++++++++++++++++++
 styles.css | 56 +++++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 71c0c06..9db71fd 100644
--- a/index.html
+++ b/index.html
@@ -452,5 +452,27 @@ <h6>Technology, Information and Internet Kanpur</h6>
                 prevEl: '.swiper-button-prev',
             }
         });
+     // Function to toggle dark mode
+function toggleDarkMode() {
+    const body = document.body;
+    const themeIcon = document.getElementById("themeIcon");
+
+    // Toggle dark mode class on body
+    body.classList.toggle("dark-mode");
+
+    // Toggle moon/sun icon
+    if (body.classList.contains("dark-mode")) {
+        // Dark mode is on
+        themeIcon.classList.remove("bi-moon");
+        themeIcon.classList.add("bi-sun");
+    } else {
+        // Dark mode is off
+        themeIcon.classList.remove("bi-sun");
+        themeIcon.classList.add("bi-moon");
+    }
+}
+
+
+
     </script>
 </body>
diff --git a/styles.css b/styles.css
index cc22f61..b66bd66 100644
--- a/styles.css
+++ b/styles.css
@@ -15,6 +15,47 @@ html {
 }
 
 /* Additional dark mode styles for your specific elements */
+/* Dark Mode */
+.dark-mode {
+  --background-light: #121212;
+  --text-light: #ffffff;
+  --link-light: #bb86fc;
+}
+/* Dark Mode Button */
+.theme-btn button {
+  background-color: var(--link-light);
+  color: var(--background-light);
+  border: none;
+  border-radius: 30%;
+  padding: 10px;
+}
+
+.theme-btn button:hover {
+  background-color: #6200ea; /* Darker purple on hover */
+}
+
+:root {
+  /* Common Styles */
+  --font-family: 'Arial', sans-serif;
+  --border-radius: 20px;
+  
+  /* Light Mode */
+  --background-light: #ffffff;
+  --text-light: #000000;
+  --link-light: #007bff; /* Blue link color */
+  
+  /* Dark Mode */
+  --background-dark: #121212;
+  --text-dark: #ffffff;
+  --link-dark: #bb86fc; /* Purple link color */
+}
+
+
+/* Updated */
+body {
+  background-color: var(--background-light);
+  color: var(--text-light);
+}
 
 :root {
   --col1: #222;
@@ -603,21 +644,6 @@ h2 {
   font-size: 20px;
   color: black;
 }
-<<<<<<< HEAD
-/* Dark mode styles */
-.dark-mode {
-  background-color: #121212;
-  color: #ffffff;
-}
-
-/* Styles for elements in dark mode */
-.dark-mode a {
-  color: #bb86fc; /* Purple color for links in dark mode */
-}
-
-/* Additional dark mode styles for your specific elements */
-=======
->>>>>>> 3ebda7635f93890788a5e467920ea3ac66c3bc3f
 
 body {
   background-color: white;