Merge pull request #55 from OkenHaha/ui_fix

Added dark mode for projects page
Gyanthakur · Oct 19, 2023 · 01294f6 · 01294f6
2 parents e522208 + 4e8b185
commit 01294f6
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -20,9 +20,10 @@
     <button class="dark-btn"><i class="uil uil-moon"></i></button>
     <h1>Dev Profiles</h1>
 
-    <button class="add"
-        onclick='window.open("https://github.com/Gyanthakur/DevProfile","_blank")'">Add your Profile &nbsp; <i class="
-        fa-sharp fa-solid fa-user-plus"></i> </button>
+    <button class="add" onclick='window.open("https://github.com/Gyanthakur/DevProfile","_blank")'>
+        Add your Profile &nbsp; 
+        <i class="fa-sharp fa-solid fa-user-plus"></i>
+    </button>
 
         <a href="project.html"><button class="add">Go to Project section &nbsp; <i class="fa-solid fa-list-check"></i> </button></a>
 

diff --git a/project.html b/project.html
@@ -9,18 +9,20 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
         integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-GTFGBS8HG8"></script>
     <script type="text/javascript" src="https://oyepriyansh.pages.dev/cdnjs/analytics/devprofiles.js"></script>
+
 </head>
 <body>
-
+    <button class="dark-btn"><i class="uil uil-moon"></i></button>
     <h1>Dev Projects</h1>
 
         <a href="index.html"><button class="add">Go To Profile Section &nbsp; <i class="fa-solid fa-user"></i> </button></a>
 
 
         <button class="add"
-        onclick='window.open("https://github.com/Gyanthakur/DevProfile","_blank")'">Add your Project &nbsp; <i class="
+        onclick='window.open("https://github.com/Gyanthakur/DevProfile","_blank")'>Add your Project &nbsp; <i class="
         fa-sharp fa-solid fa-user-plus"></i> </button>
         <div class="line"><br></div>
 
@@ -83,7 +85,7 @@ <h3 class="name">Anurag Srivastav</h3>
             <div class="social">
                 <a href="https://github.com/anurag-327" target="_blank"><i class="fa-brands fa-github"></i></a>
                 <a href="https://twitter.com/itsAnurag_sri" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
-                <a href="https://www.linkedin.com/in/anuragsr327/" target="_blank"><iclass="fa-brands fa-linkedin-in"></i></a>
+                <a href="https://www.linkedin.com/in/anuragsr327/" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>
             </div>
         </div>
 
@@ -212,7 +214,23 @@ <h3 class="name">Ashish</h3>
         <!-- project  -->
     </div>
 
-
+    <script type="text/javascript">
+        const darkMode = document.querySelector(".dark-btn");
+        const icons = document.querySelector("i");
+
+        darkMode.addEventListener("click", () => {
+            icons.classList.toggle("dark");
+            document.body.classList.toggle("light-background");
+            darkMode.classList.toggle("light-background");
+            darkMode.classList.toggle("icon-color")
+            document.querySelector("h1").classList.toggle("text-color");
+            document.querySelectorAll("h3").forEach((item) => {
+                item.classList.toggle("text-color");
+            });
+            document.querySelector("footer").classList.toggle("text-color");
+        });
+
+    </script>
 
 
 </body>

diff --git a/style.css b/style.css
@@ -12,7 +12,7 @@
 
 :root {
 	--color-green: #68EBB8;
-
+	--color-white: #eee;
 	--color-body-bg: #011627;
 	--color-profile-card-bg: #2F4054;
 	--color-profile-border: var(--color-green);
@@ -147,9 +147,16 @@ h1 {
 }
 
 .project a:hover{
-	color: #000000;
+	color: #333;
 	font-size: 28px;
 }
+
+.light-icon{
+
+}
+.dark-icon{
+	color: #222;
+}
 .projectNam{
 	margin: 13px;
 	display: flex;
@@ -236,9 +243,10 @@ button {
 }
 
 .dark-btn {
-	position: sticky;
-	top: 0;
-	width: 100%;
+	position: sticky; 
+	top: 20px; 
+	left: 90%;
+	width: 100px;
 	text-align: right;
 	padding-right: 30px;
 	background-color: #011627;