Aunque una parte significativa de los usuarios de la web prefieren el modo oscuro, existe una disparidad masiva en el desarrollo web: aproximadamente el 40% de las cargas de páginas son realizadas por usuarios en modo oscuro, pero solo el 10% de esas páginas realmente admiten un tema oscuro nativo. Para cerrar esta brecha, Safari 27.3 introduce el Modo Oscuro Adaptativo. Cuando está activado, el navegador identifica los sitios web que no indican soporte para el modo oscuro y adapta automáticamente su apariencia. Si un sitio ya declara soporte mediante etiquetas meta de HTML estándar o propiedades CSS, Safari respeta el diseño original del desarrollador y no realiza ningún cambio.
La imagen demuestra la capacidad del navegador para identificar y adaptar sitios web que carecen de soporte nativo para el modo oscuro mediante la inversión de la luminosidad.
La transformación ocurre en las profundidades del motor del navegador WebKit, lo que permite un procesamiento de color de alta velocidad y eficiente en términos de energía. En su núcleo, el sistema utiliza una matriz de color para invertir la luminosidad de los colores mientras preserva su tono original. Esto garantiza que los fondos claros se vuelvan oscuros y el texto oscuro se vuelva claro, manteniendo la legibilidad. El motor se dirige específicamente a una relación de contraste WCAG 4.5:1 para asegurar que el texto permanezca visible. Además, el sistema distingue entre colores decorativos y semánticos, realizando juicios cuidadosos para asegurar que los botones mantengan el contraste contra los fondos y que el texto permanezca legible sobre las imágenes.
El Modo Oscuro Adaptativo también maneja activos complejos como logotipos e iconos. Mientras que la mayoría de las imágenes de mapa de bits se dejan intactas para preservar su integridad, el motor inspecciona las imágenes SVG y transforma sus colores cuando es necesario. Para las imágenes de mapa de bits, analiza los histogramas de píxeles para identificar e invertir logotipos simples en blanco y negro. Para evitar resultados impredecibles, el navegador desactiva ciertos efectos como máscaras y mix-blend-mode en los elementos transformados y deja el contenido de <canvas> completamente sin cambios. Para proteger la privacidad del usuario y evitar el fingerprinting, Safari garantiza que los sitios web no puedan detectar cuándo está activo el Modo Oscuro Adaptativo; las consultas de JavaScript para colores CSS seguirán devolviendo los valores originales del autor en lugar de los transformados.
Los desarrolladores tienen varias formas de interactuar con esta nueva función. Los sitios web pueden optar por no participar en la transformación por completo utilizando la regla `color-scheme: light only`, que indica al navegador que solo muestre la página en modo claro. Alternativamente, los desarrolladores pueden proporcionar una experiencia superior y diseñada a mano implementando el modo oscuro nativo mediante funciones CSS modernas como `light-dark()`, `color-mix()` y `contrast-color()`. Para obtener los mejores resultados con el Modo Oscuro Adaptativo, el equipo de WebKit recomienda usar SVG para los logotipos, colores sólidos o degradados en CSS en lugar de imágenes de fondo en mosaico, y crear imágenes de contenido con fondos transparentes en lugar de integrar un color de página específico.
Esta visualización ilustra la distinción entre la adaptación automática del navegador y las experiencias diseñadas a mano que los desarrolladores pueden proporcionar.