Merge pull request #73 from LeanneCodes/feature/test-darkmode

Feature/test darkmode
LeanneCodes · Dec 7, 2023 · 4a1a01f · 4a1a01f
2 parents 603959a + 43b6f77
commit 4a1a01f
Show file tree

Hide file tree

Showing 14 changed files with 281 additions and 181 deletions.
diff --git a/CSS/style.css b/CSS/style.css
@@ -127,7 +127,7 @@ footer {
   margin: auto;
 }
 .info-box {
-  height: 480px !important;
+  min-height: 480px !important;
 }
 .card {
   box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 50px -12px;

diff --git a/CSS/theme.css b/CSS/theme.css
@@ -0,0 +1,35 @@
+:root {
+  --grid-unit: 1rem;
+  --border-radius-base: 0.5rem;
+}
+
+[data-theme='light'] {
+  --color-bg: #ffffff;
+  --color-fg: #000000;
+}
+
+[data-theme='dark'] {
+  --color-bg: #100909e0;
+  --color-fg: #ffffff;
+}
+
+/* example use of CSS custom properties */
+body {
+  background-color: var(--color-bg);
+  color: var(--color-fg);
+}
+.light-theme {
+  background-color: var(--color-bg-light);
+  color: var(--color-fg-light);
+}
+.dark-theme {
+  background-color: var(--color-bg-dark);
+  color: var(--color-fg-dark);
+}
+.bg-off-white {
+  background-color: var(--color-bg);
+  color: var(--color-fg);
+}
+.nav-link {
+  color: #404146;
+}
diff --git a/JS/theme.js b/JS/theme.js
@@ -0,0 +1,56 @@
+const localStorageTheme = localStorage.getItem('theme');
+const systemSettingDark = window.matchMedia('(prefers-color-scheme: dark)');
+function calculateSettingAsThemeString({
+  localStorageTheme,
+  systemSettingDark,
+}) {
+  if (localStorageTheme !== null) {
+    return localStorageTheme;
+  }
+  if (systemSettingDark.matches) {
+    return 'dark';
+  }
+  return 'light';
+}
+let currentThemeSetting = calculateSettingAsThemeString({
+  localStorageTheme,
+  systemSettingDark,
+});
+// target the button using the data attribute we added earlier
+const button = document.querySelector('[data-theme-toggle]');
+button.addEventListener('click', () => {
+  const newTheme = currentThemeSetting === 'dark' ? 'light' : 'dark';
+  // update the button text
+  const newCta =
+    newTheme === 'dark' ? 'Change to light theme' : 'Change to dark theme';
+  button.innerText = newCta;
+  // use an aria-label if you are omitting text on the button
+  // and using sun/moon icons, for example
+  button.setAttribute('aria-label', newCta);
+  // update theme attribute on HTML to switch theme in CSS
+  document.querySelector('html').setAttribute('data-theme', newTheme);
+  // update in local storage
+  localStorage.setItem('theme', newTheme);
+  // update the currentThemeSetting in memory
+  currentThemeSetting = newTheme;
+});
+function applyTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  const heroSection = document.querySelector('.bg-off-white');
+  heroSection.classList.remove('.light-theme', '.dark-theme');
+  heroSection.classList.add(`${theme}-theme`);
+
+  const heroText = document.querySelector('.heroText');
+  heroText.classList.remove('light-theme', 'dark-theme');
+  heroText.classList.add(`${theme}-theme`);
+
+  const navText = document.querySelector('.nav-item');
+  navText.classList.remove('light-theme', 'dark-theme');
+  navText.classList.add(`${theme}-theme`);
+
+  const footerText = document.querySelector('.copyright');
+  footerText.classList.remove('light-theme', 'dark-theme');
+  footerText.classList.add(`${theme}-theme`);
+}
+// Apply the theme when the page loads
+applyTheme(localStorageTheme);
diff --git a/about.html b/about.html
@@ -26,10 +26,7 @@
   <div id="navbar-placeholder"></div>
   <!-- ................. End Navbar Section ................. -->
 
-
-
   <!-- ................. Start Hero Section ................. -->
-
   <section class="bg-off-white bg-gradient text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start ">
 
     <div class="container">

diff --git a/cuisines/asianCuisine.html b/cuisines/asianCuisine.html
@@ -11,7 +11,7 @@
   <script src="https://kit.fontawesome.com/7ac16726b9.js" crossorigin="anonymous"></script>
   <!-- local CSS -->
   <link rel="stylesheet" href="../css/style.css">
-  <link rel="stylesheet" href="../css/theme.css">
+  <link href="../CSS/theme.css" rel="stylesheet" />
   <title>Tasteful Twist | Asian Cuisine</title>
 </head>
 

diff --git a/cuisines/frenchCuisine.html b/cuisines/frenchCuisine.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="Light">
 
 <head>
   <meta charset="UTF-8">
@@ -11,7 +11,7 @@
   <script src="https://kit.fontawesome.com/7ac16726b9.js" crossorigin="anonymous"></script>
   <!-- local CSS -->
   <link rel="stylesheet" href="../css/style.css">
-  <link rel="stylesheet" href="../css/theme.css">
+  <link href="../CSS/theme.css" rel="stylesheet" />
   <title>Tasteful Twist | French Cuisine</title>
 </head>
 

diff --git a/cuisines/greekCuisine.html b/cuisines/greekCuisine.html
@@ -11,12 +11,15 @@
   <script src="https://kit.fontawesome.com/7ac16726b9.js" crossorigin="anonymous"></script>
   <!-- local CSS -->
   <link rel="stylesheet" href="../css/style.css">
-  <link href="./css/theme.css" rel="stylesheet" />
+  <link href="../CSS/theme.css" rel="stylesheet" />
   <title>Tasteful Twist | Greek Cuisine</title>
 </head>
 
 <body>
-
+  <div>
+    <button type="button" class="button" data-theme-toggle aria-label="Change to light theme">Change to light
+      theme</button>
+  </div>
   <!-- start of navbar -->
   <div id="navbar-placeholder"></div>
   <!-- end of navbar -->
@@ -56,6 +59,7 @@ <h1 class="text-center bg-gold p-2">Greek Cuisine</h1>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
   <script src="../js/script.js"></script>
   <script src="../js/headerandfooter.js"></script>
+  <script src="../js/theme.js"></script>
 </body>
 
 </html>
diff --git a/cuisines/indianCuisine.html b/cuisines/indianCuisine.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="Light">
 
 <head>
   <meta charset="UTF-8">
@@ -11,11 +11,15 @@
   <script src="https://kit.fontawesome.com/7ac16726b9.js" crossorigin="anonymous"></script>
   <!-- local CSS -->
   <link rel="stylesheet" href="../css/style.css">
+  <link href="../CSS/theme.css" rel="stylesheet" />
   <title>Tasteful Twist | Indian Cuisine</title>
 </head>
 
 <body>
-
+  <div>
+    <button type="button" class="button" data-theme-toggle aria-label="Change to light theme">Change to light
+      theme</button>
+  </div>
   <!-- start of navbar -->
   <div id="navbar-placeholder"></div>
   <!-- end of navbar -->
@@ -55,6 +59,7 @@ <h1 class="text-center bg-gold p-2">Indian Cuisine</h1>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
   <script src="../js/script.js"></script>
   <script src="../js/headerandfooter.js"></script>
+  <script src="../js/theme.js"></script>
 </body>
 
 </html>
diff --git a/cuisines/italianCuisine.html b/cuisines/italianCuisine.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="Light">
 
 <head>
   <meta charset="UTF-8">
@@ -11,11 +11,15 @@
   <script src="https://kit.fontawesome.com/7ac16726b9.js" crossorigin="anonymous"></script>
   <!-- local CSS -->
   <link rel="stylesheet" href="../css/style.css">
+  <link href="../CSS/theme.css" rel="stylesheet" />
   <title>Tasteful Twist | Italian Cuisine</title>
 </head>
 
 <body>
-
+  <div>
+    <button type="button" class="button" data-theme-toggle aria-label="Change to light theme">Change to light
+      theme</button>
+  </div>
   <!-- start of navbar -->
   <div id="navbar-placeholder"></div>
   <!-- end of navbar -->
@@ -54,6 +58,7 @@ <h1 class="text-center bg-gold p-2">Italian Cuisine</h1>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
   <script src="../js/script.js"></script>
   <script src="../js/headerandfooter.js"></script>
+  <script src="../js/theme.js"></script>
 </body>
 
 </html>
diff --git a/cuisines/mexicanCuisine.html b/cuisines/mexicanCuisine.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="Light">
 
 <head>
   <meta charset="UTF-8">
@@ -11,10 +11,15 @@
   <script src="https://kit.fontawesome.com/7ac16726b9.js" crossorigin="anonymous"></script>
   <!-- local CSS -->
   <link rel="stylesheet" href="../css/style.css">
+  <link href="../CSS/theme.css" rel="stylesheet" />
   <title>Tasteful Twist | Mexican Cuisine</title>
 </head>
 
 <body>
+  <div>
+    <button type="button" class="button" data-theme-toggle aria-label="Change to light theme">Change to light
+      theme</button>
+  </div>
 
   <!-- start of navbar -->
   <div id="navbar-placeholder"></div>
@@ -56,6 +61,7 @@ <h1 class="text-center bg-gold p-2">Mexican Cuisine</h1>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
   <script src="../js/script.js"></script>
   <script src="../js/headerandfooter.js"></script>
+  <script src="../js/theme.js"></script>
 </body>
 
 </html>
diff --git a/cuisines/moroccanCuisine.html b/cuisines/moroccanCuisine.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="Light">
 
 <head>
   <meta charset="UTF-8">
@@ -11,10 +11,15 @@
   <script src="https://kit.fontawesome.com/7ac16726b9.js" crossorigin="anonymous"></script>
   <!-- local CSS -->
   <link rel="stylesheet" href="../css/style.css">
+  <link href="../CSS/theme.css" rel="stylesheet" />
   <title>Tasteful Twist | Moroccan Cuisine</title>
 </head>
 
 <body>
+  <div>
+    <button type="button" class="button" data-theme-toggle aria-label="Change to light theme">Change to light
+      theme</button>
+  </div>
 
   <!-- start of navbar -->
   <div id="navbar-placeholder"></div>
@@ -55,6 +60,7 @@ <h1 class="text-center bg-gold p-2">Moroccan Cuisine</h1>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
   <script src="../js/script.js"></script>
   <script src="../js/headerandfooter.js"></script>
+  <script src="../js/theme.js"></script>
 </body>
 
 </html>
diff --git a/cuisines/spanishCuisine.html b/cuisines/spanishCuisine.html
@@ -11,7 +11,7 @@
   <script src="https://kit.fontawesome.com/7ac16726b9.js" crossorigin="anonymous"></script>
   <!-- local CSS -->
   <link rel="stylesheet" href="../css/style.css">
-  <link href="./css/theme.css" rel="stylesheet" />
+  <link href="../CSS/theme.css" rel="stylesheet" />
   <title>Tasteful Twist | Spanish Cuisine</title>
 </head>
 
@@ -59,7 +59,7 @@ <h1 class="text-center bg-gold p-2">Spanish Cuisine</h1>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
   <script src="../js/script.js"></script>
   <script src="../js/headerandfooter.js"></script>
-  <script src='./js/theme.js'></script>
+  <script src="../js/theme.js"></script>
 </body>
 
 </html>