Principe du mode sombre adaptatif
Safari 27.3 beta propose un Adaptive Dark Mode qui transforme les pages claires en versions sombres dès que l’utilisateur active le thème sombre du système. Selon Apple, 40 % des chargements de pages proviennent d’utilisateurs en mode sombre, alors que seulement 10 % des sites déclarent une prise en charge native. Le moteur détecte les pages dépourvues de balise <meta name="color-scheme" content="light dark"> ou de règle CSS color-scheme: light dark et applique la transformation.
Mécanisme de transformation des couleurs
Le cœur du processus repose sur une matrice de couleur qui inverse la luminosité tout en conservant la teinte. Cette inversion vise un rapport de contraste minimum de 4,5 :1, conformément aux exigences WCAG. Les arrière‑plans clairs deviennent sombres, le texte sombre devient clair, et les dégradés CSS sont également recalculés. Les éléments décoratifs sont traités différemment des éléments sémantiques afin de préserver la lisibilité.
<meta name="color-scheme" content="light dark">
/* ou */
body { color-scheme: light dark; }Gestion des médias et des effets visuels
Les images SVG sont analysées et leurs couleurs sont ajustées lorsque le contraste est insuffisant. Pour les bitmaps, Safari examine les histogrammes de pixels et inverse les logos strictement noir‑et‑blanc. Les effets CSS complexes tels que mask ou mix-blend-mode sont parfois désactivés pour éviter des rendus incohérents. Le contenu du <canvas> reste inchangé, car il peut contenir des données imprévisibles.
Implications pour les développeurs et la confidentialité
Les bonnes pratiques recommandées incluent le remplacement des icônes bitmap par du SVG, l’utilisation de couleurs solides ou de dégradés CSS plutôt que d’images en mosaïque, et la déclaration explicite du support du mode sombre via la balise meta ou la propriété CSS. Les nouvelles fonctions CSS color-mix() et contrast-color() offrent davantage de souplesse pour créer des systèmes de design adaptatifs. Safari empêche toute détection du mode sombre appliqué : les scripts JavaScript reçoivent les couleurs d’origine, les canvases affichent les images non modifiées, ce qui limite le fingerprinting.
