From f18b4b4ffed6d519039d34be203e2938b7e6e2ca Mon Sep 17 00:00:00 2001 From: palinkiewicz Date: Mon, 5 Aug 2024 20:59:40 +0200 Subject: [PATCH] Add dark mode --- classes/DOMHandler.js | 30 +++++++++++++++++++++++++++++- index.html | 13 ++++++++++--- styles/main.css | 31 ++++++++++++++++++++++++++++++- styles/wizard.css | 2 +- 4 files changed, 70 insertions(+), 6 deletions(-) diff --git a/classes/DOMHandler.js b/classes/DOMHandler.js index 322ec4d..4eb25d8 100644 --- a/classes/DOMHandler.js +++ b/classes/DOMHandler.js @@ -88,10 +88,18 @@ class DOMHandler { /** @type {Element} */ this.songImage = document.querySelector(".song-image"); + /** @type {Element} */ + this.toggleDarkMode = document.querySelector("#dark-mode-toggle"); + this.populateColorSelection(); this.setListeners(); - this.setBase64Image(SPOTIFY_LOGO, ".song-image > .spotify > img", 0); + this.setTheme( + localStorage.getItem("theme") ?? + (window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light") + ); } /** @@ -159,6 +167,12 @@ class DOMHandler { ); }); }); + + this.toggleDarkMode.addEventListener("click", () => { + this.setTheme( + document.body.classList.contains("dark-mode") ? "light" : "dark" + ); + }); } /** @@ -625,4 +639,18 @@ class DOMHandler { } }); } + + /** + * Sets color theme + * @param {string} theme + */ + setTheme(theme) { + if (theme === "dark") { + document.body.classList.add("dark-mode"); + localStorage.setItem("theme", "dark"); + } else { + document.body.classList.remove("dark-mode"); + localStorage.setItem("theme", "light"); + } + } } diff --git a/index.html b/index.html index fdcff8f..db5093e 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ Lyrics Image Generator - +
@@ -97,8 +97,15 @@

Song image

diff --git a/styles/main.css b/styles/main.css index 33fb6a8..bb7fb8c 100644 --- a/styles/main.css +++ b/styles/main.css @@ -111,6 +111,35 @@ header > .go-to-screen:hover, #download:hover, #last-go-back:hover { footer { text-align: center; padding: 2.1rem; - height: 6rem; + height: 8rem; font-size: 1.2rem; } + +#dark-mode-toggle { + display: flex; + justify-content: center; + align-items: center; + gap: 0.3rem; + font-weight: 600; + padding-top: 0.5rem; +} + +#dark-mode-toggle:hover { + cursor: pointer; +} + +#dark-mode-toggle::before { + content: "Switch to dark"; +} + +.dark-mode #dark-mode-toggle::before { + content: "Switch to light"; +} + +#dark-mode-toggle > span::after { + content: "dark_mode"; +} + +.dark-mode #dark-mode-toggle > span::after { + content: "light_mode"; +} diff --git a/styles/wizard.css b/styles/wizard.css index 2c8f7b8..d86fc46 100644 --- a/styles/wizard.css +++ b/styles/wizard.css @@ -88,7 +88,7 @@ .screen-wrapper { width: 100vw; - min-height: calc(100vh - 6rem); + min-height: calc(100vh - 8rem); display: flex; flex-direction: column; justify-content: center;