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 l'option au niveau du système d'exploitation ou dans un paramètre spécifique de Chrome.

S'inscrire à la phase d'évaluation

Vous pouvez également activer l'algorithme d'assombrissement pour vos utilisateurs via une phase d'évaluation. Vous pouvez 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 AutoDarkMode pour obtenir un jeton.

Testez 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 sur 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. Ensuite, appuyez sur le menu à trois points, sélectionnez Paramètres, puis Thème, puis cochez la case Appliquer les thèmes sombres aux sites, si possible.

Désormais, les pages claires seront plus sombres sur le téléphone.

Personnalisation par élément

Bien que notre objectif soit que le thème sombre automatique génère de bons résultats dans tous les cas, les premières conversations avec les développeurs ont suggéré qu'ils souhaitaient modifier des éléments spécifiques pour qu'ils s'adaptent mieux à l'apparence souhaitée.

Dans cette phase d'évaluation, 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étection du thème sombre automatique...

Pour détecter si l'utilisateur utilise le 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 n'est pas 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-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 à mettre à l'échelle 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 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 développement. Nous collaborons avec les équipes chargées des normes afin de fournir aux développeurs une API plus expressive pour la désactivation. Vous pouvez suivre la conversation concernant ce problème sur 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 tels que l'amélioration de l'autonomie de la batterie et l'accessibilité. Au lieu de désactiver le thème sombre automatique, nous vous recommandons vivement d'implémenter votre propre thème sombre personnalisé, afin de respecter les préférences de l'utilisateur et de conserver ces avantages.

Toutefois, si vous n'êtes pas en mesure 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 cette fonctionnalité.

Utiliser une balise Meta

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

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

Désactivation par élément

Une autre solution consiste à définir la valeur de la propriété CSS color-scheme sur only light. Bien que la désactivation par élément puisse être utilisée pour désactiver le mode sombre automatique sur l'ensemble de la page, cette approche présente l'avantage de ne permettre de désactiver que certaines parties de la page:

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

Vous pouvez toujours 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 spécifié, et nous attendons des commentaires sur tous les aspects de l'implémentation, des résultats de l'algorithme d'assombrissement aux API des développeurs pour la personnalisation et la désactivation des éléments.

Vous pouvez nous envoyer vos commentaires sur de nombreux canaux:

Photo de Félix Besombes