Add dark mode

palinkiewicz · Aug 5, 2024 · f18b4b4 · f18b4b4
1 parent 9c18aaf
commit f18b4b4
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 6 deletions.
diff --git 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
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="styles/song-image.css">
     <title>Lyrics Image Generator</title>
 </head>
-<body>
+<body class="dark-mode">
     <main>
         <section class="lyrics-image-screen search-form" data-number="1">
             <div class="screen-wrapper">
@@ -97,8 +97,15 @@ <h2>Song image</h2>
         </section>
     </main>
     <footer class="surface">
-        Made by <a href="https://github.com/palinkiewicz" target="_blank">palinkiewicz</a>
-        | <a href="https://ko-fi.com/palinkiewicz">Buy me a coffee</a>
+        <div>
+            Made by
+            <a href="https://github.com/palinkiewicz" target="_blank">palinkiewicz</a>
+            |
+            <a href="https://ko-fi.com/palinkiewicz">Ko-Fi</a>
+        </div>
+        <div id="dark-mode-toggle">
+            <span class="material-symbols-outlined"></span>
+        </div>
     </footer>
     <script src="classes/data/Artist.js"></script>
     <script src="classes/data/Lyric.js"></script>

diff --git 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
@@ -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;