dark mode button improved

chaanakyaaM · Oct 9, 2024 · 2a36051 · 2a36051
1 parent 2bfe9ac
commit 2a36051
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 12 deletions.
diff --git a/dark.png b/dark.png
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
 <body>
     <header>
         <p class="title"><a href="#">Dev Profiles</a></p>
-        <button class="dark-btn"><img id="icon" src="Moon.png" alt="Dark"></img></button>
+        <button class="dark-btn"><img id="icon" src="dark.png" alt="Dark"></img></button>
     </header>
 
 

diff --git a/light.png b/light.png
diff --git a/script.js b/script.js
@@ -30,9 +30,11 @@ var icon=document.getElementById("icon");
 darkMode.addEventListener("click", () => {
     document.body.classList.toggle("light-background");
     if(document.body.classList.contains("light-background")){
-        icon.src="Sun.png";
+        icon.style.filter='invert(0%)';
+        icon.src="light.png";
     }else{
-        icon.src="Moon.png";
+        icon.style.filter='invert(100%)';
+        icon.src="dark.png";
     }
     darkMode.classList.toggle("icon-position")
     darkMode.classList.toggle("light-background");

diff --git a/style.css b/style.css
@@ -47,8 +47,7 @@ body {
 body,
 .title,
 h3,
-footer,
-.dark-btn {
+footer{
   transition: background-color 500ms ease, color 500ms ease;
 }
 
@@ -340,21 +339,33 @@ header {
   margin-top: 15px;
 }
 
+/* Dark Mode - Light mode Button */
+
 .dark-btn {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: absolute;
-  right: 10px;
   top: 10px;
-  padding: 5px 10px;
+  right: 10px;
   cursor: pointer;
-  background-color: transparent;
-  transition: all 500ms;
   font-size: 30px;
-  transition: all 0.3s;
+  padding: 5px 10px;
+  border-radius: 50%;
+  background-color: transparent;
+  border: 1px solid transparent;
+  transition: color 500ms ease, color 500ms ease;
+}
+
+.dark-btn:hover{
+  border-radius: 50%;
 }
 
 .dark-btn img {
-  width: 50px;
-  height: auto;
+  filter: invert(100%);
+  height: 30px;
 }
 
 .dark-btn #icon:hover {