Dunkles Design (automatisch)

André Cipriani Bandarra

Mit Chrome 96 wird ein Ursprungstest für dunkle Autodesigns unter Android eingeführt. Bei dieser Funktion wendet der Browser auf Websites mit hellem Design ein automatisch generiertes dunkles 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 Darkening-Algorithmus auch über einen Ursprungstest für Ihre Nutzer aktivieren. So können Sie testen, wie das automatische dunkle Design in Bezug auf Ihre KPIs abschneidet.

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.

Jetzt werden helle Seiten auf dem Smartphone abgedunkelt angezeigt.

Anpassung pro Element

Auch wenn wir uns bemühen, dass der automatische dunkle Modus 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 du feststellen möchtest, ob der Nutzer das automatische dunkle Design verwendet, erstelle 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. Sie können der Unterhaltung zu diesem GitHub-Problem folgen.

Automatisches dunkles Design deaktivieren

Dunkle Designs respektieren nicht nur die Entscheidung des Nutzers auf dem Gerät, sondern bieten Nutzern auch Vorteile wie eine verbesserte Akkulaufzeit und Bedienungshilfen. 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 Alternative zur Deaktivierung 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.