From b42d7cafcd4b0faa5d42e8959503cf161550b9b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20In=C3=A1cio=20Neto?= Date: Mon, 25 Sep 2023 16:09:06 -0300 Subject: [PATCH] feat: dark mode --- assets/css/style.css | 34 +++++++++++++- assets/css/var.css | 12 +++++ assets/js/script.js | 17 +++++++ index.html | 107 +++++++++++++++++++++---------------------- 4 files changed, 112 insertions(+), 58 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index f36e7ced..9c13e243 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -8,10 +8,12 @@ } body { - background-color: var(--white); + background-color: var(--background-color); + color: var(--text-color); font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; padding: 50px; + transition: background-color 0.5s ease-in-out; } .header { @@ -115,5 +117,33 @@ body { border-radius: 5px; color: var(--white); background-color: var(--purple-500); - font-size: 0.75rem; /* pra caber no card e não quebrar linha */ + font-size: 0.75rem; + /* pra caber no card e não quebrar linha */ +} + +.dark-mode-button { + background-color: var(--purple-500); + color: var(--white); + border: none; + border-radius: 5px; + padding: 10px 20px; + cursor: pointer; + position: absolute; + top: 20px; + right: 20px; +} + +.dark-mode-button i { + font-size: 1.2rem; + margin-right: 8px; } + +.dark-mode .ph-sun, +:not(.dark-mode) .ph-moon { + display: none; +} + +.dark-mode .ph-moon, +:not(.dark-mode) .ph-sun { + display: inline; +} \ No newline at end of file diff --git a/assets/css/var.css b/assets/css/var.css index efff99fb..fbd801e5 100644 --- a/assets/css/var.css +++ b/assets/css/var.css @@ -8,4 +8,16 @@ --gray-500: #9698a0; --gray-300: #cccccc; --gray-100: #f2f2f2; +} + +/* Light Mode */ +:root { + --background-color: #ffffff; + --text-color: #333333; +} + +/* Dark Mode */ +.dark-mode { + --background-color: #333333; + --text-color: #ffffff; } \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index f71da449..874abec8 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -46,5 +46,22 @@ async function getCardsFromJson() { } } +const darkModeToggle = document.getElementById('dark-mode-toggle'); +const body = document.body; +const moonIcon = document.querySelector('.ph-moon'); +const sunIcon = document.querySelector('.ph-sun'); + +darkModeToggle.addEventListener('click', () => { + body.classList.toggle('dark-mode'); + + if (body.classList.contains('dark-mode')) { + moonIcon.style.display = 'none'; + sunIcon.style.display = 'inline'; + } else { + sunIcon.style.display = 'none'; + moonIcon.style.display = 'inline'; + } +}); + searchInput.addEventListener("input", searchCards); getCardsFromJson(); diff --git a/index.html b/index.html index a4ddf2a3..371b2ffd 100644 --- a/index.html +++ b/index.html @@ -1,59 +1,54 @@ - - - - - - - - - - - - - - - Diciotech - - -
-

- Diciotech -

-

- Um dicionário tech para pessoas que querem aprender mais sobre termos - técnicos dentro da tecnologia 📖 -

-
-
-
- - - - -
-
-
- - + + + + + + + + + + + + + + + + + + + + Diciotech + + + +
+

+ Diciotech +

+

+ Um dicionário tech para pessoas que querem aprender mais sobre termos + técnicos dentro da tecnologia 📖 +

+ + +
+
+
+ + + + +
+
+
+ + + \ No newline at end of file