Todo lo que querrías saber antes de instalar.
Una mirada detallada a cómo funciona DataFirefly Dark Mode — Modo oscuro con detección de navegador y preferencia de cliente para Shopware 6.7, por qué lo construimos así y la lógica detrás de las características anteriores.
¿Por qué un modo oscuro en Shopware 6.7?
Shopware 6.7 no ofrece modo oscuro nativo en el storefront. Sin embargo, desde 2023, el modo oscuro del sistema operativo está masivamente adoptado: iOS cambia automáticamente por la noche con True Tone, macOS y Windows tienen ajustes de brillo automático, los usuarios avanzados mantienen su pantalla en oscuro entre el 60 y el 80 % del tiempo. Una tienda sin modo oscuro envía a estos visitantes un destello blanco agresivo en cada carga de página, especialmente molesto por la noche y en móvil. Es una señal de calidad al revés: tu sitio no está al día con los usos de 2026. DfDarkMode cubre esta carencia con una implementación limpia, anti-FOUC, que respeta la preferencia del cliente.
Anti-FOUC: el detalle que separa un modo oscuro profesional de uno improvisado
FOUC significa «Flash of Unstyled Content»: esa fracción de segundo en la que la página aparece en blanco antes de que JavaScript aplique el tema oscuro. La mayoría de los plugins de modo oscuro dejan este destello porque aplican el tema mediante JavaScript en DOMContentLoaded, que se activa después del primer pintado del navegador. DfDarkMode resuelve el problema con un script en línea mínimo colocado directamente en la etiqueta head del base layout: este script lee la cookie de preferencia (síncrono, unas 10 líneas de JS) y establece el atributo data-bs-theme en el elemento raíz ANTES de que el navegador haga su primer pintado. Resultado: cero destello blanco, incluso en la primera carga y en modo oscuro forzado.
3 estados y persistencia completa
El toggle en el encabezado alterna entre Auto, Claro, Oscuro. Auto sigue el prefers-color-scheme del navegador en tiempo real mediante un MediaQuery listener: cuando el sistema operativo del visitante cambia a oscuro a las 18h, el storefront cambia instantáneamente sin recargar la página. Claro y Oscuro fuerzan el modo independientemente de la preferencia del navegador. La preferencia se persiste de forma diferente según el estado: visitantes anónimos mediante cookie df-dark-mode válida 1 año, clientes conectados mediante campo personalizado df_dark_mode_preference creado automáticamente en la instalación. La página de perfil de cliente incluye una tarjeta de selección para cambiar la preferencia directamente desde la cuenta. Al iniciar sesión, la cookie se sincroniza con el valor del campo personalizado.
Compatibilidad Bootstrap data-bs-theme: cero CSS que escribir
Bootstrap 5.3+ introdujo la convención data-bs-theme="dark" como estándar para el modo oscuro. Si tu tema de Shopware ya usa reglas CSS para [data-bs-theme="dark"] (el caso de la mayoría de los temas premium de 2025+), DfDarkMode es inmediatamente compatible: instalas, activas y funciona. Si tu tema aún no tiene estilos oscuros, puedes usar las variables nativas de Bootstrap o añadir tus propias reglas a tu ritmo. DfDarkMode no toca tu CSS: solo establece un atributo en el elemento raíz de la página.
Arquitectura Shopware limpia y estándar
El plugin sigue estrictamente las convenciones de Shopware 6.7: autoload PSR-4 bajo el namespace Df/DarkMode, clase Plugin con ciclo de vida install / update / uninstall, campo personalizado de cliente creado mediante el repositorio DAL estándar, ruta AJAX declarada mediante atributos PHP 8 de Symfony Routing, servicios inyectados mediante services.xml, suscriptores adjuntos a kernel.event_subscriber. La desinstalación respeta el indicador keepUserData del contexto de Shopware. Sin migraciones de esquema personalizadas. Código fuente en texto claro, con licencia MIT, auditable.
Personalización y evento JS para integraciones
Por defecto, el toggle se inserta en el bloque base_header_actions_wishlist del base layout. Para moverlo, sobreescribe base.html.twig y coloca el componente dark-mode-toggle en otro bloque (búsqueda, cuenta, personalizado, etc.): ejemplo completo en el README. En el lado JS, el plugin emite un evento df-dark-mode-changed en el documento con cada cambio, con event.detail.preference (auto / light / dark) y event.detail.resolvedTheme (light / dark calculado). Útil para sincronizar otro componente (gráfico Recharts, iframe externo, embed de Calendly, etc.) con el tema actual.
No hay valoraciones aún.