From 47fb86bbadcfe51882fee45b366a08074a1eac01 Mon Sep 17 00:00:00 2001
From: Suhaina Fathima M <153417476+SuhainaFathimaM@users.noreply.github.com>
Date: Sat, 24 Aug 2024 23:32:07 +0530
Subject: [PATCH 1/3] added toggle button to index.html

---
 Website/index.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/Website/index.html b/Website/index.html
index 1d42b0438..70d5d2200 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -26,6 +26,11 @@
                         <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" width="25" height="25"> <!-- GitHub Icon -->
                     </a>
                 </li>
+                <li>
+                    <button id="toggle-dark-mode">
+                        <i class="fas fa-moon"></i> 
+                    </button>
+                </li>
             </ul>
         </nav>
     </header>

From bd7b7c0f50258bbbc0cb1729c38eaa72f87ccbe0 Mon Sep 17 00:00:00 2001
From: Suhaina Fathima M <153417476+SuhainaFathimaM@users.noreply.github.com>
Date: Sat, 24 Aug 2024 23:32:58 +0530
Subject: [PATCH 2/3] added dark mode and styles for toggle button in
 styles.css

---
 Website/styles.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/Website/styles.css b/Website/styles.css
index ea9e93a46..1a02b0fab 100644
--- a/Website/styles.css
+++ b/Website/styles.css
@@ -602,3 +602,72 @@ button#toggle-languages:hover {
     opacity: 0.9;
 }
 
+/* Dark Mode Styles */
+body.dark-mode {
+    background-color: #121245; 
+    color: #f1f1f1; 
+}
+
+.dark-mode .navbar {
+    background-color: #000; 
+}
+
+.dark-mode .nav-links a {
+    color: #fff;
+}
+
+.dark-mode .welcome-title {
+    color: #fff; 
+}
+
+.dark-mode .highlight {
+    color: #fff; 
+}
+
+.dark-mode .stat-card {
+    background-color: #212148;
+}
+
+.dark-mode .stat-card h3 {
+    color: #fff;
+}
+
+.dark-mode .stat-card p {
+    color: rgb(255, 213, 98);
+}
+
+.dark-mode .stat-icon {
+    color: #fff;
+}
+
+.dark-mode .stat-card:hover {
+    background-color: #151537;
+}
+
+.dark-mode .stat-card:hover .stat-icon{
+    color: #fff;
+}
+
+
+#toggle-dark-mode {
+    background: none;
+    border: none;
+    color: #f1f1f1;
+    cursor: pointer;
+    font-size: 1.2em;
+    transition: color 0.3s ease;
+}
+
+.dark-mode .welcome-section a{
+    color: #cfd9e5;
+}
+
+#toggle-dark-mode i {
+    font-size: 1.5em;
+}
+
+#toggle-dark-mode:hover {
+    color: #fff;
+}
+
+

From 3751fa7944ae29b0e8610ae3bc02d3b597325273 Mon Sep 17 00:00:00 2001
From: Suhaina Fathima M <153417476+SuhainaFathimaM@users.noreply.github.com>
Date: Sat, 24 Aug 2024 23:33:43 +0530
Subject: [PATCH 3/3] added appropriate js to script.js

---
 Website/js/script.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/Website/js/script.js b/Website/js/script.js
index b0b3ca03a..98380ae75 100644
--- a/Website/js/script.js
+++ b/Website/js/script.js
@@ -241,3 +241,13 @@ document.addEventListener("DOMContentLoaded", function() {
     }
 });
 
+const toggleDarkModeButton = document.getElementById('toggle-dark-mode');
+const body = document.body;
+
+toggleDarkModeButton.addEventListener('click', () => {
+    body.classList.toggle('dark-mode');
+    // Change icon based on dark mode status
+    const icon = toggleDarkModeButton.querySelector('i');
+    icon.classList.toggle('fa-moon');
+    icon.classList.toggle('fa-sun');
+});