Thème sombre automatique

André Cipriani Bandarra

Chrome 96 introduit un essai Origin Trial pour les thèmes sombres automatiques sur Android. Avec cette fonctionnalité, le navigateur applique un thème sombre généré automatiquement aux sites utilisant un thème clair, lorsque l'utilisateur a activé les thèmes sombres dans le système d'exploitation. Les utilisateurs peuvent désactiver les thèmes sombres au niveau de l'OS ou dans un paramètre spécifique de Chrome.

S'inscrire à l'essai Origin Trial

Vous pouvez également activer l'algorithme d'assombrissement pour vos utilisateurs via un essai Origin Trial. Vous pouvez ainsi tester les performances du thème sombre automatique par rapport à vos KPI.

Consultez la documentation pour découvrir comment configurer un essai Origin Trial, puis inscrivez-vous à l'essai Origin Trial AutoDarkMode pour obtenir un jeton.

Tester le thème sombre automatique sur votre appareil

avec les Outils de développement

Pour activer le thème sombre automatique dans les outils de développement :

  1. Cliquez sur le menu à trois points.
  2. Sélectionnez Plus d'outils, puis Rendu.
  3. Sélectionnez Activer pour l'option Émuler le mode sombre automatique.

Sur un téléphone Android

Pour tester le thème sombre automatique sur votre téléphone Android :

  1. Accédez à chrome://flags et activez l'expérience #darken-websites-checkbox-in-theme-setting.
  2. Ensuite, appuyez sur le menu à trois points, sélectionnez Paramètres, puis Thème, et cochez la case Appliquer les thèmes sombres aux sites, si possible.

Les pages claires seront désormais assombries sur le téléphone.

Personnalisation par élément

Même si nous souhaitons que le thème sombre automatique génère de bons résultats dans tous les cas, les premières discussions avec les développeurs ont suggéré qu'ils souhaitaient modifier des éléments spécifiques pour mieux s'adapter à l'apparence souhaitée.

Dans cet essai Origin Trial, ces personnalisations sont possibles en utilisant JavaScript pour détecter si l'utilisateur est en thème sombre automatique, puis en personnalisant les éléments souhaités.

Détection du thème sombre automatique

Pour détecter si l'utilisateur est en thème sombre automatique, créez un élément avec background-color défini sur canvas et le jeu de couleurs défini sur "clair". Si la couleur calculée pour l'arrière-plan est autre que le blanc (rgb(255, 255, 255)), le thème sombre automatique est appliqué à la page.

<div id="detection"
     style="display: none; background-color: canvas; color>-<sche>me: light"
/div

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

Personnaliser un grand nombre d'éléments

La solution ci-dessus peut être difficile à adapter si vous devez personnaliser un plus grand nombre d'éléments. Vous pouvez également utiliser la détection automatique du thème sombre pour ajouter une classe de repère au corps de la page :

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

Ensuite, utilisez CSS pour personnaliser les éléments selon vos besoins :

.auto-dark-theme > #my-element {
  border-color: red;
}

L'API de personnalisation par élément est encore en phase de développement initial. Nous collaborons avec les équipes de normalisation pour fournir aux développeurs une API plus expressive pour la désactivation. Vous pouvez suivre la conversation sur ce problème GitHub.

Désactiver le thème sombre automatique

En plus de respecter le choix de l'utilisateur sur son appareil, les thèmes sombres offrent des avantages aux utilisateurs, tels que l'amélioration de l'autonomie de la batterie et l'accessibilité. Plutôt que de désactiver le thème sombre automatique, nous vous recommandons vivement d'implémenter votre propre thème sombre afin de respecter les préférences de l'utilisateur et de conserver ces avantages.

Toutefois, s'il n'est pas possible d'implémenter votre propre thème sombre et que le résultat généré par le thème sombre automatique n'est pas satisfaisant, vous pouvez désactiver la fonctionnalité.

Utiliser une balise Meta

La première solution pour désactiver le thème sombre automatique consiste à ajouter la balise Meta suivante à l'en-tête de votre page. L'avantage de la balise Meta est qu'elle empêche l'application du thème sombre automatique, qui pourrait provoquer un "flash de contenu assombri".

<head>
  <meta name="color-scheme" content=&q>uot;onl<y lig>ht"
  ...
/head

Désactivation par élément

Une autre solution pour désactiver cette fonctionnalité consiste à définir la valeur de la propriété CSS color-scheme sur only light. Même si la désactivation par élément peut être utilisée pour désactiver le mode sombre automatique sur l'ensemble de la page, l'avantage de cette approche est qu'elle permet de ne désactiver que certaines parties de la page :

#my-element {
  color-scheme: only light;
}

Il est toujours possible d'utiliser cette approche pour désactiver le thème sombre automatique sur l'ensemble de la page en définissant le jeu de couleurs sur l'élément :root :

:root {
  color-scheme: only light;
}

Envoyez-nous vos commentaires !

Le thème sombre automatique est toujours en cours de spécification, et nous attendons des commentaires sur tous les aspects de l'implémentation : des résultats de l'algorithme d'assombrissement aux API de développement pour la personnalisation et la désactivation des éléments.

Vous pouvez nous envoyer vos commentaires de différentes manières :

Photo de Félix Besombes.