Merge pull request #85 from meghanakn473/main

dark mode feature (issue#13)

index.html

@@ -12,6 +12,10 @@
 
     <link rel="stylesheet" href="style.css">
     <style>
+<label for="dark-mode-toggle">
+    <input type="checkbox" id="dark-mode-toggle" />
+    Toggle Dark Mode
+</label>
 
         /* Features Section */
         .features {
@@ -398,4 +402,4 @@ <h3>Connect With Us</h3>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 </body>
-</html>
+</html>

script.js

@@ -0,0 +1,19 @@
+const toggleSwitch = document.getElementById('dark-mode-toggle');
+
+// Check for saved user preference in local storage
+const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
+
+if (currentTheme) {
+    document.body.classList.toggle('dark-mode', currentTheme === 'dark');
+    toggleSwitch.checked = currentTheme === 'dark';
+}
+
+toggleSwitch.addEventListener('change', () => {
+    document.body.classList.toggle('dark-mode');
+    // Save preference to local storage
+    if (document.body.classList.contains('dark-mode')) {
+        localStorage.setItem('theme', 'dark');
+    } else {
+        localStorage.setItem('theme', 'light');
+    }
+});

style.css

@@ -115,6 +115,25 @@ header .fa-bars{
     border: .1rem solid rgba(0,0,0,0.3);
     display: none;
 }
+/* Default light mode styles */
+body {
+    background-color: #ffffff;
+    color: #000000;
+}
+
+/* Dark mode styles */
+.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}
+
+.dark-mode button {
+    background-color: #1e1e1e;
+    color: #ffffff;
+}
+
+/* Add more styles as needed for other elements */
+
 
 .home{
     display: flex;
@@ -229,4 +248,4 @@ header .fa-bars{
         font-size: 3rem;
     }
 
-}
+}