Una nota rápida solo para dejar por aquí apuntado que hoy se ha añadido el modo oscuro personalizado con un selector de tema a la derecha del menú superior.
Se ha sustituido la implementación automática (prefers-color-scheme) por una gestión basada en el selector [data-theme="dark"] que permitía mostrar el tema oscuro cuando el usuario lo seleccionaba en su navegador. Algunos, como Opera, tienen una opción de "forzar modo oscuro" que pinta una versión oscura bastante decente, pero con algunos errores como invertir imágenes mostrándolas en negativo y que no permite configurar nada.
He optado por usar HTML y JS insertado con elementos de GeneratePress y CSS en un largo snippet con todas las anotaciones para tener una lista completa de lo que se ha ajustado por si quiero ir mejorándolo o cambiarlo algún día, además de tener un control total sobre la carga de estilos y una consistencia visual absoluta en toda la web.
Estas son las principales mejoras con respecto a la versión automática:
- Optimización de renderizado: Eliminación de parpadeos y conflictos mediante una jerarquía de estilos CSS unificada que garantiza la carga inmediata del tema oscuro.
- Consistencia visual: Ajuste preciso de colores y filtros en elementos dinámicos (GenerateBlocks, Query Loops, pestañas y acordeones) para evitar problemas de legibilidad (colores grises sobre fondo blanco).
- Control de elementos dinámicos: Corrección de filtros de fusión (
mix-blend-mode) y opacidades en imágenes y menús, asegurando que elementos como el icono de Polylang o las tarjetas de la página de documentales mantengan su contraste correcto bajo cualquier condición. - Limpieza técnica: Depuración de selectores redundantes y unificación de reglas CSS para facilitar futuros mantenimientos sin impacto en el rendimiento ni en el CLS.
Esto, que también se puede hacer con un plugin, con las limitaciones lógicas, he decidido hacerlo con código, además de para ahorrarme un plugin, para tener control granular y ajustes finos para cualquier pequeño detalle y poder actuar sobre el posible impacto que pueda tener en la velocidad de la carga.
Si alguien está interesado en el código, que tampoco es nada del otro mundo, que silbe y lo pondré por aquí. Si eres de los que gustas de navegar por lo oscuro y encuentras algo mejorable, no dudes en dejar un comentario o pinchar fuerte en el botón amarillo de "Comunicar error" que encontrarás al pie de cualquier entrada.
