Merge pull request #3301 from venkatsai2027/dark-mode-feature

Dark mode feature added
zero-to-mastery · Sep 21, 2024 · da47380 · da47380
2 parents d7c6b42 + 3a9d785
commit da47380
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 1 deletion.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import Search from './Search'
 import '../styles/SearchBarDesktopView.scss'
 import { pageNames } from '../util/pageNames'
@@ -12,6 +12,30 @@ const Navbar = ({
     mapOrHomeTitle,
     shufflePeopleOnClick,
 }: any) => {
+    const [isDarkMode, setIsDarkMode] = useState(false)
+
+    // Check if dark mode is already set in localStorage
+    useEffect(() => {
+        const savedTheme = localStorage.getItem('theme')
+        if (savedTheme === 'dark') {
+            setIsDarkMode(true)
+            document.body.classList.add('dark-mode')
+        }
+    }, [])
+
+    // Toggle dark mode
+    const handleDarkModeToggle = () => {
+        const newMode = !isDarkMode
+        setIsDarkMode(newMode)
+        if (newMode) {
+            document.body.classList.add('dark-mode')
+            localStorage.setItem('theme', 'dark')
+        } else {
+            document.body.classList.remove('dark-mode')
+            localStorage.setItem('theme', 'light')
+        }
+    }
+
     return (
         <div className="header-items flex flex-wrap justify-between">
             <h1
@@ -50,6 +74,10 @@ const Navbar = ({
                         <Search onSearchChange={onSearchChange} />
                     </div>
                 )}
+                {/* Dark mode toggle button */}
+                <button onClick={handleDarkModeToggle} className="ml3 pointer">
+                    {isDarkMode ? 'Light Mode' : 'Dark Mode'}
+                </button>
             </div>
         </div>
     )

diff --git a/src/styles/SearchBarDesktopView.scss b/src/styles/SearchBarDesktopView.scss
@@ -9,3 +9,41 @@
         display: none;
     }
 }
+/* Light mode (default) */
+body {
+    background-color: #f5f5f5;
+    color: #212121;
+}
+
+.header-items {
+    background-color: #212121;
+    color: #ffffff;
+}
+
+/* Dark mode */
+body.dark-mode {
+    background-color: #212121;
+    color: #212121;
+}
+
+.header-items.dark-mode {
+    background-color: #333333;
+    color: #fff;
+}
+
+button {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    font-family: 'Roboto Condensed', sans-serif;
+    font-size: 24px;
+}
+
+/* Dark mode button styles */
+body.dark-mode button {
+    background-color: var(--secondary-color);
+    color: white;
+}
diff --git a/src/styles/SearchBarMobileView.scss b/src/styles/SearchBarMobileView.scss
@@ -14,3 +14,41 @@
         top: 80%;
     }
 }
+/* Light mode (default) */
+body {
+    background-color: #f5f5f5;
+    color: #212121;
+}
+
+.header-items {
+    background-color: #212121;
+    color: #ffffff;
+}
+
+/* Dark mode */
+body.dark-mode {
+    background-color: #212121;
+    color: #212121;
+}
+
+.header-items.dark-mode {
+    background-color: #333333;
+    color: #fff;
+}
+
+button {
+    background-color: var(--primary-color);
+    color: red;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    font-family: 'Roboto Condensed', sans-serif;
+    font-size: 24px;
+}
+
+/* Dark mode button styles */
+body.dark-mode button {
+    background-color: var(--secondary-color);
+    color: blue;
+}