Update app.js

app.js

@@ -1,4 +1,23 @@
 $(document).ready(function() {
+
+
+  const themeToggle = document.getElementById("theme-toggle");
+const body = document.body;
+
+function toggleTheme() {
+  body.classList.toggle("dark-mode");
+  const isDarkMode = body.classList.contains("dark-mode");
+  localStorage.setItem("theme", isDarkMode ? "dark" : "light");
+}
+
+themeToggle.addEventListener("click", toggleTheme);
+
+const savedTheme = localStorage.getItem("theme");
+if (savedTheme === "dark") {
+  body.classList.add("dark-mode");
+}
+
+
   // Create a variable for the container to hold the emoji cards.
   const emojiCardContainer = document.getElementById("emojis");
 

index.html

@@ -47,6 +47,9 @@ <h2>A listing of movies, TV shows and musicals as emojis. 💖</h2>
                     <p>Want to add to EmojiScreen? Head to Github! ✨</p>
                     <a href="https://github.com/brittanyrw/emojiscreen" target="_blank">Contribute</a>
                 </div>
+
+                    <button id="theme-toggle" aria-label="Toggle Light/Dark Mode">🌙</button>
+
             </div>
         </header>
         <section id="filters">

main.css

@@ -9,6 +9,18 @@ body {
   margin: 0;
 }
 
+:root {
+  --background-light: #ffffff;
+  --text-light: #000000;
+  /* Define other light mode variables */
+}
+
+.dark-mode {
+  --background: #1a1a1a;
+  --text: #ffffff;
+  /* Define other dark mode variables */
+}
+
 header {
   max-width: 1200px;
   margin: 0 auto;
@@ -467,4 +479,4 @@ footer a {
 
 #secret-code .emoji-img:nth-child(4n) {
   animation-timing-function: ease-out;
-}
+}