Created dark Mode

src/Content/context.js

@@ -0,0 +1,30 @@
+// ThemeContext.js
+import React, { createContext, useState, useEffect } from 'react';
+
+export const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState(() => {
+    return localStorage.getItem('theme') || 'light';
+  });
+
+  useEffect(() => {
+    localStorage.setItem('theme',theme)
+    if(theme=='light'){
+      document.getElementsByTagName('body')[0].className='';
+    }  else{
+
+      document.getElementsByTagName('body')[0].className='active';
+    }
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

src/components/about/About.jsx

@@ -1,16 +1,21 @@
 // src/About.js
-import React from 'react';
+import React, { useContext } from 'react';
 import './about.css';
 import Header from '../../pages/header';
 import image from '../../assets/book.png'
 import resource from '../../assets/resource.png'
 import benefit from '../../assets/benefits.png'
 import { Link } from 'react-router-dom';
+import { ThemeContext } from '../../Content/context';
 
 // import sun from './images/sun.png'; // Example image import
 // import moon from './images/moon.png'; // Example image import
 
 const About = () => {
+  let {theme}=useContext(ThemeContext)
+  if(theme=='dark'){
+    document.getElementsByTagName('body')[0].classList.toggle('active')
+  }
     return (
      <>
      <Header />

src/components/login/LoginSignup.css

@@ -4,6 +4,38 @@
     background: #E6E6FA;
     padding: 50px;
 }
+.active{
+    background-color: #000016 !important;
+    color: white !important;
+  }
+  .active div , .active button{
+    background-color: #000016 !important;
+    color: white !important;
+
+  }
+  .active .card , .active .book ,.active .box , .active .ag-courses-item_title, .active .ag-courses_item {
+    background-color: #000000 !important;
+    color: white !important;
+    box-shadow: 0px 0px 15px lightblue;
+
+  }
+  .active .text-box-in , .active div{
+    color: white !important;
+  }
+  .active .ag-courses-item_bg{
+    background-color: #f9b234 !important;
+  }
+  .active .loginsignup-cointainer{
+    border: white solid 2px ;
+    box-shadow: 0px 0px 15px white;
+  }
+  .active button{
+  border: solid 1px white;
+  box-shadow: 0px 0px 15px lightblue;
+  }
+  .active h1, .active h2 , .active p,.active b{
+    color: white !important;
+  }
 .loginsignup-cointainer{
     width: 580px;
     height: auto;

src/components/login/LoginSignup.jsx

@@ -1,10 +1,11 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { Link } from "react-router-dom"; // Import Link
 import { FaArrowLeft } from "react-icons/fa"; // Import Font Awesome arrow left icon
 import "./LoginSignup.css";
 import { FaEye, FaEyeSlash } from 'react-icons/fa6'
+import { ThemeContext } from "../../Content/context";
 const LoginSignup = () => {
-
+  let {theme}=useContext(ThemeContext)
   const [state, setState] = useState("Sign Up");
   const [isVisible, setIsVisible] = useState(false);
 
@@ -94,7 +95,7 @@ const LoginSignup = () => {
     }
   };
   return (
-    <div className="loginsignup">
+    <div className={`${theme=='dark'?"active":""} loginsignup`}>
 
       <Link to="/" className="back-icon" style={{ position: 'absolute', top: '15px', left: '35px', fontSize: '42px' }}>
         <svg

src/components/page1/Home.css

@@ -3,7 +3,41 @@
     justify-content: center;
 
 }
+.active{
+  background-color: #000016 !important;
+  color: white !important;
+}
+
+.active div , .active button{
+  background-color: #000016 !important;
+  color: white !important;
+
+}
+.active .card , .active .book ,.active .box , .active .ag-courses-item_title, .active .ag-courses_item {
+  background-color: #000000 !important;
+  color: white !;
+  box-shadow: 0px 0px 15px lightblue;
 
+}
+.active .text-box-in , .active div{
+  color: white !important;
+}
+.active .ag-courses-item_bg{
+  background-color: #f9b234 !important;
+}
+.active button{
+border: solid 1px white;
+box-shadow: 0px 0px 15px lightblue;
+}
+.active h1, .active h2 , .active p,.active b{
+  color: white !important;
+}
+.active .cover p{
+  color: rgb(4, 46, 61) !important;
+}
+.active .book{
+  color: black !important;
+}
 .container{
     display: flex;
     flex-wrap: wrap;

src/components/page1/Home.js

@@ -1,26 +1,48 @@
-import React from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import '../page1/Home.css';
 import {Link} from 'react-router-dom';
+import { ThemeContext } from '../../Content/context';
+
 function Home() {
+  let {theme,toggleTheme} =useContext(ThemeContext)
+
+  const [value, setValue] = useState(() => {
+    return localStorage.getItem('mode');
+  });
+  useEffect(() => {
+    const handleStorageChange = (event) => {
+      if (event.key === 'mode') {
+        setValue(event.newValue);
+      }
+      console.log('mpde')
+    };
+
+    window.addEventListener('storage', ()=>console.log('dfdfdf'));
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  });
+
   return (
     <div>
         <div className="title">
          <h2>Visit your year</h2>
         </div>
 
-      <div class="container">
+      <div class={` container`}>
 
       <div class="main">
   <div class="up">
 
   <Link to='/fstyear'>
-    <button class="card1">
+    <button class={`card1`}>
       <h3>1st</h3>
     </button>
     </Link>
 
     <Link to="/sndyear">
-    <button class="card2">
+    <button class={`${theme=="light"?"":"dark-mode-card"} card2`}>
       <h3>2nd</h3>
      </button>
      </Link>
@@ -30,13 +52,13 @@ function Home() {
 
   <div class="down">
     <Link to="/trdyear">
-    <button class="card3">
+    <button class={`${theme=="light"?"":"dark-mode-card"} card3`}>
       <h3>3rd</h3>
      </button>
      </Link>
 
 <Link to='/fothyear'>
-    <button class="card4">
+    <button class={`${theme=="light"?"":"dark-mode-card"} card4`}>
       <h3>4th</h3>
     </button>
     </Link>

src/components/review/review.css

@@ -329,3 +329,15 @@ section
         width: 100%;
     }
 }
+
+input[type=radio]{
+    display: none;
+}
+
+.star{
+    cursor: pointer;
+}
+
+label{
+    margin-bottom: 0.4rem;
+}

src/components/review/review.jsx

@@ -1,17 +1,25 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { ToastContainer, toast } from 'react-toastify';
 import { Link } from "react-router-dom"; // Import Link
+import { FaStar } from "react-icons/fa";
 import 'react-toastify/dist/ReactToastify.css';
 import './review.css';
 
 const ReviewPage = () => {
+  const [rating, setRating] = useState(null);
+  const [hover, setHover] = useState(null);
+
   const [formData, setFormData] = useState({
     name: '',
     email: '',
     rating: '',
     review: ''
   });
 
+  useEffect(() => {
+    setFormData({ ...formData, rating: rating });
+  }, [rating]);
+
   const handleChange = (e) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
@@ -48,6 +56,7 @@ const ReviewPage = () => {
       rating: '',
       review: ''
     });
+    setRating(null);
   };
 
   return (
@@ -96,9 +105,27 @@ const ReviewPage = () => {
               <label>Email Address</label>
                 <input placeholder="[email protected]" type="email" name="email" value={formData.email} onChange={handleChange} required />
               </div>
+              <label>Rate Us</label>
               <div className="inputBox w100">
-                <input type="number" name="rating" value={formData.rating} onChange={handleChange} required />
-                <span>Rating (1-5)</span>
+                {[...Array(5)].map((star, index) => {
+                  const currentRating = index + 1;
+                  return (
+                    <label key={index}>
+                      <input
+                        type="radio"
+                        name="rating"
+                        value={currentRating}
+                        onClick={() => setRating(currentRating)}
+                      />
+                      <FaStar
+                        size={20}
+                        color={currentRating <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
+                        onMouseEnter={() => setHover(currentRating)}
+                        onMouseLeave={() => setHover(null)}
+                      />
+                    </label>
+                  );
+                })}
               </div>
               <div className="inputBox w100">
                 <label>Your Feedback</label>
@@ -115,4 +142,4 @@ const ReviewPage = () => {
     </section>
   );
 };
-export default ReviewPage;
+export default ReviewPage;

src/index.js

@@ -33,6 +33,7 @@ import {
 import "./index.css";
 import LoginSignup from './components/login/LoginSignup.jsx';
 import ReviewPage from './components/review/review.jsx';
+import { ThemeContext, ThemeProvider } from './Content/context.js';
 
 
 // const ThemeContext = createContext();
@@ -160,7 +161,10 @@ ReactDOM.createRoot(document.getElementById("root")).render(
 
 
   <React.StrictMode>
+    <ThemeProvider>
+
     <RouterProvider router={router} />
+    </ThemeProvider>
 
     {/* <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
       {children}

src/pages/header.js

@@ -1,13 +1,21 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import './header.css';
 import {Link} from "react-router-dom";
 import { colors } from '@mui/material';
+import { ThemeContext } from '../Content/context';
 // import { useTheme } from '../index';
 
-
+import {HiSun,HiMoon} from 'react-icons/hi2'
 
 function Header() {
-
+    let {theme,toggleTheme} =useContext(ThemeContext)
+    function handleClick(e){
+            if(theme=="dark"){
+                toggleTheme('light')
+            }else{
+                toggleTheme('dark')
+            }
+    }
     //  const {isDarkMode, togglerDarkMode} =useTheme();
 
   return (      
@@ -28,6 +36,10 @@ function Header() {
             <a href="/about" className="logo link1" style={{ padding: 10, margin: 5, height: 30, width: 80 }}>
                 <b>About Us</b>
             </a>
+         {
+
+         theme=='dark'? <HiSun size={"3rem"} onClick={handleClick}/>:<HiMoon size={"3rem"} onClick={handleClick}/>
+         }  
         </div>
     </div>
 </div>