Improve the website appearance in both Light and Dark mode. #31

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);

index.html

@@ -48,10 +48,18 @@
                     <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">
@@ -559,5 +567,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>

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");
+        }
+    }

styles.css

@@ -3,6 +3,59 @@ 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 */
+/* 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;