Dunkles Design (automatisch)

André Cipriani Bandarra

In 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 Websites mit hellem Design an, wenn der Nutzer im Betriebssystem dunkle Designs aktiviert hat. Nutzer können dunkle Themen 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 Algorithmus zum Abdunkeln auch über einen Ursprungstest für Ihre Nutzer aktivieren. So können Sie die Leistung des automatischen dunklen Modus im Hinblick auf Ihre KPIs testen.

In der Dokumentation erfahren Sie, wie Sie einen Test für den Ursprung einrichten. Melden Sie sich dann für den Test des Ursprungs für AutoDarkMode an, um ein Token zu erhalten.

Automatisches dunkles Design auf Ihrem Gerät testen

Mit den Entwicklertools

So aktivieren Sie den automatischen dunklen Modus in den Entwicklertools:

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

Auf einem Android-Smartphone

So testen Sie die automatische Umstellung auf das 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 dann Design aus und setzen Sie ein Häkchen in das Kästchen Dunkles Design auf Websites anwenden, wenn möglich.

Helle Seiten werden jetzt auf dem Smartphone abgedunkelt.

Elementspezifische Anpassung

Auch wenn wir uns bemühen, dass das automatische dunkle Design in allen Fällen gute Ergebnisse liefert, haben erste Gespräche mit Entwicklern gezeigt, dass sie bestimmte Elemente anpassen möchten, um sie besser an das gewünschte Erscheinungsbild anzupassen.

In diesem Ursprungstest sind diese Anpassungen möglich, indem mit JavaScript erkannt wird, ob der Nutzer das automatische dunkle Design verwendet, und dann die gewünschten Elemente angepasst werden.

Automatisches dunkles Design erkennen

Wenn Sie erkennen möchten, ob das automatische dunkle Design verwendet wird, erstellen Sie ein Element, bei dem background-color auf canvas und das Farbschema auf „hell“ festgelegt ist. Wenn die berechnete Farbe für den Hintergrund nicht weiß (rgb(255, 255, 255)) ist, 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');
}

Eine große Anzahl von Elementen anpassen

Die oben beschriebene Lösung lässt sich nur schwer skalieren, wenn Sie eine größere Anzahl von Elementen anpassen möchten. Alternativ können Sie die automatische Erkennung des dunklen Designs verwenden, um dem Textkörper 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);

Passen Sie dann die Elemente nach Bedarf mit CSS an:

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

Die API zur Elementanpassung befindet sich noch in der Entwicklungsphase. Wir arbeiten mit den Standards-Teams zusammen, um Entwicklern eine ausdrucksstärkere API für die Deaktivierung zur Verfügung zu stellen. Du kannst der Diskussion unter diesem GitHub-Problem folgen.

Automatischen dunklen Modus deaktivieren

Neben der Achtung der Auswahl des Nutzers auf seinem Gerät bieten dunkle Designs Vorteile wie eine längere Akkulaufzeit und Barrierefreiheit. Anstatt das automatische dunkle Design zu deaktivieren, empfehlen wir Ihnen, stattdessen ein eigenes dunkles Design zu implementieren, um die Einstellungen der Nutzer zu respektieren und diese Vorteile beizubehalten.

Wenn es jedoch nicht möglich ist, ein eigenes dunkles Design zu implementieren, und das Ergebnis des automatischen dunklen Designs nicht zufriedenstellend ist, können Sie die Funktion deaktivieren.

Meta-Tag verwenden

Die erste Möglichkeit, das automatische dunkle Design zu deaktivieren, besteht darin, dem Kopf Ihrer Seite das folgende Meta-Tag hinzuzufügen. Der Vorteil des Meta-Tags besteht darin, dass der automatische dunkle Modus überhaupt nicht angewendet wird, was zu einem „Aufblitzen dunkler Inhalte“ führen kann.

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

Deaktivierung pro Element

Eine zweite Möglichkeit, die Funktion zu deaktivieren, besteht darin, den Wert der CSS-Property color-scheme auf only light festzulegen. Auch wenn Sie mit der Deaktivierung pro Element den dunklen Modus für die gesamte Seite deaktivieren können, bietet dieser Ansatz den Vorteil, dass Sie nur bestimmte Bereiche der Seite deaktivieren können:

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

Es ist aber weiterhin möglich, mit diesem Ansatz das automatische dunkle Design für die gesamte Seite zu deaktivieren, indem Sie das Farbschema für das Element :root festlegen:

:root {
  color-scheme: only light;
}

Dann gebt uns Feedback!

Das automatische dunkle Design wird noch optimiert. Wir freuen uns über Feedback zu allen Bereichen der Implementierung: von den Ergebnissen des Verdunkelungsalgorithmus bis hin zu den Entwickler-APIs für die Elementanpassung und Deaktivierung.

Es gibt viele Möglichkeiten, uns Feedback zu senden:

Foto von Félix Besombes