added

index.html

@@ -58,6 +58,11 @@
                 <span class="bar"></span>
                 <span class="bar"></span>
             </div>
+						<div class="dark-mode-toggle">
+							<button id="dark-mode-button">
+									<img id="dark-mode-icon" src="sun.png" alt="Toggle Dark Mode" width="50" height="50">
+							</button>
+					</div>
         </nav>
     </header>
     <!-- Navigation bar section ends  -->

script.js

@@ -244,3 +244,28 @@ if (SpeechRecognition) {
     console.log("Your Browser does not support speech Recognition");
     info.textContent = "Your Browser does not support Speech Recognition";
 }
+
+document.addEventListener('DOMContentLoaded', function() {
+	// Add event listener to the dark mode button
+	document.getElementById('dark-mode-button').addEventListener('click', toggleDarkMode);
+});
+function toggleDarkMode() {
+	// Toggle dark mode class on the body
+	document.body.classList.toggle('dark-mode');
+
+	// Toggle background image based on dark mode status
+	const backgroundImage = document.body.style.backgroundImage;
+	if (backgroundImage.includes('background.jpg')) {
+			document.body.style.backgroundImage = 'url(./assets/images/ima.jpg)';
+	} else {
+			document.body.style.backgroundImage = 'url(./assets/images/background.jpg)';
+	}
+
+	// Change the icon based on the current mode
+	const darkModeIcon = document.getElementById('dark-mode-icon');
+	if (document.body.classList.contains('dark-mode')) {
+			darkModeIcon.src = 'moon.png';
+	} else {
+			darkModeIcon.src = 'sun.png';
+	}
+}

style.css

@@ -75,6 +75,36 @@
     animation: spin 2s linear infinite;
     z-index: 99999;
 }
+#dark-mode-button {
+	border: none; /* Remove any default border */
+	background: none; /* Remove any default background */
+	padding: 0; /* Remove any default padding */
+	cursor: pointer; /* Add a pointer cursor on hover */
+}
+
+#dark-mode-icon {
+	width: 30px; /* Set the width of the image */
+	height: 30px; /* Set the height of the image */
+	border-radius: 50%; /* Make the image round */
+}
+/* Add styling for the dark mode toggle button */
+.dark-mode-toggle {
+	margin-left: auto;
+	padding-right: 20px;
+}
+
+#dark-mode-button {
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	font-size: 20px;
+	color: #000; /* Adjust color as needed */
+}
+
+.dark-mode {
+	/* background-color: #222; Change background color to dark */
+	color: #fff; /* Change text color to light */
+}
 
 #loader:before {
     content: "";