Merge pull request 'Add dark mode for PWA frontend' (#25) from dark_mode_frontend into main

Reviewed-on: #25

.mimocode/.cron-lock

@@ -1 +1 @@
-{"pid":864463,"startedAt":1783550197179}
+{"pid":233628,"startedAt":1783590885727}

apps/frontend/src/App.jsx

@@ -24,11 +24,38 @@ function App() {
     height: window.innerHeight
   });
 
+  // Theme: 'auto' | 'light' | 'dark'
+  const [theme, setThemeState] = useState(() => {
+    return localStorage.getItem('ff-theme') || 'auto';
+  });
+
   // Device detection
   const isMobile = screenSize.width <= 768;
   const isTablet = screenSize.width > 768 && screenSize.width <= 1024;
   const isDesktop = screenSize.width > 1024;
 
+  // Apply theme to document
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function applyTheme() {
+      const isDark = theme === 'dark' || (theme === 'auto' && mq.matches);
+      document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+    }
+
+    applyTheme();
+
+    if (theme === 'auto') {
+      mq.addEventListener('change', applyTheme);
+      return () => mq.removeEventListener('change', applyTheme);
+    }
+  }, [theme]);
+
+  function setTheme(newTheme) {
+    setThemeState(newTheme);
+    localStorage.setItem('ff-theme', newTheme);
+  }
+
   useEffect(() => {
     // Set initial screen size
     const handleResize = () => {
@@ -131,6 +158,8 @@ function App() {
           onShowSaved={() => setShowSaved(true)}
           onLogout={handleLogout}
           onAdminClick={handleAdminClick}
+          theme={theme}
+          onThemeChange={setTheme}
         />
       );
       break;

apps/frontend/src/components/BottomNav.css

@@ -65,9 +65,9 @@
   height: 3.5rem;
   border-radius: var(--radius-full);
   /* Stronger, brighter blue to make scan button easy to find */
-  background: #2b5bb5;
+  background: var(--fab-bg);
-  color: #ffffff;
+  color: var(--fab-text);
-  box-shadow: 0 8px 26px rgba(43, 91, 181, 0.32);
+  box-shadow: 0 8px 26px var(--fab-shadow);
   margin-top: -1.5rem;
   transition: transform 0.12s, box-shadow 160ms ease;
 }
@@ -78,12 +78,12 @@
 
 .nav-fab:hover {
   transform: translateY(-2px);
-  box-shadow: 0 12px 36px rgba(43, 91, 181, 0.36);
+  box-shadow: 0 12px 36px var(--fab-shadow);
 }
 
 .nav-fab:focus {
   outline: none;
-  box-shadow: 0 0 0 6px rgba(43,91,181,0.12), 0 8px 26px rgba(43, 91, 181, 0.32);
+  box-shadow: 0 0 0 6px rgba(43,91,181,0.12), 0 8px 26px var(--fab-shadow);
 }
 
 .nav-badge {

apps/frontend/src/components/LoginModal.css

@@ -118,7 +118,7 @@
 
 .modal-error {
   font-size: 0.82rem;
-  color: #b91c1c;
+  color: var(--error);
   margin: 0.25rem 0 0.75rem;
 }
 
@@ -149,7 +149,7 @@
 .modal-submit {
   background: var(--primary);
   border: none;
-  color: #fff;
+  color: var(--on-primary);
   padding: 0.55rem 1.35rem;
   border-radius: 999px;
   cursor: pointer;

apps/frontend/src/components/PharmacyList.css

@@ -139,8 +139,8 @@
 }
 
 .stock.low-stock {
-  background: rgba(180, 83, 9, 0.12);
+  background: var(--warning-container);
-  color: #b45309;
+  color: var(--warning);
 }
 
 .stock.out-of-stock {

apps/frontend/src/components/SavedNotifications.css

@@ -73,7 +73,7 @@
 }
 
 .saved-notifications-error {
-  color: #b91c1c;
+  color: var(--error);
 }
 
 .saved-notifications-list {
@@ -155,8 +155,8 @@
 }
 
 .saved-notifications-remove:hover:not(:disabled) {
-  border-color: #b91c1c;
+  border-color: var(--error);
-  color: #b91c1c;
+  color: var(--error);
   background: rgba(185, 28, 28, 0.06);
 }
 

apps/frontend/src/index.css

@@ -71,6 +71,101 @@
   --primary-shadow: rgba(127, 191, 143, 0.12);
   --primary-light: #eaf7ec;
   --primary-faint: rgba(127, 191, 143, 0.06);
+  --fab-bg: #2b5bb5;
+  --fab-text: #ffffff;
+  --fab-shadow: rgba(43, 91, 181, 0.32);
+  --warning: #b45309;
+  --warning-container: rgba(180, 83, 9, 0.12);
+  --suggestion-1: #ffffff;
+  --suggestion-2: #f0f7ff;
+  --suggestion-3: #e0f0ff;
+  --suggestion-4: #d4ebff;
+  --suggestion-border-1: #e2e8f0;
+  --suggestion-border-2: #dbeafe;
+  --suggestion-border-3: #bfdbfe;
+  --suggestion-border-4: #93c5fd;
+  --suggestion-text: #1e293b;
+  --suggestion-icon-bg: rgba(59, 130, 246, 0.08);
+  --suggestion-icon-color: #3b82f6;
+}
+
+/* ── Dark mode ── */
+[data-theme="dark"] {
+  --primary: #8ed4a0;
+  --on-primary: #003912;
+  --primary-container: #1a5c2a;
+  --on-primary-container: #c2ecd0;
+  --secondary: #b8c9ff;
+  --on-secondary: #1a3066;
+  --secondary-container: #2a4080;
+  --on-secondary-container: #d9e2ff;
+  --tertiary: #dac4ff;
+  --on-tertiary: #3b2a5a;
+  --tertiary-container: #524070;
+  --on-tertiary-container: #efe7ff;
+  --surface: #111417;
+  --on-surface: #e1e3e4;
+  --on-surface-variant: #c0c9bb;
+  --surface-container-lowest: #0c0e10;
+  --surface-container-low: #191c1d;
+  --surface-container: #1e2122;
+  --surface-container-high: #282b2c;
+  --surface-container-highest: #333637;
+  --error: #ffb4ab;
+  --on-error: #690005;
+  --error-container: #93000a;
+  --on-error-container: #ffdad6;
+  --outline: #8a9486;
+  --outline-variant: #41493e;
+  --on-background: #e1e3e4;
+  --inverse-surface: #e1e3e4;
+  --inverse-on-surface: #2e3132;
+  --inverse-primary: #2e7d32;
+  --surface-tint: #8ed4a0;
+  --surface-dim: #111417;
+  --surface-bright: #373a3b;
+  --surface-variant: #41493e;
+  --primary-fixed: #acf4a4;
+  --primary-fixed-dim: #91d78a;
+  --secondary-fixed: #d9e2ff;
+  --secondary-fixed-dim: #b0c6ff;
+  --tertiary-fixed: #e9ddff;
+  --tertiary-fixed-dim: #cfbcff;
+
+  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.32);
+
+  --text-main: var(--on-surface);
+  --text-muted: var(--on-surface-variant);
+  --surface-muted: var(--surface-container-low);
+  --surface-card: var(--surface-container-lowest);
+  --border: var(--outline-variant);
+  --border-strong: var(--outline);
+  --glass-bg: var(--surface-container);
+  --glass-border: var(--outline-variant);
+  --glass-shadow: var(--shadow-soft);
+  --accent: var(--primary);
+  --accent-warm: #f5a97a;
+  --primary-hover: #a0dfb0;
+  --primary-ring: rgba(142, 212, 160, 0.25);
+  --primary-shadow: rgba(142, 212, 160, 0.15);
+  --primary-light: #0d2b12;
+  --primary-faint: rgba(142, 212, 160, 0.08);
+  --fab-bg: #5b8bd5;
+  --fab-text: #ffffff;
+  --fab-shadow: rgba(91, 139, 213, 0.35);
+  --warning: #f59e0b;
+  --warning-container: rgba(245, 158, 11, 0.15);
+  --suggestion-1: #1e2122;
+  --suggestion-2: #1a2332;
+  --suggestion-3: #1a2a3a;
+  --suggestion-4: #1a3040;
+  --suggestion-border-1: #333637;
+  --suggestion-border-2: #2a4080;
+  --suggestion-border-3: #2a4a8a;
+  --suggestion-border-4: #3060a0;
+  --suggestion-text: #e1e3e4;
+  --suggestion-icon-bg: rgba(96, 165, 250, 0.12);
+  --suggestion-icon-color: #60a5fa;
 }
 
 * {
@@ -79,6 +174,14 @@
   box-sizing: border-box;
 }
 
+html {
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
 html, body {
   height: 100%;
   overflow: hidden;
@@ -117,6 +220,14 @@ body::after {
   z-index: -1;
 }
 
+[data-theme="dark"] body::before {
+  opacity: 0.15;
+}
+
+[data-theme="dark"] body::after {
+  background-color: rgba(0, 0, 0, 0.55);
+}
+
 #root {
   height: 100dvh;
   overflow: hidden;

apps/frontend/src/views/HomeView.css

@@ -192,9 +192,9 @@
 
 .home-card--scan {
   /* Keep the scan button vivid and easy to find (intentionally prominent) */
-  background: #2b5bb5; /* vivid blue to stand out */
+  background: var(--fab-bg);
-  color: #ffffff;
+  color: var(--fab-text);
-  box-shadow: 0 8px 28px rgba(43, 91, 181, 0.28);
+  box-shadow: 0 8px 28px var(--fab-shadow);
   transform: translateY(0);
 }
 
@@ -204,7 +204,7 @@
 
 .home-card--scan:focus {
   outline: none;
-  box-shadow: 0 0 0 6px rgba(43,91,181,0.12), 0 8px 28px rgba(43,91,181,0.28);
+  box-shadow: 0 0 0 6px rgba(43,91,181,0.12), 0 8px 28px var(--fab-shadow);
 }
 
 .home-card-icon {

apps/frontend/src/views/ProfileView.css

@@ -845,3 +845,63 @@
     align-self: flex-end;
   }
 }
+
+/* Theme Toggle */
+.menu-item-theme-label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--on-surface-variant);
+}
+
+.profile-theme-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.profile-theme-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+  background: var(--surface);
+  border: 2px solid var(--outline-variant);
+  border-radius: var(--radius);
+  cursor: pointer;
+  color: var(--on-surface-variant);
+  font-family: inherit;
+  text-align: left;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+
+.profile-theme-btn:hover {
+  border-color: var(--primary);
+  color: var(--on-surface);
+}
+
+.profile-theme-btn--active {
+  border-color: var(--primary);
+  background: var(--primary-faint);
+  color: var(--primary);
+}
+
+.profile-theme-btn--active .profile-theme-btn-label {
+  color: var(--primary);
+  font-weight: 700;
+}
+
+.profile-theme-btn-label {
+  flex: 1;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--on-surface);
+}
+
+.profile-theme-btn-desc {
+  font-size: 0.8rem;
+  color: var(--on-surface-variant);
+}
+
+.profile-modal-theme {
+  max-width: 24rem;
+}

apps/frontend/src/views/ProfileView.jsx

@@ -34,7 +34,7 @@ function resolveAvatarUrl(url) {
   return url;
 }
 
-function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick }) {
+function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, theme, onThemeChange }) {
   const [firstName, setFirstName] = useState(currentUser?.first_name || '');
   const [lastName, setLastName] = useState(currentUser?.last_name || '');
   const [avatarUrl, setAvatarUrl] = useState(resolveAvatarUrl(currentUser?.avatar_url));
@@ -57,6 +57,9 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick }) {
   const [configSaving, setConfigSaving] = useState(false);
   const [configFeedback, setConfigFeedback] = useState(null);
 
+  // Theme modal state
+  const [showTheme, setShowTheme] = useState(false);
+
   // Addresses modal state
   const [showAddresses, setShowAddresses] = useState(false);
   const [addresses, setAddresses] = useState([]);
@@ -410,6 +413,21 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick }) {
           </svg>
         </button>
 
+        <button className="profile-menu-item" onClick={() => setShowTheme(true)}>
+          <div className="menu-item-icon menu-item-icon--tertiary">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" />
+            </svg>
+          </div>
+          <span className="menu-item-label">Tema</span>
+          <span className="menu-item-theme-label">
+            {theme === 'auto' ? 'Automático' : theme === 'light' ? 'Claro' : 'Oscuro'}
+          </span>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron">
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
+
         {searchHistory.length > 0 && (
           <div className="profile-search-history">
             <p className="profile-section-sub">Tus búsquedas recientes:</p>
@@ -718,6 +736,44 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick }) {
           </div>
         </div>
       )}
+
+      {/* Theme Modal */}
+      {showTheme && (
+        <div className="profile-modal-backdrop" onClick={() => setShowTheme(false)}>
+          <div className="profile-modal profile-modal-theme" onClick={(e) => e.stopPropagation()}>
+            <div className="profile-modal-header">
+              <h3>Tema de visualización</h3>
+              <button className="profile-modal-close" onClick={() => setShowTheme(false)}>×</button>
+            </div>
+            <div className="profile-modal-body">
+              <p className="profile-section-sub">Elige cómo se ve la aplicación. En modo automático, se adapta al tema de tu dispositivo.</p>
+              <div className="profile-theme-options">
+                {[
+                  { value: 'auto', label: 'Automático', desc: 'Seguir sistema', icon: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z' },
+                  { value: 'light', label: 'Claro', desc: 'Siempre claro', icon: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.42 0-.39.39-.39 1.03 0 1.42l1.06 1.06c.39.39 1.03.39 1.42 0s.39-1.03 0-1.42L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.42 0-.39.39-.39 1.03 0 1.42l1.06 1.06c.39.39 1.03.39 1.42 0 .39-.39.39-1.03 0-1.42l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.42-.39-.39-1.03-.39-1.42 0l-1.06 1.06c-.39.39-.39 1.03 0 1.42s1.03.39 1.42 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.42-.39-.39-1.03-.39-1.42 0l-1.06 1.06c-.39.39-.39 1.03 0 1.42s1.03.39 1.42 0l1.06-1.06z' },
+                  { value: 'dark', label: 'Oscuro', desc: 'Siempre oscuro', icon: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z' },
+                ].map(({ value, label, desc, icon }) => (
+                  <button
+                    key={value}
+                    type="button"
+                    className={`profile-theme-btn ${theme === value ? 'profile-theme-btn--active' : ''}`}
+                    onClick={() => {
+                      onThemeChange(value);
+                      setShowTheme(false);
+                    }}
+                  >
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                      <path d={icon} />
+                    </svg>
+                    <span className="profile-theme-btn-label">{label}</span>
+                    <span className="profile-theme-btn-desc">{desc}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

apps/frontend/src/views/SearchView.css

@@ -58,35 +58,35 @@
 }
 
 .suggestion-btn--neutral-1 {
-  background: #ffffff;
+  background: var(--suggestion-1);
-  color: #1e293b;
+  color: var(--suggestion-text);
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--suggestion-border-1);
 }
 
 .suggestion-btn--neutral-2 {
-  background: #f0f7ff;
+  background: var(--suggestion-2);
-  color: #1e293b;
+  color: var(--suggestion-text);
-  border: 1px solid #dbeafe;
+  border: 1px solid var(--suggestion-border-2);
 }
 
 .suggestion-btn--neutral-3 {
-  background: #e0f0ff;
+  background: var(--suggestion-3);
-  color: #1e293b;
+  color: var(--suggestion-text);
-  border: 1px solid #bfdbfe;
+  border: 1px solid var(--suggestion-border-3);
 }
 
 .suggestion-btn--neutral-4 {
-  background: #d4ebff;
+  background: var(--suggestion-4);
-  color: #1e293b;
+  color: var(--suggestion-text);
-  border: 1px solid #93c5fd;
+  border: 1px solid var(--suggestion-border-4);
 }
 
 .suggestion-icon {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: var(--radius);
-  background: rgba(59, 130, 246, 0.08);
+  background: var(--suggestion-icon-bg);
-  color: #3b82f6;
+  color: var(--suggestion-icon-color);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -321,7 +321,7 @@
 
 .retry-location-btn {
   background: var(--error);
-  color: white;
+  color: var(--on-error);
   border: none;
   padding: 0.25rem 0.6rem;
   border-radius: var(--radius);