Thème sombre automatique

André Cipriani Bandarra

Chrome 96 introduit une phase d'évaluation pour les thèmes sombres automatiques sur Android. Grâce à cette fonctionnalité, le navigateur applique un thème sombre généré automatiquement aux sites à 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 en désactivant cette option au niveau de l'OS ou dans un paramètre spécifique de Chrome.

S'inscrire à l'essai

Vous pouvez également activer l'algorithme de masquage pour vos utilisateurs via un test d'origine. Vous pourrez ainsi tester les performances du thème sombre automatique par rapport à vos KPI.

Consultez la documentation pour découvrir comment configurer une phase d'évaluation, puis inscrivez-vous à la phase d'évaluation d'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 Autres 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 le test #darken-websites-checkbox-in-theme-setting.
  2. Appuyez ensuite sur le menu à trois points, sélectionnez Paramètres, puis Thème, puis cochez la case Appliquer le thème sombre aux sites, lorsque cela est possible.

Désormais, les pages claires seront 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 aimeraient ajuster des éléments spécifiques pour mieux s'adapter à l'apparence souhaitée.

Dans ce test d'origine, ces personnalisations sont possibles en utilisant JavaScript pour détecter si l'utilisateur utilise le thème sombre automatique, puis en personnalisant les éléments souhaités.

Détecter le thème sombre automatique

Pour détecter si l'utilisateur utilise le thème sombre automatique, créez un élément avec le 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 blanche (rgb(255, 255, 255)), le thème sombre automatique est appliqué à la page.

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: 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);

Utilisez ensuite le 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. Nous collaborons avec les équipes chargées des normes pour fournir aux développeurs une API plus expressive pour le refus. 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 présentent des avantages pour les 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, si l'implémentation de votre propre thème sombre n'est pas viable et que le résultat généré par le thème sombre automatique n'est pas satisfaisant, vous pouvez désactiver cette fonctionnalité.

Utiliser une balise Meta

La première option pour désactiver le thème sombre automatique consiste à ajouter la balise Meta suivante à l'en-tête de votre page. L'avantage d'utiliser la balise meta est qu'elle empêche l'application du thème sombre automatique, ce qui pourrait entraîner un "clignotement du contenu sombre".

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

Désactivation par élément

Une autre option 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 pour l'ensemble de la page, l'avantage de cette approche est qu'elle ne permet de désactiver que des parties spécifiques de la page:

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

Vous pouvez toujours utiliser cette approche pour désactiver le thème sombre automatique pour toute 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 recherchons des commentaires sur tous les aspects de l'implémentation : des résultats de l'algorithme de masquage aux API pour les développeurs permettant de personnaliser et de désactiver les éléments.

Vous pouvez nous faire part de vos commentaires de plusieurs manières:

Photo de Félix Besombes