From eb07779765dc177d7f557e804975673e67874529 Mon Sep 17 00:00:00 2001 From: SarangKumar Date: Fri, 9 Dec 2022 22:40:50 +0530 Subject: [PATCH 1/2] Changed color theme and changed the github svg --- assets/GitHubDark.svg | 5 ++++- assets/GitHubLight.svg | 2 +- assets/MoonIcon.svg | 2 +- index.html | 36 ++++++++++++++++++------------------ scripts/script.js | 9 +++++++-- styles/dark.css | 29 +++++++++++++++++++++++------ styles/light.css | 28 ++++++++++++++++++++++------ 7 files changed, 76 insertions(+), 35 deletions(-) diff --git a/assets/GitHubDark.svg b/assets/GitHubDark.svg index 4d89c595..ddf0c104 100644 --- a/assets/GitHubDark.svg +++ b/assets/GitHubDark.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + \ No newline at end of file diff --git a/assets/GitHubLight.svg b/assets/GitHubLight.svg index 675f99ac..441bdea5 100644 --- a/assets/GitHubLight.svg +++ b/assets/GitHubLight.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/MoonIcon.svg b/assets/MoonIcon.svg index e7adf261..9d6d6118 100644 --- a/assets/MoonIcon.svg +++ b/assets/MoonIcon.svg @@ -1,3 +1,3 @@ - + diff --git a/index.html b/index.html index 6088c850..3aeb5800 100644 --- a/index.html +++ b/index.html @@ -21,8 +21,8 @@

Calculator

- - Sun Icon + + Sun Icon
- - - - + + + +
- - - - + + + +
- - - - + + + +
- - - - + + + +
diff --git a/scripts/script.js b/scripts/script.js index 67931195..78f30354 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -2,6 +2,9 @@ const lightTheme = "styles/light.css"; const darkTheme = "styles/dark.css"; const sunIcon = "assets/SunIcon.svg"; const moonIcon = "assets/MoonIcon.svg"; +const githubLight = "assets/githubLight.svg"; +const githubDark = "assets/githubDark.svg"; +const githubIcon = document.getElementById('github-icon'); const themeIcon = document.getElementById("theme-icon"); const res = document.getElementById("result"); const toast = document.getElementById("toast"); @@ -27,11 +30,13 @@ function changeTheme() { if (theme.getAttribute("href") === lightTheme) { theme.setAttribute("href", darkTheme); themeIcon.setAttribute("src", sunIcon); - toast.innerHTML = "Dark Mode 🌙"; + githubIcon.setAttribute("src", githubDark); + toast.innerHTML = "Dark Mode"; } else { theme.setAttribute("href", lightTheme); themeIcon.setAttribute("src", moonIcon); - toast.innerHTML = "Light Mode ☀️"; + githubIcon.setAttribute("src", githubLight); + toast.innerHTML = "Light Mode"; } } diff --git a/styles/dark.css b/styles/dark.css index 0fe1e6d1..828b10fd 100644 --- a/styles/dark.css +++ b/styles/dark.css @@ -18,22 +18,27 @@ justify-content: center; flex-direction: column; align-items: center; - background-color: rgb(20, 19, 19); + background-color: #292826; transition: 0.8s all; } h1 { margin-bottom: 1.5%; color: #fff; - font-weight: normal; + font-weight: bolder; + font-size: 25px; } .container { - width: 350px; + width: 400px; display: flex; justify-content: center; flex-direction: column; - align-items: center; + align-items: center; /* border:1px solid #000; */ + padding:12px; + border-radius: 10px; + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; + } .header-container { @@ -43,10 +48,13 @@ h1 { width: 80%; } +#result{ + width:238px; +} + .top-buttons { display: flex; align-items: center; - } input { @@ -59,7 +67,16 @@ input { border: none; outline: none; border-radius: 100px; - margin: 0.2em; + margin: 0.3em; + font-weight:600 ; + box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; + +} + +.btn:active{ + box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; + background-color: rgb(37, 35, 59); + color: #fff; } .first-row, diff --git a/styles/light.css b/styles/light.css index 218ca857..99be61ea 100644 --- a/styles/light.css +++ b/styles/light.css @@ -14,22 +14,26 @@ justify-content: center; flex-direction: column; align-items: center; - background-color: rgb(7, 210, 199); + background-color: #f8f6f4; transition: 0.8s all; } h1 { margin-bottom: 1.5%; - color: #fff; - font-weight: normal; + color: rgb(122, 122, 122); + font-weight: bolder; + font-size: 25px; } .container { - width: 350px; + width: 400px; display: flex; justify-content: center; flex-direction: column; align-items: center; + padding:12px; + border-radius: 10px; + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } .header-container { @@ -39,6 +43,10 @@ h1 { width: 80%; } +#result{ + width:238px; +} + .top-buttons { display: flex; align-items: center; @@ -54,7 +62,15 @@ input { border: none; outline: none; border-radius: 100px; - margin: 0.2em; + margin: 0.3em; + font-weight:600 ; + box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; +} + +.btn:active{ + box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; + background-color: rgb(37, 35, 59); + color: #fff; } .first-row, @@ -75,7 +91,7 @@ input[type="text"] { } input[type="button"]:hover { - background-color: rgb(37, 35, 59); + background-color: #292826; color: #fff; } From fa6435dd2ae7e0bc6ae2fc27c20d78acc4e6e871 Mon Sep 17 00:00:00 2001 From: SarangKumar Date: Mon, 30 Jan 2023 06:50:15 +0530 Subject: [PATCH 2/2] Added transition --- styles/dark.css | 1 + styles/light.css | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/styles/dark.css b/styles/dark.css index 828b10fd..6635683c 100644 --- a/styles/dark.css +++ b/styles/dark.css @@ -70,6 +70,7 @@ input { margin: 0.3em; font-weight:600 ; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; + transition: all 0.2s ease; } diff --git a/styles/light.css b/styles/light.css index 99be61ea..adab80bb 100644 --- a/styles/light.css +++ b/styles/light.css @@ -82,6 +82,7 @@ input { } input[type="button"] { + transition: all 0.2s ease; color: rgb(122, 122, 122); } @@ -91,7 +92,7 @@ input[type="text"] { } input[type="button"]:hover { - background-color: #292826; + background-color: rgb(107, 107, 107); color: #fff; }