Merge pull request #46 from chingu-voyages/dark-light-mode

Dark/light mode support
chingu-voyages · Nov 2, 2023 · fb91b93 · fb91b93
2 parents 16dbf23 + 306f387
commit fb91b93
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 6 deletions.
diff --git a/Food-Recipe/index.html b/Food-Recipe/index.html
@@ -35,6 +35,14 @@
   </head>
 
   <body>
+    <div class="dark-mode__toggle--wrapper">
+      <input type="checkbox" class="dark-mode__toggle" id="dark-mode-checkbox">
+      <label for="dark-mode-checkbox" class="dark-mode__toggle-label" aria-label="Toggle Light and Dark Mode">
+        <i class="fas fa-moon"></i>
+        <i class="fas fa-sun"></i>
+        <span class="dark-mode__ball"></span>
+      </label>
+    </div>
     <header class="hero">
       <div class="hero__intro">
         <h1 class="hero__title">Recipe Hub</h1>

diff --git a/Food-Recipe/index.js b/Food-Recipe/index.js
@@ -24,7 +24,45 @@ const RATE_LIMIT = 5; // Requests per second
 let responseCount = 0;
 const fetchQueue = [];
 
-//Event Listener 
+
+// Dark/light mode toggle
+
+const darkModeToggle = document.querySelector('.dark-mode__toggle');
+darkModeToggle.addEventListener('change', () => toggleDarkMode());
+
+const body = document.body;
+const isDarkMode = localStorage.getItem('dark-mode');
+if (isDarkMode === 'enabled') {
+  body.classList.add('dark-mode');
+  darkModeToggle.checked = true;
+}
+
+function toggleDarkMode() {
+  const result = document.querySelector('.results__result');
+  const modal = document.querySelector('.modal');
+  const modalClose = document.querySelector('.modal__close');
+
+  body.classList.toggle('dark-mode');
+
+  if (body.classList.contains('dark-mode')) {
+    localStorage.setItem('dark-mode', 'enabled');
+  } else {
+    localStorage.setItem('dark-mode', 'disabled');
+  }
+
+  if (result) {
+    result.classList.toggle('dark-mode');
+  }
+  if (modal) {
+    modal.classList.toggle('dark-mode');
+  }
+  if (modalClose) {
+    modalClose.classList.toggle('dark-mode');
+  }
+}
+
+
+//Searh Input Event Listener 
 
 document.addEventListener("DOMContentLoaded", () => {
   const form = document.querySelector("form");
@@ -183,6 +221,9 @@ async function fetchResponses(recipeName) {
 function createRecipe(displayName, img_url, video_url, description, countryTag, rating, cookTime, yields, ingredientsTag, instructionsTag, nutrition, difficultyTag) {
   const box = document.createElement("div");
   box.classList.add("results__result");
+  if (body.classList.contains('dark-mode')) {
+    box.classList.add('dark-mode');
+  }
 
   const resultIntro = document.createElement("div");
   resultIntro.classList.add("results__result--intro");
@@ -258,13 +299,19 @@ function createModal() {
   const modal = document.createElement('div');
   modal.classList.add('modal');
   modal.classList.add('modal-active');
+  if (body.classList.contains('dark-mode')) {
+    modal.classList.add('dark-mode');
+  }
   return modal;
 }
 
 function createCloseButton() {
   const close = document.createElement('button');
   close.classList.add('modal__close');
   close.innerHTML = '&#10006;';
+  if (body.classList.contains('dark-mode')) {
+    close.classList.add('dark-mode');
+  }
   return close;
 }
 
@@ -421,6 +468,4 @@ function clearResults() {
   }
 }
 
-
-
 //comment on first commit
diff --git a/Food-Recipe/styles.css b/Food-Recipe/styles.css
@@ -7,6 +7,9 @@
   --clr-black: black;
   --clr-white: white;
   --clr-accent: #8600d2;
+  --clr-dark-mode-body: #1e1e1e;
+  --clr-dark-mode-result: #3a3a3a;
+  --clr-dark-mode-modal-border: #999999;
   /* Font families */
   --ff-primary: "Inter";
   /* FOnt sizes */
@@ -262,9 +265,9 @@ button:hover {
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
-  transform: translate(-50%, -200%);
-  transition: transform 0.4s ease-in;
+  /* transform: translate(-50%, -50%); */
+  /* transform: translate(-50%, -200%);
+  transition: transform 0.4s ease-in; */
 
   width: 95%;
   max-height: 90%;
@@ -402,6 +405,76 @@ footer {
   color: var(--clr-white);
 }
 
+footer a:focus {
+  outline: 0.1em solid var(--clr-white);
+  outline-offset: 0.1em;
+}
+
+/* Dark Mode */
+.dark-mode__toggle--wrapper {
+  position: fixed;
+  right: 0.9em;
+  top: 0.9em;
+}
+
+.dark-mode__toggle {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.dark-mode__toggle-label {
+  background-color: #111;
+  width: 50px;
+  height: 26px;
+  border-radius: 50px;
+  position: relative;
+  padding: 5px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fa-moon {color: #f1c40f;}
+
+.fa-sun {color: #f39c12;}
+
+.dark-mode__toggle-label .dark-mode__ball {
+  background-color: #fff;
+  width: 22px;
+  height: 22px;
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  border-radius: 50%;
+  transition: transform 0.2s linear;
+}
+
+.dark-mode__toggle:checked + .dark-mode__toggle-label .dark-mode__ball {
+  transform: translateX(24px);
+}
+
+.dark-mode {
+  color: var(--clr-white);
+}
+
+body.dark-mode {
+  background-color: var(--clr-dark-mode-body);
+}
+
+.results__result.dark-mode,
+.modal.dark-mode {
+  background-color: var(--clr-dark-mode-result);
+  border-color: var(--clr-dark-mode-modal-border);
+}
+
 /* Screen sizes larger than mobile */
 @media only screen and (min-width: 30rem) {
   .search-section form {