Merge pull request #1249 from Prathameshzad/Imagine_AI_team_theme

Activated Dark theme in community page and also the text

views/includes/navbar.ejs

@@ -202,27 +202,33 @@
     
 
     function toggleDarkMode() {
-      const body = document.body;
-      const navbar = document.querySelector(".navbar");
-      const aboutSection = document.querySelector(".about");
-      const darkModeToggle = document.querySelector(".dark-mode-toggle");
-
-      const darkModeIcon = document.getElementsByClassName("dark-mode-icon");
-      var darkModeIconCollection = Array.from(darkModeIcon);
-
-      body.classList.toggle("dark-mode");
-      navbar.classList.toggle("dark-mode");
-      aboutSection.classList.toggle("dark-mode");
-      // darkModeToggle.classList.toggle("dark");
-
-      darkModeIconCollection.map((darkIcon) => {
-        if (darkIcon.innerHTML === '<i class="fa-solid fa-moon" aria-hidden="true"></i>') {
-          darkIcon.innerHTML = '<i class="fa-solid fa-sun"></i>';
-        } else {
-          darkIcon.innerHTML = '<i class="fa-solid fa-moon"></i>';
-        }
-      });
+    const body = document.body;
+    const navbar = document.querySelector(".navbar");
+    const sections = document.querySelectorAll("main ,section, .about");
+    const darkModeIcon = document.querySelectorAll(".dark-mode-icon i");
+
+    body.classList.toggle("dark-mode");
+    navbar.classList.toggle("dark-mode");
+    sections.forEach(section => {
+      section.classList.toggle("dark-mode");
+    });
+
+    darkModeIcon.forEach(icon => {
+      icon.classList.toggle("fa-sun");
+      icon.classList.toggle("fa-moon");
+    });
+
+    // Store dark mode preference in local storage
+    localStorage.setItem('darkMode', body.classList.contains('dark-mode'));
+  }
+
+  // On page load, apply the theme based on local storage
+  document.addEventListener("DOMContentLoaded", () => {
+    const isDarkMode = JSON.parse(localStorage.getItem('darkMode'));
+    if (isDarkMode) {
+      toggleDarkMode(); // Apply dark mode if it was enabled
     }
+  });
   </script>
 
 </body>

views/team.ejs

@@ -73,6 +73,8 @@
   justify-content: center;
   align-items: center;
   /* padding: 35px 0; */
+
+  
 }
 
 .widget-container {
@@ -126,7 +128,7 @@
   transform: none;
 }
 
-.box-content-wrapper {
+.box-content-wrapper {  
   display: flex;
   width: 100%;
   height: 100%;
@@ -137,6 +139,10 @@
   transform: translateZ(90px);
   border-radius: 50%;
 
+  .dark-mode {
+      background-color: #121212;
+      color: #ffffff;
+    }
 
 }
 
@@ -164,6 +170,10 @@
     -webkit-text-fill-color: transparent;
 }
 
+.dark-mode .heading-contributors {
+  -webkit-text-fill-color: #fff; /* Make text white in dark mode */
+}
+
 .heading-contributors:after {
   content: "Meet our awesome contributors 💙";
   position: absolute;
@@ -191,7 +201,7 @@
 </head>
 <%- include('includes/navbar.ejs') %>
 <main>
-  <section class="Team">
+  <section class="team">
     <div class="team-top" id="slide">
       <div class="heading-contributors">Meet our awesome contributors 💙 </div>
 
@@ -281,6 +291,7 @@
     .catch((error) => {
       console.error("Error fetching contributors:", error);
     });
+
 </script>
 
 <script>
@@ -294,4 +305,12 @@
   chatbotId="fZnpFqGqi_Ol7GFejzNXo"
   domain="www.chatbase.co"
   defer>
+  </script>
+
+  <script>
+    const toggleThemeButton = document.getElementById("theme-toggle"); // Add a theme toggle button in your HTML
+toggleThemeButton.addEventListener("click", () => {
+  document.body.classList.toggle("dark-mode");
+});
+
   </script>