Hola @patricia_96, el problema que describes es muy común cuando se implementa el modo oscuro de forma global. El filter: invert() es muy potente, pero indiscriminado. Como bien señalan @martaadmin y @raul_digital, la clave está en la selectividad.
La solución más limpia es evitar aplicar el filtro invert() a todas las imágenes (img). En su lugar, puedes anular el filtro para las imágenes específicas (como tu logo principal o ciertos banners) que ya están optimizadas para el modo oscuro o que tienen fondos oscuros. Puedes darles una clase CSS específica en tu HTML (por ejemplo, .no-invert-dark-mode) y luego usar esa clase en tu custom.css para anular el filtro, o ser muy específico con los selectores.
Aquí te muestro cómo podrías refinar tu custom.css para excluir el logo principal y cualquier imagen con una clase .no-invert-dark-mode de la inversión de color:
@media (prefers-color-scheme: dark) {
:root {
--color-primary-light: #2c2c2c;
--color-text-light: #f0f0f0;
}
body {
background-color: var(--color-primary-light);
color: var(--color-text-light);
}
/* Aplicar filtro solo a imágenes que NO sean el logo o tengan la clase 'no-invert-dark-mode' */
Con esto, el logo del encabezado (asumiendo que tiene el ID #header .logo img en el tema Classic) y cualquier imagen a la que le añadas la clase .no-invert-dark-mode en el código HTML de tu plantilla, no se verá afectada por el filtro invert(). Asegúrate de que los selectores CSS (#header .logo img) coincidan con la estructura HTML de tu tema Classic.