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 automatisch ein dunkles Design auf Websites mit hellem Design 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 Verdunkelungsalgorithmus auch über einen Origin-Trial für Ihre Nutzer aktivieren. So können Sie testen, wie sich der automatische dunkle Modus auf Ihre KPIs auswirkt.

In der Dokumentation erfahren Sie, wie Sie einen Ursprungstest einrichten. Registrieren Sie sich dann für den AutoDarkMode-Ursprungstest, um ein Token zu erhalten.

Automatisches dunkles Design auf dem Gerät testen

Mit den Entwicklertools

So aktivieren Sie das automatische 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 bei der Option Automatischen 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 dann Design aus und setzen Sie ein Häkchen bei Dunkles Design auf Websites anwenden.

Helle Seiten werden auf dem Smartphone jetzt abgedunkelt.

Anpassung pro Element

Wir sind bestrebt, mit dem automatischen dunklen Design in allen Fällen gute Ergebnisse zu erzielen. Erste Gespräche mit Entwicklern haben jedoch gezeigt, dass sie bestimmte Elemente anpassen möchten, um das gewünschte Erscheinungsbild besser zu erreichen.

In diesem Origin Trial sind diese Anpassungen möglich, indem Sie mit JavaScript erkennen, ob der Nutzer das automatische dunkle Design verwendet, und dann die gewünschten Elemente anpassen.

Automatisches dunkles Design erkennen

Um zu erkennen, ob der Nutzer das automatische dunkle Design verwendet, erstellen Sie ein Element, dessen background-color auf canvas und dessen color-scheme auf „light“ 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');
}

Viele Elemente anpassen

Die oben beschriebene Lösung lässt sich nur schwer skalieren, wenn Sie eine größere Anzahl von Elementen anpassen müssen. Alternativ können Sie die automatische Erkennung des dunklen Designs verwenden, um dem Body 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 einzelner Elemente befindet sich noch in der frühen Entwicklungsphase. Wir arbeiten mit den Standardisierungsteams zusammen, um Entwicklern eine ausdrucksstärkere API für die Deaktivierung zur Verfügung zu stellen. Hier finden Sie die Diskussion zu diesem GitHub-Problem.

Automatisches dunkles Design deaktivieren

Neben der Berücksichtigung der Auswahl des Nutzers auf seinem Gerät bietet das dunkle Design Vorteile wie eine längere Akkulaufzeit und eine bessere Barrierefreiheit. Wir empfehlen dringend, ein eigenes dunkles Design zu implementieren, anstatt das automatische dunkle Design zu deaktivieren. So können Sie die Einstellungen der Nutzer berücksichtigen und die Vorteile des dunklen Designs nutzen.

Wenn es jedoch nicht möglich ist, ein eigenes dunkles Design zu implementieren, und das Ergebnis, das von Auto Dark Theme generiert wird, nicht zufriedenstellend ist, können Sie die Funktion deaktivieren.

Meta-Tag verwenden

Die erste Alternative zum Deaktivieren des automatischen dunklen Designs besteht darin, den folgenden Meta-Tag in den Header Ihrer Seite einzufügen. Der Vorteil der Verwendung des Meta-Tags besteht darin, dass das automatische dunkle Design überhaupt nicht angewendet wird, was dazu führen könnte, dass Inhalte kurz in dunkler Darstellung angezeigt werden.

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

Deaktivierung pro Element

Eine zweite Alternative zum Deaktivieren besteht darin, den Wert der CSS-Eigenschaft color-scheme auf only light festzulegen. Auch wenn mit dem Opt-out pro Element die gesamte Seite vom automatischen dunklen Modus ausgeschlossen werden kann, bietet dieser Ansatz den Vorteil, dass nur bestimmte Teile der Seite ausgeschlossen werden können:

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

Es ist weiterhin möglich, die gesamte Seite vom automatischen dunklen Design auszuschließen, indem Sie das Farbschema für das :root-Element festlegen:

:root {
  color-scheme: only light;
}

Dann gebt uns Feedback!

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

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

Foto von Félix Besombes.