En 2026, el modo oscuro ya no es una función «de nicho para desarrolladores». Los estudios de uso muestran que entre el 60 y el 80% de los usuarios activan el modo oscuro en su sistema operativo al menos parte del día. Una tienda sin modo oscuro ya no está a la altura de las expectativas UX de 2026 y envía a sus visitantes un destello blanco agresivo en cada carga de página, especialmente molesto por la noche y en móvil.
Shopware 6.7 no ofrece modo oscuro nativo en el storefront. Esta ausencia no es trivial: una implementación limpia requiere gestionar varios aspectos técnicos (anti-FOUC, persistencia entre dispositivos, compatibilidad Bootstrap, sincronización con otros componentes) que raramente se hacen bien sin un plugin dedicado. Esta guía detalla cómo implementar un modo oscuro completo y eficiente en Shopware 6.7, con las trampas técnicas a evitar.
Por qué el modo oscuro se ha convertido en un estándar UX en 2026
El uso del modo oscuro del sistema operativo ha pasado de nicho a generalizado desde iOS 13 y macOS Mojave. Las estadísticas de 2025 muestran que el 80% de los usuarios de iOS y el 65% de los de Android lo tienen activado al menos ocasionalmente. Los grandes plataformas (Twitter/X, Reddit, GitHub, Notion, Slack) ofrecen todas un modo oscuro pulido. Los usuarios esperan poder cambiar al modo oscuro en cualquier interfaz y perciben negativamente los sitios que no lo ofrecen.
La trampa del destello blanco (FOUC) — por qué es eliminatorio en UX
FOUC significa «Flash of Unstyled Content» — aplicado al modo oscuro, es el breve destello blanco visible antes de que el JavaScript de modo oscuro se ejecute. La causa técnica es conocida: la mayoría de los plugins de modo oscuro aplican el tema via JavaScript en DOMContentLoaded, un evento que se activa después del primer pintado del navegador. La solución: inyectar un script en línea mínimo directamente en la etiqueta head que lea la cookie de preferencia (síncrono, ~10 líneas de JS) y establezca el atributo data-bs-theme en el elemento raíz antes del primer pintado del navegador.
Arquitectura de un modo oscuro limpio en Shopware 6.7
Un modo oscuro completo se apoya en cinco componentes: (1) una convención CSS compatible con tu tema (data-bs-theme="dark" de Bootstrap 5.3), (2) un script anti-FOUC al inicio de la etiqueta head, (3) un toggle en el header con 3 estados (Auto / Claro / Oscuro), (4) persistencia por cookie para visitantes (1 año, SameSite=Lax), (5) campo personalizado de cliente para los conectados. La orquestación: al iniciar sesión, sincroniza la cookie con el campo personalizado; en cada cambio de preferencia, actualiza ambos. El resultado es un modo oscuro «entre dispositivos» que sigue al cliente en todas partes.
Implementación paso a paso en Shopware 6.7
Paso 1 — Verificar la convención CSS de tu tema. Busca [data-bs-theme="dark"] en theme/Resources/app/storefront/src/scss/.
Paso 2 — Añadir el script anti-FOUC en el base layout. Override de base.html.twig para añadir un script en línea lo más arriba posible en la etiqueta head, que lea la cookie df-dark-mode y aplique el atributo antes del primer pintado.
Paso 3 — Crear el componente toggle. Componente Twig simple con un botón que alterna entre los 3 estados. Incluirlo en el bloque base_header_actions_wishlist o en otro según el diseño.
Paso 4 — Implementar la lógica JavaScript. Plugin JS del storefront que escucha los clics en el toggle, actualiza el estado, escribe la cookie, actualiza data-bs-theme, emite el evento personalizado df-dark-mode-changed y, si el usuario está conectado, envía un POST a una ruta Shopware para actualizar el campo personalizado.
Paso 5 — Plugin PHP para el campo personalizado y la ruta AJAX. Plugin estándar de Shopware 6.7 que crea el campo personalizado df_dark_mode_preference, expone la ruta /df-dark-mode/save, engancha CustomerLoginEvent para la sincronización al iniciar sesión y elimina el campo personalizado al desinstalar.
Esto es lo que hace nuestro plugin DataFirefly Dark Mode: toggle de 3 estados, anti-FOUC garantizado, persistencia híbrida cookie + campo personalizado de cliente, sincronización al login, evento JS para integraciones de terceros. Listo en 3 minutos.
Sincronizar el modo oscuro con otros componentes de la página
Algunos componentes de terceros (gráficos Recharts/Chart.js, iframes externos, widgets de chat en vivo) necesitan saber qué tema está aplicado para adaptarse. La solución limpia: un evento JavaScript personalizado df-dark-mode-changed emitido en document con cada cambio de tema, que expone la preferencia bruta (auto/claro/oscuro) y el tema efectivamente aplicado. Los componentes interesados escuchan con document.addEventListener y adaptan su renderizado en consecuencia.
Conclusión: una inversión moderada, una señal de calidad fuerte
El modo oscuro en Shopware 6.7 combina varios detalles (anti-FOUC, persistencia entre dispositivos, compatibilidad Bootstrap, evento de sincronización) que deben estar todos bien hechos para que la experiencia sea limpia. Un modo oscuro mal hecho degrada la UX en lugar de mejorarla.
Consulta nuestras categorías Conversión & UX y Performance & Core Web Vitals para temas relacionados. Y para un modo oscuro Shopware 6.7 listo para desplegar, el plugin DataFirefly Dark Mode implementa todo esto con una instalación de 3 minutos.