dark theme changes

update

Author: Srishti-j18

bakerydemo/static/css/main.css

@@ -47,6 +47,22 @@ each detail view
   /* stylelint-enable */
   --font-sm: 1rem;
   --font-md: 1.125rem;
+  --text-on-media: #fff;
+}
+
+:root[data-theme='dark'] {
+  --dark: #f1f4f8;
+  --grey: #acb5c0;
+  --border-grey: #3e4855;
+  --transparent-border: rgb(164 180 201 / 30%);
+  --white: #11161d;
+  --cream: #1a222d;
+  --light-brown: #c8b083;
+  --mid-brown: #f0b45d;
+  --dark-brown: #ffe0b0;
+  --orange: #f0b45d;
+  --dark-orange: #ffd29b;
+  --text-on-media: #fff;
 }
 
 html {
@@ -70,6 +86,10 @@ body {
   min-height: 100vh;
 }
 
+html[data-theme='dark'] {
+  color-scheme: dark;
+}
+
 body.no-scroll {
   overflow-y: hidden;
 }
@@ -163,7 +183,7 @@ ul {
 }
 
 .hero h1 {
-  color: var(--white);
+  color: var(--text-on-media);
   position: relative;
 }
 
@@ -358,7 +378,7 @@ caption {
 }
 
 .hero__title {
-  color: var(--white);
+  color: var(--text-on-media);
   font-weight: 400;
   font-size: 2.875rem;
   line-height: 1.09;
@@ -619,6 +639,7 @@ caption {
   position: absolute;
   right: 13px;
   top: 13px;
+  color: var(--dark);
 }
 
 @media (min-width: 768px) {
@@ -628,13 +649,31 @@ caption {
 }
 
 .navigation__search-input {
+  background-color: var(--white);
   color: var(--dark);
   font-size: var(--font-sm);
   line-height: 1.5;
   border: 1px solid var(--dark);
   padding: 10px;
 }
 
+.navigation__theme-toggle {
+  appearance: none;
+  margin: 0 0 0 10px;
+  border: 1px solid var(--dark);
+  background-color: var(--white);
+  color: var(--dark);
+  padding: 10px 12px;
+  font-size: 0.875rem;
+  line-height: 1;
+}
+
+.navigation__theme-toggle:hover,
+.navigation__theme-toggle:focus {
+  background-color: var(--dark);
+  color: var(--white);
+}
+
 .navigation__items {
   list-style: none;
   margin: 0;
@@ -652,12 +691,16 @@ caption {
 
   .navigation__search {
     display: block;
-    margin: 0 0 0 auto;
+    margin: 0 0 0 10px;
   }
 
   .navigation__items {
     padding: 0 0 0 20px;
   }
+
+  .navigation__theme-toggle {
+    margin: 0 0 0 auto;
+  }
 }
 
 .navigation__items > li {
@@ -1390,7 +1433,7 @@ input[type='radio'] {
 .homepage .home-hero .lead {
   font-family: var(--font--primary);
   font-weight: 400;
-  color: var(--white);
+  color: var(--text-on-media);
   margin: 40px auto;
   font-size: 1.625rem;
   line-height: 1.15;
@@ -1753,7 +1796,7 @@ input[type='radio'] {
 }
 
 .picture-card__title {
-  color: var(--white);
+  color: var(--text-on-media);
   font-family: var(--font--primary);
   font-size: 1.625rem;
   line-height: 1.15;

bakerydemo/static/js/main.js

@@ -1,24 +1,71 @@
 document.addEventListener('DOMContentLoaded', () => {
   const navigation = document.querySelector('[data-navigation]');
-  const mobileNavigation = navigation.querySelector('[data-mobile-navigation]');
-  const body = document.querySelector('body');
-  const mobileNavigationToggle = navigation.querySelector(
-    '[data-mobile-navigation-toggle]',
-  );
+  const themeToggle = document.querySelector('[data-theme-toggle]');
+  const htmlElement = document.documentElement;
+  const storage = {
+    get(key) {
+      try {
+        return localStorage.getItem(key);
+      } catch {
+        return null;
+      }
+    },
+    set(key, value) {
+      try {
+        localStorage.setItem(key, value);
+      } catch {
+        // Ignore storage failures and keep the theme change in-memory only.
+      }
+    },
+  };
 
-  function toggleMobileNavigation() {
-    if (mobileNavigation.hidden) {
-      body.classList.add('no-scroll');
-      mobileNavigation.hidden = false;
-      mobileNavigationToggle.setAttribute('aria-expanded', 'true');
-    } else {
-      body.classList.remove('no-scroll');
-      mobileNavigation.hidden = true;
-      mobileNavigationToggle.setAttribute('aria-expanded', 'false');
+  function updateThemeToggleLabel() {
+    if (!themeToggle) {
+      return;
     }
+    const isDarkTheme = htmlElement.dataset.theme === 'dark';
+    themeToggle.textContent = isDarkTheme ? 'Light mode' : 'Dark mode';
+    themeToggle.setAttribute('aria-pressed', isDarkTheme ? 'true' : 'false');
+    themeToggle.setAttribute(
+      'aria-label',
+      isDarkTheme ? 'Switch to light theme' : 'Switch to dark theme',
+    );
   }
 
-  mobileNavigationToggle.addEventListener('click', () => {
-    toggleMobileNavigation();
-  });
+  if (navigation) {
+    const mobileNavigation = navigation.querySelector(
+      '[data-mobile-navigation]',
+    );
+    const body = document.querySelector('body');
+    const mobileNavigationToggle = navigation.querySelector(
+      '[data-mobile-navigation-toggle]',
+    );
+
+    function toggleMobileNavigation() {
+      if (mobileNavigation.hidden) {
+        body.classList.add('no-scroll');
+        mobileNavigation.hidden = false;
+        mobileNavigationToggle.setAttribute('aria-expanded', 'true');
+      } else {
+        body.classList.remove('no-scroll');
+        mobileNavigation.hidden = true;
+        mobileNavigationToggle.setAttribute('aria-expanded', 'false');
+      }
+    }
+
+    mobileNavigationToggle.addEventListener('click', () => {
+      toggleMobileNavigation();
+    });
+  }
+
+  if (themeToggle) {
+    updateThemeToggleLabel();
+
+    themeToggle.addEventListener('click', () => {
+      const nextTheme = htmlElement.dataset.theme === 'dark' ? 'light' : 'dark';
+      htmlElement.dataset.theme = nextTheme;
+      storage.set('theme', nextTheme);
+      updateThemeToggleLabel();
+    });
+  }
 });

bakerydemo/templates/base.html

@@ -23,6 +23,19 @@
             <base target="_blank">
         {% endif %}
 
+        <script>
+            (() => {
+                let storedTheme = null;
+                try {
+                    storedTheme = localStorage.getItem("theme");
+                } catch (error) {
+                    storedTheme = null;
+                }
+                const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+                document.documentElement.dataset.theme = storedTheme || (prefersDark ? "dark" : "light");
+            })();
+        </script>
+
         <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
         <link rel="stylesheet" href="{% static 'css/font-marcellus.css' %}">
         <link rel="stylesheet" href="{% static 'css/main.css' %}">

bakerydemo/templates/includes/header.html

@@ -44,6 +44,16 @@
                 </ul>
             </nav>
 
+            <button
+                type="button"
+                class="navigation__theme-toggle"
+                data-theme-toggle
+                aria-label="Toggle dark theme"
+                aria-pressed="false"
+            >
+                Theme
+            </button>
+
             <form action="/search" method="get" class="navigation__search" role="search">
                 <label for="search-input" class="u-sr-only">Search the bakery</label>
                 <input class="navigation__search-input" id="search-input" type="text" placeholder="Search" autocomplete="off" name="q">