Merge pull request #178 from Ayushmaanagarwal1211/Dark-mode

Added Dark Mode

package.json

@@ -17,6 +17,7 @@
     "bootstrap": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-parallax-tilt": "^1.7.229",
     "react-player": "^2.16.0",
     "react-router-dom": "^6.23.1",

src/App.jsx

@@ -24,11 +24,28 @@ import ContributorDetail from "./pages/contributor/ContributorDetail";
 
 import SignIn from "./pages/auth/SignIn";
 import SignUp from "./pages/auth/SignUp";
+import { createContext } from 'react';
 
+
+//theme context
+export const ThemeContext = createContext(null);
 function App() {
   const [progress, setProgress] = useState(0);
-
+  const [theme, setTheme] = useState("light");
+
+  //Toggle theme
+  const toggleTheme = () => {
+    console.log('cliocking')
+document.body.classList.toggle('dark')
+    if(theme=='dark'){
+      setTheme('light')
+    }else{
+      setTheme('dark')
+    }
+  }
   return (
+    <ThemeContext.Provider value={{theme, toggleTheme}}>
+
     <div className='container d-flex flex-column min-vh-100'>
       <Router>
         <Navbar />
@@ -72,6 +89,7 @@ function App() {
         <Footer />
       </Router>
     </div>
+    </ThemeContext.Provider>
   );
 }
 

src/components/shared/Navbar.jsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import { ThemeContext } from '../../App';
+import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
-
+import {FaSun,FaMoon} from 'react-icons/fa6'
 const Navbar = () => {
+  let {theme,toggleTheme}=useContext(ThemeContext)
   return (
     <nav className="navbar navbar-expand-lg navbar-dark bg-dark mt-2 rounded">
       <div className="container-fluid">
@@ -50,6 +52,8 @@ const Navbar = () => {
                 <button type='button' className='btn btn-light'>Sign Up</button>
               </Link>
             </li>
+            <li onClick={toggleTheme} className='mode'>
+              {theme == 'dark' ?<FaSun style={{color:"white"}}/>:<FaMoon style={{color:"white"}}/> }</li>
           </ul>
         </div>
       </div>

src/css/About.css

@@ -7,7 +7,11 @@
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
-
+.dark .about-container{
+  background-color: black;
+  border: 2px solid white ;
+  color: white ;
+}
 .about-container h1 {
   text-align: center;
   color: #874343;
@@ -49,7 +53,9 @@
   margin-bottom: 10px;
   color: #780d0d;
 }
-
+.dark .about-text ul li {
+  color: rgb(241, 66, 66);
+}
 blockquote {
   margin: 20px 0;
   padding: 10px 20px;
@@ -58,7 +64,10 @@ blockquote {
   font-style: italic;
   color: #333;
 }
-
+.dark blockquote{
+  background-color: black;
+  color: white;
+}
 @media (min-width: 768px) {
   .about-image {
     width: 35%;
@@ -83,4 +92,7 @@ blockquote {
   {
     font-size: 20px;
   }
+}
+.dark .about-text{
+  color:white !important;
 }

src/css/Contributor.css

@@ -9,7 +9,12 @@
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
     transition: all 0.3s ease;
   }
-
+  .dark .card{
+    background-color: black;
+    box-shadow: 0px 0px 5px white;
+    color: white ;
+
+  }
   .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(31, 38, 135, 0.5);

src/css/Home.css

@@ -304,3 +304,23 @@
     box-shadow: 0 0 0 45px rgba(0, 0, 0, 0);
   }
 }
+.dark .feat-3{
+  background-color: black;
+  color: white;
+}
+.dark .feat-card-2{
+  background-color: black;
+  box-shadow: 0px 0px 10px white;
+  border: solid white 2px;
+}
+.dark .feat-card{
+  background-color: black ;
+  box-shadow: 0px 0px 10px white;
+  color: white;
+}
+.mode{
+display: flex;
+justify-content: center;
+align-items: center;
+font-size: 1.5rem;
+}

src/index.css

@@ -1,3 +1,7 @@
 *{
 cursor: url('/src/assets/CURSOR1.png'),auto;
 }
+.dark {
+  background-color: black;
+  color: white;
+}