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 à 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 en savoir plus 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 Plus d'outils, puis Affichage.
  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. Ensuite, appuyez sur le menu à trois points, sélectionnez Paramètres, puis Thème, et cochez la case Appliquer des thèmes sombres aux sites, si possible.

Les pages claires s'assombrissent sur le téléphone.

Personnalisation par élément

Même si notre objectif est 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 souhaitent modifier des éléments spécifiques, pour mieux s'adapter à l'aspect et à la convivialité souhaités.

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é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 différente du blanc (rgb(255, 255, 255)), le thème sombre automatique est alors 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 en cours de développement. Nous travaillons 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 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é. Au lieu de désactiver le thème sombre automatique, nous vous recommandons vivement d'implémenter plutôt 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é,

Utilisation d'une balise Meta

La première solution pour désactiver le thème sombre automatique consiste à ajouter la balise Meta suivante dans l'en-tête de votre page. La balise Meta présente l'avantage d'empêcher l'application du thème sombre automatique. ce qui peut provoquer un "flash d'assombrissement du contenu".

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

Désactivation par élément

Pour désactiver cette fonctionnalité, vous pouvez également définir la valeur de color-scheme sur only light. Même s'il est possible de désactiver le mode sombre automatique pour l'ensemble de la page, L'avantage de cette méthode 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 souhaitons recueillir 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 faire part de vos commentaires de plusieurs manières:

Photo de Félix Besombes