Added light mode

index.html

@@ -14,7 +14,7 @@
         <p class="light-text">
             LIGHT
         </p>
-        <img src="assets/ligthMode-logo.png" alt="">
+        <img src="assets/ligthMode-logo.png" alt="" class="sun">
     </div>
 
     <div class="searchBar">

script.js

@@ -45,4 +45,26 @@ search.onclick = function () {
         .catch(error => {
             console.error("Error fetching profile data:", error);
         })
+}
+
+
+var theme = document.getElementsByClassName("sun")[0];
+var themeText = document.getElementsByClassName("light-text")[0];
+var flag = 0;
+
+theme.onclick = switchTheme;
+themeText.onclick = switchTheme;
+
+function switchTheme(){
+    document.body.classList.toggle("lightmode");
+    if(flag == 0){
+        document.getElementsByClassName("light-text")[0].innerHTML = "DARK ";
+        theme.src = "assets/darkmode-logo.png"
+        flag = 1;
+    }
+    else{
+        document.getElementsByClassName("light-text")[0].innerHTML = "LIGHT";
+        theme.src = "assets/ligthMode-logo.png"
+        flag = 0;
+    }
 }

style.css

@@ -2,10 +2,35 @@
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
 
+*{
+    transition: 0.5s;
+}
+
 body{
     background-color: #141c2f;
 }
 
+body.lightmode{
+    background-color: #f5f8ff;
+}
+
+body.lightmode .heading, body.lightmode .light-text ,body.lightmode .search-input , body.lightmode .name , body.lightmode .date , body.lightmode .bio ,body.lightmode .twitter-link ,body.lightmode .atGit-value ,body.lightmode .location-value ,body.lightmode .github-url ,body.lightmode .repo,body.lightmode .followers ,body.lightmode .following ,body.lightmode .repo-value ,body.lightmode .followers-value ,body.lightmode .following-value{
+    color: #3a3a3a;
+}
+
+body.lightmode .topBar img , body.lightmode .data img{
+    filter: invert(1);
+}
+
+body.lightmode .searchBar , body.lightmode .hero{
+    background-color: #fcfffe;
+    box-shadow: 0px 0px 20px rgb(166, 166, 166);
+}
+
+body.lightmode .RFF{
+    background-color: #d2d2d2;
+}
+
 .topBar{
     display: flex;
     flex-direction: row;
@@ -65,6 +90,10 @@ body{
     font-size: 1vw;
 }
 
+.search-input:focus::placeholder{
+    color: transparent;
+}
+
 .search-input:focus{
     outline: none;
 }