FarmaFinder/.mimocode/plans/1783593202807-swift-garden.md

# Plan: Dark Mode para FarmaFinder Mobile

## Objetivo
Añadir soporte de modo oscuro a la app móvil con:
- Detección automática del modo oscuro del sistema
- Toggle manual en la pantalla de perfil (Configuración)
- Persistencia de la preferencia del usuario

## Arquitectura

### 1. Theme Store (Zustand + AsyncStorage)
**Nuevo archivo: `store/themeStore.ts`**

- Estado: `mode: 'light' | 'dark' | 'system'`
- Persistencia con `@react-native-async-storage/async-storage`
- Acciones: `setMode()`, `init()` (carga del storage al arrancar)
- Por defecto: `'system'` (respeta el dispositivo)

### 2. Hook `useThemeColor`
**Nuevo archivo: `hooks/useThemeColor.ts`**

- Usa `useColorScheme()` de React Native para detectar el color del sistema
- Combina con el `mode` del themeStore para determinar el tema efectivo
- Retorna el objeto `colors` apropiado (light o dark)
- Los componentes consumirán este hook en vez de importar `colors` directamente

### 3. Paleta de colores oscura
**Modificar: `constants/theme.ts`**

Añadir exportación `darkColors` con la paleta oscura:

| Token | Light (actual) | Dark (nuevo) |
|---|---|---|
| `background` | `#fbfbfb` | `#121212` |
| `card` | `#ffffff` | `#1e1e1e` |
| `surfaceLow` | `#f2f4f5` | `#2a2a2a` |
| `surface` | `#eceeef` | `#333333` |
| `surfaceHigh` | `#e6e8e9` | `#3a3a3a` |
| `border` | `#c0c9bb` | `#3a3a3a` |
| `separator` | `#c0c9bb` | `#3a3a3a` |
| `text` | `#111417` | `#f0f0f0` |
| `textSecondary` | `#41493e` | `#a0a0a0` |
| `textInverse` | `#ffffff` | `#111417` |
| `primaryContainer` | `#cfead0` | `#1a3a1c` |
| `onPrimaryContainer` | `#0d2b12` | `#cfead0` |
| `secondaryContainer` | `#dbe7ff` | `#1a2a4a` |
| `tertiaryContainer` | `#efe7ff` | `#2a1a4a` |
| `dangerContainer` | `#feecec` | `#3a1a1a` |
| `accentWarm` | `#f5a97a` | `#f5a97a` (sin cambio) |
| `primary`, `secondary`, `tertiary`, `scanButton`, `success`, `danger`, `warning` | (sin cambios) | (sin cambios) |

### 4. Provider wrapper
**Nuevo archivo: `components/ThemeProvider.tsx`**

- Lee el `mode` del themeStore y el `useColorScheme()` del sistema
- Calcula el tema efectivo (`light` o `dark`)
- Provee `colors` y `isDark` vía React Context
- Carga la preferencia guardada en AsyncStorage al montar

### 5. Integración en Root Layout
**Modificar: `app/_layout.tsx`**

- Envolver toda la app con `<ThemeProvider>`
- El `StatusBar` se ajusta: `style={isDark ? 'light' : 'auto'}`
- Los colores del Stack header se leen del contexto

### 6. Toggle en el perfil
**Modificar: `app/(tabs)/profile.tsx`**

Añadir en la pantalla de perfil (antes de "Configuración") un nuevo item de menú:
- Icono: `moon-outline` / `sunny-outline` según el tema actual
- Texto: "Modo de pantalla"
- Al pulsar, mostrar un picker/modal con 3 opciones:
  - **Sistema** (icono: phone-portrait) - respeta el SO
  - **Claro** (icono: sunny) - fuerza light
  - **Oscuro** (icono: moon) - fuerza dark
- El toggle se muestra inline (sin modal extra) tipo Segmented Control

### 7. Actualizar todos los screens y components

Cada archivo que importa `colors` debe cambiar a usar el hook `useThemeColor()`:

| Archivo | Cambio |
|---|---|
| `app/_layout.tsx` | Usa ThemeProvider + context para header colors |
| `app/(tabs)/_layout.tsx` | Tab bar y header leen colors del context |
| `app/(tabs)/index.tsx` | `const { colors } = useThemeColor()` |
| `app/(tabs)/search.tsx` | `const { colors } = useThemeColor()` |
| `app/(tabs)/scan.tsx` | `const { colors } = useThemeColor()` |
| `app/(tabs)/alerts.tsx` | `const { colors } = useThemeColor()` |
| `app/(tabs)/profile.tsx` | `const { colors, isDark } = useThemeColor()` |
| `app/(tabs)/map.tsx` | `const { colors } = useThemeColor()` |
| `app/medicine/[id].tsx` | `const { colors } = useThemeColor()` |
| `app/pharmacy/[id].tsx` | `const { colors } = useThemeColor()` |
| `app/auth/login.tsx` | `const { colors } = useThemeColor()` |
| `app/auth/register.tsx` | `const { colors } = useThemeColor()` |
| `components/SearchBar.tsx` | `const { colors } = useThemeColor()` |
| `components/MedicineCard.tsx` | `const { colors } = useThemeColor()` |
| `components/LoadingSpinner.tsx` | `const { colors } = useThemeColor()` |
| `components/StockBadge.tsx` | Añade colores dark para badges |
| `components/BarcodeScanner.tsx` | `const { colors } = useThemeColor()` |

**Nota sobre StyleSheet**: Los `StyleSheet.create()` se ejecutan una vez. Para que los estilos se actualicen con el tema, las propiedades que dependen de `colors` deben aplicarse vía `style` inline o moverse a funciones que retornen estilos dinámicos. La estrategia más limpia es:
- Los colores de fondo/texto van como inline styles
- Las estructuras (flex, padding, borderRadius) se quedan en `StyleSheet.create`

### 8. Colores hardcodeados
Los siguientes archivos tienen colores inline hardcodeados que necesitan variante dark:

- **`StockBadge.tsx`**: `#eaf7ec`, `#fff3cd`, `#feecec` → añadir tokens al tema
- **`search.tsx`**: suggestions con `#ffffff`, `#f0f7ff`, etc. → usar colores del tema
- **`profile.tsx`**: feedback `#eaf7ec`, `#cfead0`, `#fecaca` → usar colores del tema
- **`home/index.tsx`**: `rgba(255,255,255,0.2/0.3)` para iconos → ajustar opacidad

### 9. app.json
**Modificar: `app.json`**

Cambiar `"userInterfaceStyle": "light"` → `"userInterfaceStyle": "automatic"`

## Orden de ejecución

1. `store/themeStore.ts` (nuevo)
2. `hooks/useThemeColor.ts` (nuevo)
3. `constants/theme.ts` (añadir `darkColors`)
4. `components/ThemeProvider.tsx` (nuevo)
5. `app/_layout.tsx` (envolver con ThemeProvider)
6. `app/(tabs)/_layout.tsx` (colores dinámicos)
7. `app/(tabs)/profile.tsx` (toggle de tema)
8. Todos los screens y components (migrar a hook)
9. `app.json` (userInterfaceStyle: automatic)
10. Corregir colores hardcodeados

## Verificación

1. Ejecutar `npx expo start` y verificar que la app arranca sin errores
2. Probar en iOS/Android: el tema respeta la configuración del sistema
3. Ir a Perfil > Modo de pantalla y cambiar entre Claro/Oscuro/Sistema
4. Verificar que el cambio es inmediato sin recargar la app
5. Cerrar y reabrir la app → la preferencia persiste
6. Verificar que todos los screens se ven bien en ambos modos (sin texto invisible, sin fondos transparentes)
7. Probar tablets ( responsive)