PrestaShop Diseño & Navegación

Módulo Modo Oscuro PrestaShop 8/9 — Tema oscuro automático

El modo oscuro que sus clientes esperan, sin tocar su tema.

Detección automática de la preferencia del sistema, memorización de la elección del visitante y generación automática de una paleta oscura completa. Dos motores de renderizado, cero parpadeo al cargar, compatible con cualquier tema de PrestaShop.

De un vistazo
  • Sigue automáticamente el modo oscuro del sistema del visitante (prefers-color-scheme)
  • Dos motores: filtro inteligente universal o paleta oscura generada en variables CSS
  • Cero parpadeo blanco al cargar: la clase oscura se aplica antes del primer renderizado
  • Botón colocable donde quiera: flotante, hook de tema, hook personalizado o widget
  • Sin modificar el tema, sin dependencias, menos de 8 KB añadidos
PrestaShop 8 y 9 Multitienda 5 idiomas Sin parpadeo Sin dependencias
  • Reembolso de 30 días
  • 12 meses de actualizaciones
  • Soporte 24h
www.datafirefly.com/es/
Module Dark Mode PrestaShop 8/9 — Mode sombre automatique
v1.1.0 · actualizado 2026-07-12
Qué hace

La versión corta.

01

Detección automática del modo del sistema

El módulo lee la preferencia de color del sistema operativo del visitante y se adapta en tiempo real: si su cliente cambia su Mac o su Android a oscuro, la tienda le sigue al instante, sin recargar.

02

Dos motores de renderizado a elegir

El filtro inteligente oscurece cualquier tema sin configuración, preservando los colores naturales de las fotos de producto. La paleta generada construye una verdadera gama oscura en variables CSS a partir de solo dos colores.

03

Cero parpadeo al cargar

Un script síncrono aplica la clase oscura antes del primer renderizado de la página. Sus visitantes en modo oscuro nunca ven el destello blanco típico de las soluciones de la competencia.

04

El botón donde usted quiera

Botón flotante en una de las cuatro posiciones, o interruptor integrado en la cabecera, el pie o cualquier hook de su tema, incluido un hook personalizado registrado automáticamente.

La versión larga

Todo lo que querrías saber antes de instalar.

Una mirada detallada a cómo funciona Módulo Modo Oscuro PrestaShop 8/9 — Tema oscuro automático, por qué lo construimos así y la lógica detrás de las características anteriores.

§ 01

El modo oscuro ya es un estándar, no una opción

La mayoría de los smartphones y ordenadores están configurados en tema oscuro, al menos durante parte del día. Un sitio que sigue siendo blanco deslumbrante a las 23 h en la pantalla de un móvil provoca una incomodidad visual inmediata, y a menudo un abandono. Este módulo aporta a su tienda PrestaShop la comodidad que sus clientes ya encuentran en todas partes, sin que usted tenga que tocar una sola línea de su tema.

§ 02

Sigue la preferencia de sus visitantes por sí solo

Por defecto, el módulo lee la preferencia de color del sistema operativo del visitante y aplica el modo correspondiente. Si el cliente cambia su dispositivo a modo oscuro mientras navega, la tienda le sigue en directo, sin recargar. En cuanto usa el botón para elegir explícitamente, su elección se guarda en su navegador y se recuerda en todas sus visitas posteriores.

§ 03

Un motor universal que respeta sus fotos de producto

El motor de filtro inteligente invierte la página y contrainvierte cada medio: imágenes, vídeos, iframes, canvas y fondos. Sus fotos de producto conservan por tanto sus colores naturales, y una camiseta blanca sigue siendo blanca. Una protección contra la doble inversión gestiona los medios anidados, un caso frecuente en los temas que usan el elemento picture para el responsive. El brillo y el contraste son ajustables para afinar el resultado.

§ 04

O una verdadera paleta oscura, generada para usted

El segundo motor calcula una gama oscura completa a partir de solo dos colores: un fondo y un acento. Tres niveles de superficie, los bordes, el texto principal y el texto atenuado, el acento y su estado hover se derivan automáticamente y se exponen como variables CSS. El color del texto de los botones se elige incluso según la luminancia relativa de su acento, para garantizar un contraste legible.

§ 05

Cero destello blanco, desde el primer fotograma

La mayoría de las soluciones de modo oscuro aplican su tema en JavaScript después de la carga, lo que produce un desagradable destello blanco. Aquí, un script síncrono coloca la clase oscura en el elemento raíz antes del primer renderizado del navegador. El visitante nunca ve la versión clara, ni siquiera una fracción de segundo.

§ 06

El botón donde usted quiera, sin programar

Botón flotante discreto en una de las cuatro esquinas, o interruptor integrado en su cabecera o su pie. Elige el hook de destino en una lista, o escribe el nombre de un hook personalizado de su tema: el módulo lo registra automáticamente al guardar. Para los integradores, la sintaxis widget de PrestaShop también permite mostrar el botón en cualquier lugar de una plantilla.

§ 07

Ligero, autónomo, sin dependencias

Sin Composer, sin framework, sin ninguna biblioteca JavaScript externa. Unos 8 KB añadidos en total, una API pública y un evento de cambio de modo para conectar sus propias integraciones, y una atención completa a la accesibilidad: atributos ARIA, foco visible y respeto del ajuste del sistema de reducción de animaciones.