Issue86 functional theme change button

src/App.js

@@ -5,19 +5,22 @@ import Doc from "./Componet/Documetation/Doc";
 import Error from "./Componet/Error";
 import InternPage from "./Componet/Documetation/Internship/InternPage";
 import Footer from "./Componet/Footer";
-
+import { store } from "./Redux/Store/Store";
+import { Provider } from "react-redux";
 
 function App() {
-  return(
- <div>
-      <Navbar/>
-      <Routes>
-        <Route path="/" element={<Home/>}/>
-        <Route path="/docs" element={<Doc/>}/>
-        <Route path="/intern" element={<InternPage/>}/>
-        <Route path="*" element={<Error/>}/>
-      </Routes>
-      <Footer/> 
+  return (
+    <div>
+      <Provider store={store}>
+        <Navbar />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/docs" element={<Doc />} />
+          <Route path="/intern" element={<InternPage />} />
+          <Route path="*" element={<Error />} />
+        </Routes>
+        <Footer />
+      </Provider>
     </div>
   );
 }

src/Componet/Documetation/Detail.jsx

@@ -1,59 +1,87 @@
-import React, { useEffect, useState } from 'react'
-import Founder_img from'../../image/cz/h.png'
-import Maintainer_img from'../../image/cz/c.jpeg'
-import './Detail.css'
-import {
-    FaGithub,
-    FaLinkedin,
-  } from 'react-icons/fa6';
-import Slider from './Slider';
+import React, { useEffect, useState } from "react";
+import Founder_img from "../../image/cz/h.png";
+import Maintainer_img from "../../image/cz/c.jpeg";
+import "./Detail.css";
+import { FaGithub, FaLinkedin } from "react-icons/fa6";
+import Slider from "./Slider";
+import { useSelector } from "react-redux";
 
 function Detail() {
-    const [width, setWidth] = useState(window.innerWidth);
-    const breakpoint = 550;
+  const [width, setWidth] = useState(window.innerWidth);
+  const breakpoint = 550;
+  const theme = useSelector((state) => state.theme.theme);
+
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
 
-    useEffect(() => {
-        const handleResize = () => {
-          setWidth(window.innerWidth);
-        };
-
-        window.addEventListener('resize', handleResize);
-        return () => {
-          window.removeEventListener('resize', handleResize);
-        };
-      }, []);
-
   return (
-    <div style={{marginTop:"150px"}}>
-        <h1 style={{color:"rgba(128, 128, 128, 0.44)",textAlign:'center'}}> Founder And Maintainers of CareerZunction</h1>
-          <div className='ProjectD'>
-
-              {width >= breakpoint ?
-                  (<div className='inner-container' style={{width: "100%", display: "flex", justifyContent: "space-evenly", padding:"6vh 0"}}>
-
-                      <div className="section_founder">
-                          <img className="fimg" src={Founder_img} alt="img" />
-                          <p>Founder : Himanshu Narware</p>
-                          <span>
-                              <a className="github" href='https://github.com/HimanshuNarware' target='_blank'><FaGithub /></a>
-                              <a className="linkedin" href='https://linkedin.com/himanshunarware ' target='_blank'><FaLinkedin /></a>
-                          </span>
+    <div style={{ marginTop: "150px" }}>
+      <h1 style={{ color: theme==="light"? "rgba(0, 0, 0, 0.616)":"rgba(128, 128, 128, 0.44)"
+      ,
+       textAlign: "center" }}>
+        {" "}
+        Founder And Maintainers of CareerZunction
+      </h1>
+      <div className="ProjectD">
+        {width >= breakpoint ? (
+          <div
+            className="inner-container"
+            style={{
+              width: "100%",
+              display: "flex",
+              justifyContent: "space-evenly",
+              padding: "6vh 0",
+            }}
+          >
+            <div className="section_founder">
+              <img className="fimg" src={Founder_img} alt="img" />
+              <p>Founder : Himanshu Narware</p>
+              <span>
+                <a
+                  className="github"
+                  href="https://github.com/HimanshuNarware"
+                  target="_blank"
+                >
+                  <FaGithub />
+                </a>
+                <a
+                  className="linkedin"
+                  href="https://linkedin.com/himanshunarware "
+                  target="_blank"
+                >
+                  <FaLinkedin />
+                </a>
+              </span>
+            </div>
 
-                      </div>
-
-                      <div className="section_maintainer">
-                          <img className='fimg' src={Maintainer_img} alt="img" />
-                          <p>Maintainer : Chaitali Sonare</p>
-                          <span>
-                              <a className="github" href='#' target='_blank'>{<FaGithub />}</a>
-                              <a className="linkedin" href='# ' target='_blank'><FaLinkedin /></a>
-                          </span>
-                      </div>
-                  </div>) :
-                  <Slider />}
-        </div>
+            <div className="section_maintainer">
+              <img className="fimg" src={Maintainer_img} alt="img" />
+              <p>Maintainer : Chaitali Sonare</p>
+              <span>
+                <a className="github" href="#" target="_blank">
+                  {<FaGithub />}
+                </a>
+                <a className="linkedin" href="# " target="_blank">
+                  <FaLinkedin />
+                </a>
+              </span>
+            </div>
+          </div>
+        ) : (
+          <Slider />
+        )}
+      </div>
     </div>
-  )
+  );
 }
 
-export default Detail
+export default Detail;

src/Componet/Documetation/Doc.css

@@ -1,66 +1,66 @@
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
-    .page_0{
-       overflow: hidden;
-    }
-    .docImg{
-border-radius: 0;
-width: 100vw;
-height: 250vh;
-z-index: 10;
-margin-top: -50px;
-    }
-    .contribution{
-        position: relative;
-        top: -80vh;
-        z-index: 10;
-    }
-    .headLine{
-        font-size: 5em;
-        margin-inline: auto;
-        text-align: center;
-        font-weight: 800;
-        color: transparent;
-        /* border: 2px solid black; */
-       text-shadow: 0px 0px 0px rgba(168, 162, 162, 0.516);
-    }
-    .TitleDoc{
-width: 100vw;
-overflow: hidden;
-background-color: rgb(0, 0, 0);
-/* margin-top: -15%; */
-top: -3em;
-z-index:9;
-position: relative;
-height: 50vh;
-color: white;
-text-align: center;
-font-weight: 700;
-/* border: 2px solid white; */
-font-size: 5em;
+.page_0 {
+  overflow: hidden;
+}
+.docImg {
+  border-radius: 0;
+  width: 100vw;
+  height: 250vh;
+  z-index: 10;
+  margin-top: -50px;
+}
+.contribution {
+  position: relative;
+  top: -80vh;
+  z-index: 10;
+}
+.headLine {
+  font-size: 5em;
+  margin-inline: auto;
+  text-align: center;
+  font-weight: 800;
+  color: transparent;
+  /* border: 2px solid black; */
+  /* text-shadow: 0px 0px 0px rgba(168, 162, 162, 0.516); */
+  /* // for light theme */
+  /* text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.616); */
+}
+.TitleDoc {
+  width: 100vw;
+  overflow: hidden;
+  /* background-color: rgb(0, 0, 0); */
+  /* margin-top: -15%; */
+  top: -3em;
+  z-index: 9;
+  position: relative;
+  height: 50vh;
+  color: white;
+  text-align: center;
+  font-weight: 700;
+  /* border: 2px solid white; */
+  font-size: 5em;
 
-padding-top: 10%;
-    }
-
-   .ContributionImg{
-    background-color: black;
-    margin: 12px 20px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 5em;
-    align-items: center;
-    margin-bottom: 50px;
-
-   }
-   .conImg{
-    width: 70vw;
-border-radius: 0;
+  padding-top: 10%;
+}
 
-   }
+.ContributionImg {
+  background-color: black;
+  margin: 12px 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5em;
+  align-items: center;
+  margin-bottom: 50px;
+}
+.conImg {
+  width: 70vw;
+  border-radius: 0;
+}
 
    /* mediaQwery */
    @media screen and (max-width:683px) {
@@ -92,4 +92,4 @@ margin-top: -120px;
     .contribution .headLine {
         font-size: 2em;
       }
-  }
+  }