Dunkles Design (automatisch)

André Cipriani

Mit Chrome 96 wird ein Ursprungstest für automatische dunkle Designs unter Android eingeführt. Mit dieser Funktion wendet der Browser ein automatisch generiertes dunkles Design auf helle Websites an, wenn der Nutzer im Betriebssystem das dunkle Design aktiviert hat. Nutzer können dunkle Designs deaktivieren, indem sie die Option entweder auf Betriebssystemebene oder in einer bestimmten Einstellung in Chrome deaktivieren.

Für den Ursprungstest registrieren

Sie können den Abdunkelungsalgorithmus auch über einen Ursprungstest für Ihre Nutzer aktivieren. So können Sie testen, wie das dunkle Design „Auto“ in Bezug auf Ihre KPIs abschneidet.

In der Dokumentation erfahren Sie, wie Sie einen Ursprungstest einrichten und sich für den Ursprungstest im AutoDarkMode-Modus registrieren, um ein Token zu erhalten.

Testen Sie das dunkle Design für das automatische Design auf Ihrem Gerät

Mit Entwicklertools

So aktivierst du das dunkle Design in den Entwicklertools:

  1. Klicken Sie auf das Dreipunkt-Menü.
  2. Wählen Sie Weitere Tools und dann Rendering aus.
  3. Wählen Sie für die Option Automatisch dunklen Modus emulieren die Option Aktivieren aus.

Auf einem Android-Smartphone

So testen Sie das automatische dunkle Design auf Ihrem Android-Smartphone:

  1. Rufen Sie chrome://flags auf und aktivieren Sie den Test „#darken-websites-checkbox-in-theme-setting“.
  2. Tippen Sie dann auf das Dreipunkt-Menü, wählen Sie Einstellungen und anschließend Design aus und klicken Sie auf das Kästchen Nach Möglichkeit dunkle Designs auf Websites anwenden.

Die hellen Seiten werden jetzt auf dem Smartphone abgedunkelt.

Anpassung pro Element

Obwohl das automatische dunkle Design in allen Fällen gute Ergebnisse liefern soll, schlugen erste Gespräche mit Entwicklern vor, bestimmte Elemente besser an ihr gewünschtes Erscheinungsbild anzupassen.

In diesem Ursprungstest kann mithilfe von JavaScript festgestellt werden, ob sich der Nutzer im automatischen dunklen Design befindet, und dann die gewünschten Elemente anpassen.

Automatisches dunkles Design wird erkannt

Wenn du feststellen möchtest, ob sich der Nutzer im automatischen dunklen Design befindet, erstelle ein Element, bei dem für background-color der Wert canvas und für das Farbschema die Option „Hell“ festgelegt ist. Wenn die berechnete Farbe für den Hintergrund nicht Weiß ist (rgb(255, 255, 255)), wird das automatische dunkle Design auf die Seite angewendet.

<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');
}

Große Anzahl von Elementen anpassen

Die oben beschriebene Lösung kann schwierig zu skalieren sein, wenn Sie eine größere Anzahl von Elementen anpassen müssen. Alternativ können Sie die Erkennung für das automatische dunkle Design verwenden, um dem Text der Seite eine Markierungsklasse hinzuzufügen:

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);

Verwenden Sie dann CSS, um Elemente nach Bedarf anzupassen:

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

Die API zur Anpassung von Elementen befindet sich noch in der frühen Entwicklungsphase. Wir arbeiten mit den Standardsteams zusammen, um Entwicklern eine API für die Deaktivierung zu bieten. Sie können der Unterhaltung zu diesem GitHub-Problem folgen.

Automatisches dunkles Design deaktivieren

Das dunkle Design respektiert nicht nur die Auswahl des Nutzers auf seinem Gerät, sondern bietet auch Vorteile wie eine längere Akkulaufzeit und Bedienungshilfen. Anstatt das automatische dunkle Design zu deaktivieren, empfehlen wir dringend, stattdessen ein eigenes dunkles Design zu implementieren, um die Präferenzen der Nutzer zu respektieren und diese Vorteile beizubehalten.

Falls sich Ihr eigenes dunkles Design jedoch nicht implementieren lässt und das mit dem automatischen dunkle Design generierte Ergebnis nicht zufriedenstellend ist, können Sie die Funktion deaktivieren.

Verwenden eines Meta-Tags

Die erste Alternative zur Deaktivierung des automatischen dunklen Designs besteht darin, das folgende Meta-Tag in den Header deiner Seite einzufügen. Die Verwendung des Meta-Tags hat den Vorteil, dass das automatische dunkle Design überhaupt nicht angewendet wird. Dies kann zu einem „Blitz dunkler Inhalte“ führen.

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

Deaktivierung pro Element

Eine weitere Möglichkeit zur Deaktivierung besteht darin, den Wert der CSS-Eigenschaft color-scheme auf only light zu setzen. Obwohl die Deaktivierung pro Element verwendet werden kann, um den automatischen dunklen Modus für die gesamte Seite zu deaktivieren, hat dieser Ansatz den Vorteil, dass nur bestimmte Teile der Seite deaktiviert werden können:

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

Es ist weiterhin möglich, mit dieser Methode das automatische dunkle Design für die gesamte Seite zu deaktivieren. Dazu legst du das Farbschema für das :root-Element fest:

:root {
  color-scheme: only light;
}

Dann gebt uns Feedback!

Das dunkle automatische Design wird noch festgelegt und wir freuen uns über Feedback zu allen Bereichen der Implementierung: von den Ergebnissen des Darking-Algorithmus bis zu den Entwickler-APIs für die Anpassung und Deaktivierung von Elementen.

Es gibt viele Kanäle, über die du uns dein Feedback senden kannst:

Foto von Félix Besombes.