Added Dark/Light Mode Features.

public/index.html

@@ -8,6 +8,8 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
+
+
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -78,14 +80,14 @@
             height: 100%;
             pointer-events: none;
             z-index: 9999;
-        } 
+        }
 
         @media (max-width: 768px) {
           .circle-container{
             display: none;
           }
         }
-        
+
   </style>
 </head>
 
@@ -198,6 +200,7 @@
       window.scrollTo({ top: 0, behavior: 'smooth' });
     };
   </script>
+  <script src="https://kit.fontawesome.com/483a9c7efd.js" crossorigin="anonymous"></script>
   <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
@@ -207,7 +210,10 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
+
     -->
+
+
 </body>
 
 </html>

src/App.js

@@ -7,18 +7,25 @@ import InternPage from "./Component/Documetation/Internship/InternPage";
 import Footer from "./Component/Footer";
 import Contact from "./Component/Contact";
 import Blog from "./Component/Documetation/Blog";
+
+import { useState , useContext } from "react";
+import "./index.css"
+
 import Contributors from "./Component/Contributors"
-import { useState } from "react";
+// import { useState } from "react";
 
 
 import FeedbackButton from "./Component/Feedbtn";
 import FeedbackModal from "./Component/Feedback";
 
 
+
 
-
+import { ThemeContext } from "./Theme";
 
 function App() {
+  const { theme } = useContext(ThemeContext);
+  // const [theme, setTheme] = useState('light');
   const [loading, setLoading] = useState(true);
   const spinner = document.getElementById("spinner");
   if (spinner) {
@@ -29,8 +36,8 @@ function App() {
   }
   return(
     !loading && (
- <div>
-      <Navbar/>
+    <div className={`App ${theme}`}>
+      <Navbar className={`${theme}`}/>
       <Routes>
         <Route path="/" element={<Home/>}/>
         <Route path="/docs" element={<Doc/>}/>
@@ -41,7 +48,7 @@ function App() {
         <Route path="/Contact" element={<Contact></Contact>}/>
         <Route path="*" element={<Error/>}/>
       </Routes>
-      <Footer/> 
+      <Footer/>
     </div>)
   );
 }

src/Component/Contact.css

@@ -9,18 +9,18 @@
   flex-direction: column;
   gap:20px;
   justify-content:space-evenly;
-  color:white;
+  color: var(--text-primary);
 }
 h1{
-  color:white;
+  color: var(--text-primary);
 }
 input{
   height:60px;
   width: 100%;
   padding-left: 50px;
   border-radius: 60px;
   border:none;
-  color: white;
+  color: var(--text-primary);
   border: 1px solid white;
   background: transparent;
   font-size: 18px;

src/Component/Documetation/Internship/internpage.css

@@ -8,6 +8,9 @@
 
 body {
     background-color: black;
+
+    /* new color added */
+    /* background-color: var(--bg-navbar); */
 }
 
 .internBox {

src/Component/FAQ.css

@@ -23,7 +23,8 @@
     margin-bottom: 2rem;
     font-weight: 700;
     text-align: center;
-    color: #ffffff;
+    /* color: #ffffff; */
+    color: var(--text-primary);
 }
 
 @media screen and (max-width:768px) {

src/Component/Footer.css

@@ -1,31 +1,35 @@
 .footer {
-	background-color: #000000;
+	background-color: var(--bg-primary);
 	color: #ffffff;
-	padding: 0px 20px;
+	padding: 40px 20px;
   }
-  
+
   .footer-wrapper {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 	gap: 40px;
 	max-width: 1200px;
 	margin: 0 auto;
   }
-  
+
   .footer-section {
 	text-align: left;
 	margin-left: 3rem;
 	margin-bottom: 3rem;
   }
-  
+
   .footer-title {
 	display: flex;
 	align-items: center;
 	font-size: 1.8em;
 	color: #8a2be2;
 	margin-bottom: 10px;
   }
-
+
+  /* .footer-favicon {
+	margin-right: 10px;
+	width: 30px;
+  } */
   .footer-favicon {
 	padding: 2px;
 	margin-right:5px;
@@ -38,59 +42,50 @@
   .footer-pera {
 	font-size: 1.1em;
 	margin: 10px 0;
-	color: #ccc;
+	color: var(--bg-navbar1);
   }
-  
+
   .footer-heading {
 	font-size: 1.4em;
 	color: #8a2be2;
 	margin-bottom: 10px;
   }
 
+  /* .footer-links {
+	list-style: none;
+	padding: 0;
+	font-size: 1em;
+  }
+
+  .footer-links li {
+	margin: 5px 0;
+	cursor: none;
+	color: #ccc;
+	transition: color 0.3s;
+  }
+
+  .footer-links li:hover {
+	color: #8a2be2;
+	cursor: none;
+  } */
+
   .footer-links {
 	list-style-type: none;
 	padding: 0;
   }
-  
+
   .footer-links li {
 	font-size: 18px;
 	cursor: pointer;
 	margin-bottom: 10px;
   }
-
-  .footer-links li span a {
-	position: relative;
-	color: white;
-	text-decoration: none;
-  }
-
-  .footer-links li span a::after {
-	content: '';
-	position: absolute;
-	width: 0%;
-	height: 2px;
-	bottom: -5px;
-	left: 0;
-	background-color: white;
-	transition: all 0.3s ease-in-out;
-  }
-
-  .footer-links li:hover span a{
-	color: #8a2be2;
-  }
-
-  .footer-links li:hover span a::after {
-	width: 100%;
-	background-color: #8a2be2;
-  }
-
-  .footer-links li span  {
+
+  .footer-links li span {
 	position: relative;
-	color: white;
-	text-decoration: none;
+	color: var(--bg-navbar1);
   }
-  
-  .footer-links li span ::after {
+
+  .footer-links li span::after {
 	content: '';
 	position: absolute;
 	width: 0%;
@@ -100,35 +95,35 @@
 	background-color: white;
 	transition: all 0.3s ease-in-out;
   }
-  
+
   .footer-links li:hover span {
 	color: #8a2be2;
   }
-  
-  .footer-links li:hover span ::after {
+
+  .footer-links li:hover span::after {
 	width: 100%;
 	background-color: #8a2be2;
   }
-	
-  
+
+
   .footer-social-icons {
 
 	display: flex;
 	gap: 15px;
 	margin: 10px 0;
   }
-  
+
   .footer-social-icons a {
-	color: #ccc;
+	color: var(--bg-navbar1);
 	font-size: 1.5em;
 	transition: color 0.3s, transform 0.3s;
   }
-  
+
   .footer-social-icons a:hover  {
 	color: #8a2be2;
 	transform: scale(1.2);
   }
-  
+
   .footer-qr {
 	width: 110px;
 	margin: 14 auto 1.5px;
@@ -138,17 +133,18 @@
   }
   .rate-us{
 	margin-top: 0.2rem;
+	color: var(--bg-navbar1);
   }
   .copy {
 	text-align: center;
 	padding: 20px 0;
 	border-top: 1px solid #333;
 	font-size: 0.9em;
+	color: var(--bg-navbar1);
   }
-  
+
   @media screen and (max-width: 600px) {
 	.copy {
 	  font-size: 0.8em;
 	}
   }
-

src/Component/Header.js

@@ -2,9 +2,12 @@ import React from 'react'
 import './h.css'
 function Header() {
   return (
+
     <div className='header' style={{width:'100vw'}}>
-lorem
+     lorem
     </div>
+
+
   )
 }
 

src/Component/Home.jsx

@@ -36,6 +36,7 @@ function Home() {
 
 
   return (
+
     <div>
       <div className="page_0">
         <div className="bx-1">
@@ -68,7 +69,7 @@ function Home() {
           <div className="wrapper-bx-1 ">
             <div className="sub_title">About us</div>
 
-            
+
             <p className="peragraph" style={{ textAlign: 'center' }}>Find your first internship</p>
 
             <p className="peragraph" style={{ textAlign: 'center' }}>Kickstart Your Career: Discover Your First Internship Today!</p>
@@ -158,8 +159,8 @@ function Home() {
           <h5 className='license'>MIT License</h5>
           <h4 className='pd '>Code of Conduct</h4>
           </div>
-         
-          
+
+
           <button size="size" type="defautl" className='button-star'>
             {' '}
            < FaStar style={{margin:"-2px 2px",lineHeight:"2px"}} />Star us