Hola @ignacioes,
Entiendo perfectamente tu frustración con los filtros de inversión en modo oscuro. El enfoque con filter: invert(1) hue-rotate(180deg) es potente, pero como bien dices, demasiado agresivo para un img genérico. El tema Classic, por defecto, usa clases y IDs muy específicos para el logo y otras imágenes clave que podemos aprovechar.
Para limpiar y refinar tu CSS en themes/classic/assets/css/custom.css, te sugiero ser mucho más específico con los selectores. En lugar de aplicar el filtro a todas las img, vamos a apuntar solo al logo principal y, si es necesario, a ciertos tipos de imágenes de producto o iconos.
Considerando la estructura del tema Classic en PrestaShop 8, el logo principal suele estar dentro de un div con la clase header-nav o header-top y la imagen del logo tiene el ID _desktop_logo o _mobile_logo (o simplemente está dentro de un enlace con la clase logo).
Aquí tienes un fragmento de código más limpio para tu custom.css:
:root {
--primary-color: #007bff;
--text-color: #333;
--background-color: #fff;
--border-color: #ddd;
}
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #6bb0ff;
--text-color: #eee;
Explicación de los cambios:
- Selectores específicos para el logo: He cambiado
img por #header .header-nav .logo img y #header .header-top .logo img. Estos selectores son mucho más precisos y garantizan que el filtro de inversión solo se aplique al logo principal de tu tienda, que es lo que suele necesitar ese tratamiento en modo oscuro para ser visible sobre un fondo oscuro.
- Comentario para imágenes de producto: He añadido un comentario para recordarte que si algunas imágenes de producto específicas también necesitan un ajuste (aunque quizás no una inversión total, sino un
brightness o contrast diferente), puedes añadir selectores específicos para ellas.
- Restablecimiento de filtro para otras imágenes: La línea
img:not(...) { filter: none; } es clave. Si, por error, alguna otra regla CSS (quizás de algún módulo o del propio tema) aplica un filtro genérico, esta regla la anulará para todas las imágenes excepto el logo, asegurando que tus fotos de producto y banners no se distorsionen. Asegúrate de que esta regla venga después de cualquier otra regla de img más general.
- Variables CSS: He añadido
var(--border-color) para que los bordes de elementos como tarjetas también se adapten al modo oscuro, manteniendo una estética coherente.
Con esto, deberías tener un control mucho más granular sobre qué imágenes se ven afectadas por el modo oscuro, preservando la coherencia de tu marca y la visibilidad de tus productos.