Problemas con estilos modo oscuro en tema Classic

inma_9689

Hola a todos,

Estoy intentando implementar un modo oscuro para mi tienda PrestaShop usando el tema Classic, añadiendo CSS en themes/classic/assets/css/custom.css. La idea es usar @media (prefers-color-scheme: dark) y propiedades CSS personalizadas. Funciona en general, pero tengo problemas con los logos y algunas imágenes de producto que tienen fondos oscuros o colores que no se ven bien al invertir el esquema.

He probado esto, pero el logo y las imágenes salen muy raras, no consigo un balance correcto:

@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #222222;
    --text-color: #eeeeee;
    --link-color: #99ccff;
  }
  body {
    background-color: var(--body-bg);
    color: var(--text-color);
  }

¿Alguien ha conseguido una solución elegante para que los logos e imágenes se vean bien en modo oscuro sin romper la marca? A veces el filter es demasiado agresivo.

rodrigohub16

Hola @inma_9689,

Entiendo tu frustración con los filtros de imagen para el modo oscuro. Es un clásico. ¿En qué versión de PrestaShop estás trabajando? Sé que la 1.7.4.1 tiene sus peculiaridades con la carga de estilos y a veces los navegadores no refrescan bien el custom.css si no se fuerza. El filter que usas es bastante genérico, y no todas las imágenes reaccionan igual. Para los logos, yo intentaría ser más específico o incluso tener una versión diferente del logo para el modo oscuro si es posible.

hugo_8933

¡Hola Inma!

Coincido con @rodrigohub16, el filter es un arma de doble filo. En mi experiencia con temas basados en Classic, para el logo de la cabecera, a veces es mejor usar un selector más específico o incluso una clase adicional para ese logo en particular, en lugar de aplicarlo a todos los img dentro de product-image y #header .logo. También, asegúrate de que, después de cada cambio en custom.css, borras la caché del navegador y, si tienes activado el CCC en "Parámetros avanzados > Rendimiento", lo desactives temporalmente o lo recompiles. A veces se queda la versión antigua del CSS.

Milo

Hola @inma_9689, @rodrigohub16 y @hugo_8933,

Inma, el problema con el filter es que aplica una transformación indiscriminada que no siempre respeta la intención de la imagen original, especialmente con logos o fotos de producto con transparencias. Para PrestaShop 1.7.4.1 en el tema Classic, la estrategia de custom.css es correcta, pero podemos refinar el CSS.

Para el logo, es mejor anular el filtro o usar uno muy sutil si tienes una versión oscura del logo. Si el logo ya es oscuro y se ve bien en fondos claros, en modo oscuro probablemente necesite un filtro muy ligero para destacarse, no una inversión total. Para las imágenes de producto, el filtro es más complejo porque el contenido es variable.

Aquí te propongo una versión más limpia y específica para el logo, y una aproximación más suave para las imágenes. También he simplificado las variables CSS para que sean más directas:

@media (prefers-color-scheme: dark) {
  :root {
    --dark-bg: #1c1c1c;
    --dark-text: #e0e0e0;
    --dark-link: #8bc34a; /* Un color de enlace más vibrante */
  }
  body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
  }

Cambios clave:

Variables CSS: Nombres más descriptivos (--dark-bg, --dark-text, etc.).
Filtro del Logo: En lugar de invert completo, he usado brightness(1.1) contrast(0.9). Esto suele funcionar mejor para logos ya oscuros o con colores específicos, dándoles un ligero realce sin distorsionar demasiado. Si tu logo es claro, necesitarás ajustar el brightness a menos de 1 o añadir un saturate.
Filtro de Imágenes de Producto: Un filter más conservador (brightness(0.95) contrast(1.05)) para evitar que las fotos se vean lavadas o demasiado artificiales. La idea es que se integren un poco más con el fondo oscuro, pero sin que pierdan calidad visual.

Recuerda limpiar la caché del navegador después de aplicar los cambios en custom.css. Si usas Chrome, puedes probar con Ctrl+Shift+R.

inma_9689

¡Muchísimas gracias, @Milo! Esa fue la clave. He probado tu código en custom.css y el logo se ve infinitamente mejor, y las imágenes de producto también. Los filtros que has sugerido son mucho más adecuados. Había estado experimentando con invert sin éxito, pero tu enfoque es mucho más sutil y profesional. ¡Problema resuelto! Gracias también a @rodrigohub16 y @hugo_8933 por las sugerencias sobre la caché y la versión de PrestaShop (estoy en 1.7.4.1).