From 7c43e90644d57b053cdbdd2b9194f0c431f939c2 Mon Sep 17 00:00:00 2001 From: Annie Date: Thu, 7 Dec 2023 23:18:36 +0000 Subject: [PATCH] bug fix light and dark mode --- CSS/style.css | 2 +- CSS/theme.css | 35 +++++++ JS/theme.js | 56 +++++++++++ about.html | 3 - cuisines/asianCuisine.html | 2 +- cuisines/frenchCuisine.html | 4 +- cuisines/greekCuisine.html | 8 +- cuisines/indianCuisine.html | 9 +- cuisines/italianCuisine.html | 9 +- cuisines/mexicanCuisine.html | 8 +- cuisines/moroccanCuisine.html | 8 +- cuisines/spanishCuisine.html | 4 +- footer.html | 134 ++++++++++++++++++++----- navbar.html | 180 ++++++++-------------------------- 14 files changed, 281 insertions(+), 181 deletions(-) create mode 100644 CSS/theme.css create mode 100644 JS/theme.js diff --git a/CSS/style.css b/CSS/style.css index 76d54c2..d253256 100644 --- 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 new file mode 100644 index 0000000..29bd0b8 --- /dev/null +++ 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 new file mode 100644 index 0000000..9e03a76 --- /dev/null +++ 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 index 440dc76..8fa1b83 100644 --- a/about.html +++ b/about.html @@ -26,10 +26,7 @@ - - -
diff --git a/cuisines/asianCuisine.html b/cuisines/asianCuisine.html index 9bb39b1..a26ba54 100644 --- a/cuisines/asianCuisine.html +++ b/cuisines/asianCuisine.html @@ -11,7 +11,7 @@ - + Tasteful Twist | Asian Cuisine diff --git a/cuisines/frenchCuisine.html b/cuisines/frenchCuisine.html index e735a90..8898006 100644 --- a/cuisines/frenchCuisine.html +++ b/cuisines/frenchCuisine.html @@ -1,5 +1,5 @@ - + @@ -11,7 +11,7 @@ - + Tasteful Twist | French Cuisine diff --git a/cuisines/greekCuisine.html b/cuisines/greekCuisine.html index 5ed6fb7..48267ce 100644 --- a/cuisines/greekCuisine.html +++ b/cuisines/greekCuisine.html @@ -11,12 +11,15 @@ - + Tasteful Twist | Greek Cuisine - +
+ +
@@ -56,6 +59,7 @@

Greek Cuisine

+ \ No newline at end of file diff --git a/cuisines/indianCuisine.html b/cuisines/indianCuisine.html index 84c6799..cf21290 100644 --- a/cuisines/indianCuisine.html +++ b/cuisines/indianCuisine.html @@ -1,5 +1,5 @@ - + @@ -11,11 +11,15 @@ + Tasteful Twist | Indian Cuisine - +
+ +
@@ -55,6 +59,7 @@

Indian Cuisine

+ \ No newline at end of file diff --git a/cuisines/italianCuisine.html b/cuisines/italianCuisine.html index 46f90cf..5c60e12 100644 --- a/cuisines/italianCuisine.html +++ b/cuisines/italianCuisine.html @@ -1,5 +1,5 @@ - + @@ -11,11 +11,15 @@ + Tasteful Twist | Italian Cuisine - +
+ +
@@ -54,6 +58,7 @@

Italian Cuisine

+ \ No newline at end of file diff --git a/cuisines/mexicanCuisine.html b/cuisines/mexicanCuisine.html index 66aa35a..f05ed73 100644 --- a/cuisines/mexicanCuisine.html +++ b/cuisines/mexicanCuisine.html @@ -1,5 +1,5 @@ - + @@ -11,10 +11,15 @@ + Tasteful Twist | Mexican Cuisine +
+ +
@@ -56,6 +61,7 @@

Mexican Cuisine

+ \ No newline at end of file diff --git a/cuisines/moroccanCuisine.html b/cuisines/moroccanCuisine.html index 3b44210..b85c7ad 100644 --- a/cuisines/moroccanCuisine.html +++ b/cuisines/moroccanCuisine.html @@ -1,5 +1,5 @@ - + @@ -11,10 +11,15 @@ + Tasteful Twist | Moroccan Cuisine +
+ +
@@ -55,6 +60,7 @@

Moroccan Cuisine

+ \ No newline at end of file diff --git a/cuisines/spanishCuisine.html b/cuisines/spanishCuisine.html index 430c1bf..2c09792 100644 --- a/cuisines/spanishCuisine.html +++ b/cuisines/spanishCuisine.html @@ -11,7 +11,7 @@ - + Tasteful Twist | Spanish Cuisine @@ -59,7 +59,7 @@

Spanish Cuisine

- + \ No newline at end of file diff --git a/footer.html b/footer.html index 33c3adc..5531f44 100644 --- a/footer.html +++ b/footer.html @@ -1,29 +1,109 @@ -
-
-

© 2023 TastefulTwists, Inc. All rights reserved.

- -
-
+
+
+
+ logo + +
+ +
+
+ +
+ +
+
+ +
+ + +
+ +
+

© 2023 TastefulTwists, Inc. All rights reserved.

+ +
+
+
\ No newline at end of file diff --git a/navbar.html b/navbar.html index 8b2a8f7..0ff5647 100644 --- a/navbar.html +++ b/navbar.html @@ -1,7 +1,7 @@ -