Merge pull request #250 from sivaprasath2004/sivaprasath-closes-issue…

…-241 [Feature] : Add Dark & Light mode
Avdhesh-Varshney · Jun 6, 2024 · 8cd054f · 8cd054f
2 parents 95d221d + b62df87
commit 8cd054f
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 8 deletions.
diff --git a/src/components/Cards/Card.jsx b/src/components/Cards/Card.jsx
@@ -24,11 +24,11 @@ const Card = (props) => {
 				<p className="card-text">{description}</p>
 
 				<a href={sourceLink} className="btn btn-dark m-1" style={{ fontSize: '1.3rem' }}title="View Code">
-					<FaGithub />
+					<FaGithub id='svg' />
 				</a>
 
 				{(tech !== 'Vanilla-JS-Projects' && tech !== 'Front-end-Projects')? '' : <button className="btn btn-dark m-1" style={{ fontSize: '1.2rem', color: 'white' }} onClick={handleProjectClick} title="View Project">
-					<BiSolidZap />
+					<BiSolidZap id='svg' />
 				</button>}
 			</div>
 		</div>

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -7,12 +7,12 @@ const Footer = () => {
        <div className="row-flex">
         <form action="/" method="post">
           <input type="email" placeholder="EMAIL ADDRESS" name="email" required />
-          <input type="submit" placeholder="SUBSCRIBE" name="subscribe"  value="SUBSCRIBE" required />
+          <input type="submit" placeholder="SUBSCRIBE" name="subscribe"  value="SUBSCRIBE" id="Ui" required />
         </form>
         </div>
         <div className="foot">
           <div className="foot-left">
-          <h1>Web Master Log</h1>
+          <h1 id="Ui">Web Master Log</h1>
           <p>WebMasterLog serves as a comprehensive record of various web development endeavors,
             highlighting the versatility and capabilities of projects built with Front-end and Back-end 
             Web development technologies. From interactive and responsive user interfaces to dynamic web 

diff --git a/src/components/Sidebar/SideBar.jsx b/src/components/Sidebar/SideBar.jsx
@@ -43,7 +43,7 @@ const showAnimation = {
 const SideBar = ({ routes, children }) => {
   const [isOpen, setIsOpen] = useState(false);
   const location = useLocation();
-
+  const [modes,setModes]=useState("Dark")
   useEffect(() => {
     const currentCategory = getCurrentCategory();
     const scrollbarColor = getScrollbarColor(currentCategory);
@@ -94,6 +94,16 @@ const SideBar = ({ routes, children }) => {
 
   const toggle = () => setIsOpen(!isOpen);
 
+  const modes_control=()=>{
+    document.body.classList.toggle('light')
+    if(document.body.classList.contains('light')){
+      setModes("Light")
+    }
+    else{
+      setModes("Dark")
+    }
+  }
+  console.log(modes)
   return (
     <>
       <div className='main-container'>
@@ -140,6 +150,7 @@ const SideBar = ({ routes, children }) => {
                     setIsOpen={setIsOpen}
                     routes={routes} // Pass the routes prop here
                   />
+
                 );
               }
 
@@ -158,7 +169,11 @@ const SideBar = ({ routes, children }) => {
                 </NavLink>
               );
             })}
-          </section>
+            <div className={isOpen?"opened_menu_bar":'Dark_Light_mode'} onClick={()=>modes_control()}>
+            <img  src='https://cdn-icons-png.flaticon.com/128/12301/12301351.png' alt='Dark_light_mode' />
+            {isOpen?<p>{modes}</p>:<></>}
+            </div>
+            </section>
         </motion.div>
 
         <main style={{ marginLeft: 'auto', transition: 'all 0.3s' }}>{children}</main>

diff --git a/src/components/Sidebar/sidebar.css b/src/components/Sidebar/sidebar.css
@@ -3,7 +3,9 @@
     padding: 0;
     box-sizing: border-box;
 }
-
+.light{filter: invert(1);}
+.light img,.light svg,.light .button-group button,.light #Ui{filter: invert(1);}
+.light #svg{filter: invert(0%);}
 .main-container {
     display: flex;
     background-color: black;
@@ -17,8 +19,23 @@
     color: #6c7293;
     padding: 10px 0;
     overflow-y: auto;
+    position: relative;
+}
+.Dark_Light_mode,.opened_menu_bar{
+    position: absolute;
+    bottom: 2%;
+    right: 0;
+    left: 0;
+    margin: auto;
+    cursor: pointer;
+    display: flex;
+    gap: 10px;
 }
-
+.Dark_Light_mode{justify-content: center;align-items: center;}
+.Dark_Light_mode img,.opened_menu_bar img{filter: invert(1); height: 30px;width: 30px;}
+.opened_menu_bar{padding-left: 2rem;}
+.opened_menu_bar:hover,.Dark_Light_mode:hover{color: white;}
+.opened_menu_bar p{margin-top: 2px;}
 .top_section {
     display: flex;
     align-items: center;