diff --git a/dark.png b/dark.png new file mode 100644 index 0000000..09797a7 Binary files /dev/null and b/dark.png differ diff --git a/index.html b/index.html index 538453f..b805e1c 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@

Dev Profiles

- +
diff --git a/light.png b/light.png new file mode 100644 index 0000000..d014c5f Binary files /dev/null and b/light.png differ diff --git a/script.js b/script.js index d5ddb61..a8188f8 100644 --- 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 index fe4652b..7a3c557 100644 --- 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 {