Created Dark mode

frontend/src/App.js

@@ -14,6 +14,7 @@ import NotFoundPage from './pages/404Page';
 
 import Root,{loader as loadingAction} from './pages/Root';
 import Search from './pages/Search';
+import { DarkModeProvider } from './components/ToggleMode/DarkModeContext';
 
 
 const router = createBrowserRouter([
@@ -65,8 +66,11 @@ const router = createBrowserRouter([
   }
 ]);
 function App() {
-  return (<RouterProvider router={router} />);
-}
+  return (
+  <DarkModeProvider>
+    <RouterProvider router={router} />
+  </DarkModeProvider>
+);}
 
 export default App;
 

frontend/src/components/LoginComponents/Input.js

@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useContext, useState } from 'react'
+import { DarkModeContext } from '../ToggleMode/DarkModeContext';
 export default function Input({text,type,placeholder,onSetData,name}) {
-
+  const {isDarkMode}=useContext(DarkModeContext)
   function setInput(e)
   {
     onSetData((data)=>{
@@ -13,8 +14,8 @@ export default function Input({text,type,placeholder,onSetData,name}) {
 
   return (
     <div className='mt-3 '>
-          <div className='font-poppiins font-medium mb-2 text-[#BFBFBF] '>{text}</div>
-          <input spellCheck="false" onChange={setInput}type={type} className='outline-0 border-[1px] rounded-md w-[100%] px-2 py-2  font-poppins border-[#BFBFBF]' placeholder={placeholder}></input>
+          <div className={`font-poppiins font-medium mb-2 text-[#BFBFBF] ${isDarkMode?"text-white outline-none border-none border-b-2 border-white":""}`}>{text}</div>
+          <input spellCheck="false" onChange={setInput}type={type} className={` outline-0 border-[1px] rounded-md w-[100%] px-2 py-2  font-poppins border-[#BFBFBF]`}   placeholder={placeholder}></input>
         </div>
   )
 }

frontend/src/components/LoginComponents/Main.js

@@ -1,4 +1,4 @@
-import React,{useState} from 'react'
+import React,{useContext, useState} from 'react'
 import { Link } from 'react-router-dom'
 import Input from './Input'
 import Square from './Square'
@@ -14,10 +14,14 @@ import LockOpenIcon from '@mui/icons-material/LockOpen';
 import { ToastContainer, toast } from "react-toastify";
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import { DarkModeContext } from '../ToggleMode/DarkModeContext'
+import {FaSun,FaMoon} from 'react-icons/fa6'
+
 export default function Main() {
 
 
   const submit=useSubmit();
+  const {isDarkMode,toggleMode}=useContext(DarkModeContext)
   const [loginData,setloginData]=useState({email:'',password:''});
   const [submitting,setSubmiting]=useState(false)
   const [showPassword, setShowPassword] = useState(false);
@@ -73,18 +77,23 @@ export default function Main() {
   const handleMouseDownPassword = (event) => event.preventDefault(); // Prevent default action on mouse down
 
   return (
-    <div className='flex flex-col items-center h-[100vh] w-[100vw] relative overflow-hidden px-2'>
+    <>
+
+                    <div className='absolute right-10 z-[99] top-8'><button onClick={toggleMode}>{isDarkMode?<FaSun color='white' className='z-[99]' size={'2rem'}/>:<FaMoon size={'2rem'} className='z-[99]' />}</button></div>
+
+    <div className={`flex flex-col ${isDarkMode?"bg-black":""} items-center h-[100vh] w-[100vw] relative overflow-hidden px-2`}>
+
     <Square></Square>
     <Square isRight={true}></Square>
-  <Paper className='z-20 w-full max-w-[370px] p-[2rem] my-auto' elevation={3}>
+  <Paper className={`  z-20 w-full max-w-[370px] p-[2rem] my-auto`} style={{backgroundColor:`${isDarkMode?"rgba(255,255,255,0.1)":""}`}} elevation={3}>
 
-        <div className='font-Poppins text-3xl font-extrabold flex items-center flex-col'>
+        <div className={`${isDarkMode?"text-white":""} font-Poppins text-3xl font-extrabold flex items-center flex-col`}>
         <LockOpenIcon fontSize='large' color='primary'/>
           <Typography variant='h5'>Log In</Typography>
         </div>
 <br />
 <hr></hr>
-<form className='mt-6 relative'>
+<form className={` mt-6 relative`}>
   <Input onSetData={setloginData}  name='email' text="Email ID" placeholder="Email address" type='text'></Input>
   <div className='relative'>
             <Input
@@ -112,7 +121,7 @@ export default function Main() {
     </Box>}
     </Button>
   </div>
-  <Typography className='text-center py-3'>Already have and account ? <Link className='text-blue-600' to="/signup">SignUp</Link></Typography>
+  <Typography className={`${isDarkMode?"text-white":""} text-center py-3`}>Already have and account ? <Link className='text-blue-600' to="/signup">SignUp</Link></Typography>
 
   <div className='h-[1px] w-[100%] mt-10 bg-[#808080]'></div>
   <div className='flex flex-col items-center mt-6'>
@@ -123,5 +132,6 @@ export default function Main() {
 </form>
 </Paper>
 </div>
+</>
   )
 }

frontend/src/components/SignupComponents/Main.js

@@ -1,4 +1,4 @@
-import React,{useState} from 'react'
+import React,{useContext, useState} from 'react'
 import Input from '../LoginComponents/Input'
 import Square from '../LoginComponents/Square'
 import { GoogleLogin } from '@react-oauth/google'
@@ -13,12 +13,15 @@ import HowToRegIcon from '@mui/icons-material/HowToReg';
 import { ToastContainer, toast } from "react-toastify";
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import { DarkModeContext } from '../ToggleMode/DarkModeContext';
+import {FaSun,FaMoon} from 'react-icons/fa6'
 
 export default function Main() {
 
 
   const navigation=useNavigation();
   const submit=useSubmit();
+  const {isDarkMode,toggleMode}=useContext(DarkModeContext)
   const [SignUpData,setSignUpData]=useState({name:'',email:'',password:''});
   const[submiting,setSubmiting]=useState(false);
   const [showPassword, setShowPassword] = useState(false);
@@ -143,18 +146,21 @@ export default function Main() {
   const handleClickShowPassword = () => setShowPassword(!showPassword); // Toggle password visibility
   const handleMouseDownPassword = (event) => event.preventDefault(); // Prevent default action on mouse down
   return (
-    <div className='flex flex-col items-center h-[100vh] w-[100vw] relative overflow-hidden px-2'>
+    <>
+                        <div className='absolute right-10 z-[99] top-8'><button onClick={toggleMode}>{isDarkMode?<FaSun color='white' className='z-[99]' size={'2rem'}/>:<FaMoon size={'2rem'} className='z-[99]' />}</button></div>
+
+    <div className={`flex flex-col items-center h-[100vh] w-[100vw] relative overflow-hidden px-2 ${isDarkMode?"bg-black":""} `}>
     <Square></Square>
     <Square isRight={true}></Square>
-  <Paper className='z-20 w-full max-w-[370px] p-[2rem] my-auto' elevation={3}>
-        <div className='font-Poppins text-3xl font-extrabold flex items-center flex-col'>
+  <Paper className='z-20 w-full max-w-[370px] p-[2rem] my-auto' style={{backgroundColor:`${isDarkMode?"rgba(255,255,255,0.1)":""}`}}  elevation={3}>
+        <div className={`font-Poppins text-3xl font-extrabold flex items-center flex-col ${isDarkMode?"text-white":""}`}>
         <HowToRegIcon fontSize='large' color='primary'/>
           <Typography variant='h5'>Sign Up</Typography>
         </div>
 <br />
 <hr></hr>
 <form className='mt-6 relative'>
-  <Input onSetData={setSignUpData} name='name' text='Name' placeholder='Enter your name' type='text'></Input>
+  <Input  onSetData={setSignUpData} name='name' text='Name' placeholder='Enter your name' type='text'></Input>
   <Input onSetData={setSignUpData} name='email' text="Email ID" placeholder="Enter Email Address" type='text'></Input>
   <div className='relative'>
             <Input
@@ -182,14 +188,14 @@ export default function Main() {
     </Box>}
   </Button>
   </div>
-  <Typography className='text-center py-3'>Already have and account ? <Link className='text-blue-600' to="/login">LogIn</Link></Typography>
+  <Typography className={`${isDarkMode?"text-white":""} text-center py-3 `}>Already have and account ? <Link className='text-blue-600' to="/login">LogIn</Link></Typography>
   <div className='h-[1px] w-[100%] mt-4 bg-[#808080]'></div>
   <div className='flex flex-col items-center mt-6'>
       {/* <Link to='/signup' className='text-[#5A5A5A] font-medium border-2 border-[#5A5A5A] hover:border-black px-32 rounded-[40px] mt-7 py-4 tracking-wide'>SIGN UP FOR SPOTIFY</Link> */}
       <GoogleLogin onSuccess={responseMessage} onError={errorMessage} />
   </div>
 </form>
     </Paper>
-</div>
+</div></>
   )
 }

frontend/src/components/ToggleMode/DarkModeContext.js

@@ -0,0 +1,30 @@
+import React, { createContext, useEffect, useState } from 'react';
+import {FaSun,FaMoon} from 'react-icons/fa6'
+export const DarkModeContext = createContext();
+
+export function DarkModeProvider({ children }) {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    const savedMode = localStorage.getItem('mode') || 'light';
+    setIsDarkMode(savedMode === 'dark');
+  }, []);
+
+  const toggleMode = () => {
+    if (isDarkMode) {
+      setIsDarkMode(false);
+      localStorage.setItem('mode', 'light');
+    } else {
+      setIsDarkMode(true);
+      localStorage.setItem('mode', 'dark');
+    }
+  };
+
+  return (
+    <DarkModeContext.Provider value={{ isDarkMode ,toggleMode}}>
+        <div className='absolute right-10 top-8'><button onClick={toggleMode}>{isDarkMode?<FaSun color='white' size={'2rem'}/>:<FaMoon size={'2rem'} />}</button></div>
+        {children}
+
+    </DarkModeContext.Provider>
+  );
+}

frontend/src/pages/Home.js

@@ -1,21 +1,22 @@
-import React, { useEffect } from 'react'
+import React, { useContext, useEffect } from 'react'
 import NavBar from '../components/HomeComponents/NavBar'
 import Description from '../components/HomeComponents/Description'
 import Service from './Service'
 import { useState } from 'react'
 import LoadingPage from './LoadingPage'
 
 import { useNavigate } from 'react-router-dom'
+import { DarkModeContext } from '../components/ToggleMode/DarkModeContext'
 export default function Home() {
-
+  const {isDarkMode}=useContext(DarkModeContext)
   const navigate=useNavigate();
   const [isLoading,setIsLoading]=useState(true);
 
   useEffect(()=>{
 
     const checkIfLoggedIn=async()=>{
       const cookie=localStorage.getItem('jwt');
-      const response=await fetch(`${process.env.REACT_APP_API_URL}/api/v1/users/protect`,{
+      const response=await fetch(`${process.env.REACT_APP_API_URL}/api/v1/users/protect`,{     
       method:'post',
       headers:{
         'Content-type':'application/json',
@@ -39,7 +40,7 @@ export default function Home() {
   return (
      <div>
       {isLoading&&<LoadingPage></LoadingPage>}
-      {!isLoading&&(<><div className='h-[100vh] px-40 py-5 max-[885px]:px-20 max-[653px]:px-14 bg-[#012478]'>
+      {!isLoading&&(<><div className={` h-[100vh] ${isDarkMode?"text-white bg-black":""} px-40 py-5 max-[885px]:px-20 max-[653px]:px-14 bg-[#012478]`}>
         <NavBar/>
         <Description></Description>
      </div>

frontend/src/pages/Service.js

@@ -1,12 +1,14 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import Card from '../components/HomeComponents/Card'
+import { DarkModeContext } from '../components/ToggleMode/DarkModeContext'
 
 export default function Service() {
+  const {isDarkMode}=useContext(DarkModeContext)
   return (
-    <div className='h-[100vh] px-40 max-[885px]:px-20 max-[653px]:px-14 py-[5%] flex justify-center items-center'>
+    <div className={`h-[100vh] ${isDarkMode?"bg-black text-white":""} px-40 max-[885px]:px-20 max-[653px]:px-14 py-[5%] flex justify-center items-center`}>
     <div className='flex flex-col items-center'>
       <div className='w-[60%]'>
-      <div className='text-[#384055] text-6xl text-center font-semibold font-Poppins max-[1127px]:text-5xl max-[607px]:text-4xl max-[440px]:text-3xl'>Get the best of all the features</div>
+      <div className={`text-[#384055]  ${isDarkMode?"bg-black text-white":""} text-6xl text-center font-semibold font-Poppins max-[1127px]:text-5xl max-[607px]:text-4xl max-[440px]:text-3xl`}>Get the best of all the features</div>
       </div>
       <div className=" mt-[10%] w-[70vw] max-[653px]:gap-4 grid grid-cols-1 place-items-center sm:grid-cols-2 gap-10">
         <Card title='Simple' description='With intuitive interface,ChatBox is so simple you already know how to use it'></Card>