Safari 27.3 : mode sombre adaptatif, color-scheme

Ce qui se passe

L'équipe WebKit annonce, dans Safari 27.3 bêta, un mode sombre adaptatif : lorsque l'utilisateur l'a activé et que l'apparence du système est sombre, Safari propose d'afficher en sombre les sites qui sont clairs. Le constat d'Apple, appuyé sur Chrome Status : près de 40 % des chargements de pages viennent d'utilisateurs en mode sombre, mais seulement 10 % des pages le prennent en charge.

Ce que Safari touche, et ce qu'il laisse

• Les sites qui déclarent leur prise en charge ne sont pas modifiés : <meta name="color-scheme" content="light dark"> en HTML, ou color-scheme: light dark en CSS. Une page déjà sombre (fond foncé, texte clair) n'est pas touchée non plus.
• Pour le reste, Safari analyse les couleurs, estime si la page est surtout claire ou sombre, puis applique une matrice qui inverse la luminosité en gardant la teinte. Le texte vise le contraste WCAG 4,5:1, les dégradés clairs deviennent sombres, boutons et menus survolés restent lisibles.
• Images : la plupart restent intactes. Les SVG sont inspectés et recolorés si besoin ; pour les bitmaps, l'histogramme des pixels permet d'inverser les logos simples en noir et blanc.
• Les effets de masque et de mix-blend-mode sont parfois désactivés sur les éléments transformés, et le contenu d'un <canvas> est laissé tel quel.
• Rien n'est détectable par le site : le JavaScript qui lit des couleurs CSS obtient les couleurs d'origine, et les images dessinées dans un canvas gardent leur forme d'origine. Apple y voit une protection contre le pistage.

Ce que ça change pour votre site

Selon la situation :

1. Vous gérez déjà le mode sombre : déclarez-le pour que Safari ne touche à rien, dans le <head> ou en CSS, pas par du JavaScript injecté plus tard.

<meta name="color-scheme" content="light dark">

:root { color-scheme: light dark; }

2. Vous ne le gérez pas : de petits ajustements aident la transformation. Des SVG plutôt que des logos bitmap, des couleurs unies ou des dégradés CSS plutôt que des images de fond en mosaïque, du CSS moderne plutôt que des sprites pour coins arrondis, ombres et états de boutons, des images de contenu à fond transparent (pas la couleur de la page cuite dans l'image), un peu de marge intérieure dans les conteneurs.
3. Vous voulez un rendu sombre précis pour une partie de la page : color-scheme: light dark sur l'élément concerné, avec vos propres styles sombres.
4. Vous voulez refuser la transformation : <meta name="color-scheme" content="light only">, ou la règle CSS équivalente, éventuellement limitée à certains éléments. Le mot-clé only n'est pas pris en charge dans la bêta 1 : à revérifier au fil des bêtas.

Le tout reste une bêta, active uniquement chez les utilisateurs qui l'ont choisie.

Comment s'y prendre

Ouvrir votre site dans Safari 27.3 bêta, système réglé en sombre, accepter l'aperçu « Try », et noter ce qui s'affiche mal, logos et icônes en premier. Apple demande de signaler les sites problématiques via Feedback Assistant.

Source : blog WebKit, en anglais.