From bd09fc1e1932d592f2ea470b453f37fd057829ce Mon Sep 17 00:00:00 2001 From: lifeadventurer Date: Sun, 24 Dec 2023 20:22:00 +0800 Subject: [PATCH] feat: dark mode for generators gallery --- index.html | 20 +++++++++++-------- scripts.js | 9 ++++++++- styles.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 77 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 575002f..62da9e0 100644 --- a/index.html +++ b/index.html @@ -5,28 +5,32 @@ Generators + - + + +
- -

Generators Gallery

- +
+

Generators Gallery

+
+
-
+
fortune generator example

Fortune Generator

Get your daily fortune with just a click.

- Check this out + Check this out
@@ -34,13 +38,13 @@
-
+
quote generator example

Quote Generator

Generate inspiring and thought-provoking quotes effortlessly.

- Check this out + Check this out
diff --git a/scripts.js b/scripts.js index f626899..b090e03 100644 --- a/scripts.js +++ b/scripts.js @@ -56,4 +56,11 @@ function format_time_difference(seconds) { } } -get_generator_card_footer() \ No newline at end of file +get_generator_card_footer() + +let darkModeIcon = document.querySelector('#dark-mode-icon'); + +darkModeIcon.onclick = () => { + darkModeIcon.classList.toggle('bx-sun'); + document.body.classList.toggle('dark-mode'); +}; \ No newline at end of file diff --git a/styles.css b/styles.css index 4816430..2f72b27 100644 --- a/styles.css +++ b/styles.css @@ -1,10 +1,42 @@ :root { --bg-color: #ffffff; --title-color: #363636; + /* button */ + --button-color: #6c757d; + --button-hover-color: #565e64; + --button-text-color: #ffffff; + /* card-footer */ + --card-bg-color: #212529; + --card-title-color: #ffffff; --card-footer-color: #343a40; --card-footer-text-color: #adb5bd; } +.dark-mode { + --bg-color: #000000dd; + --title-color: #ffffffd8; + --dark-mode-icon-color: #efefef; + /* button */ + --button-color: #9c9fa2ec; + --button-hover-color: #797d7fec; + --button-text-color: #121212; + /* card-footer */ + --card-bg-color: #f8f8f8; + --card-title-color: #3a3a3a; + --card-footer-color: #e1e1e1; + --card-footer-text-color: #4c4c4c; +} + +.btn { + background-color: var(--button-color); + color: var(--button-text-color); +} + +.btn:hover { + background-color: var(--button-hover-color); + /* color: var(--button-text-color); */ +} + body { background-color: var(--bg-color); } @@ -15,6 +47,18 @@ h1 { color: var(--title-color); } +h5 { + color: var(--title-color); +} + +.card { + background-color: var(--card-bg-color); +} + +.card-title, .card-text { + color: var(--card-title-color); +} + .container { margin-top: 30px; } @@ -32,4 +76,17 @@ h1 { width: 4%; border-radius: 50%; overflow: hidden; +} + +.row { + display: flex; +} + +#dark-mode-icon { + margin-left: 25px; + margin-top: 15px; + font-size: 2.4rem; + color: var(--dark-mode-icon-color); + cursor: pointer; + opacity: 85%; } \ No newline at end of file