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. Der Nutzer hat dunkle Designs im Betriebssystem aktiviert. Nutzer können dunkle Designs deaktivieren, indem sie die Option 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 mehr Einrichtung eines Ursprungstests, registrieren Sie sich dann für den Ursprungstest „AutoDarkMode“ um ein Token zu erhalten.

Automatisches dunkles Design auf Ihrem Gerät testen

Mit Entwicklertools

So aktivierst du das automatische dunkle Design in den Entwicklertools:

  1. Klicke 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 das automatische dunkle Design auf Ihrem Android-Smartphone:

  1. Rufen Sie chrome://flags auf und aktivieren Sie den #darken-websites-checkbox-in-theme-setting-Test.
  2. Tippe dann auf das Dreipunkt-Menü, wähle Einstellungen und dann Design aus und klicke das Kästchen Wenn möglich dunkle Designs auf Websites anwenden an.

Jetzt werden helle Seiten auf dem Smartphone abgedunkelt angezeigt.

Anpassung pro Element

Auch wenn das automatische dunkle Design in allen Fällen gute Ergebnisse liefern soll, ersten Gesprächen mit Entwickelnden schlugen sie vor, bestimmte Elemente zu optimieren, um sich besser an das gewünschte Erscheinungsbild anzupassen.

In diesem Ursprungstest Diese Anpassungen können mithilfe von JavaScript erfolgen, um zu erkennen, ob der Nutzer das automatische dunkle Design verwendet, und dann die gewünschten Elemente anpassen.

Automatisches dunkles Design erkennen

So können Sie feststellen, ob der Nutzer das automatische dunkle Design aktiviert hat: Erstellen Sie ein Element, in dem background-color auf canvas und das Farbschema auf hell gesetzt ist. Wenn die berechnete Farbe für den Hintergrund nicht Weiß (rgb(255, 255, 255)) ist, wird „Automatisch dunkles 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 obige Lösung kann schwierig zu skalieren sein, wenn Sie eine größere Anzahl von Elementen anpassen müssen. Alternativ können Sie die automatische Erkennung des dunklen Designs verwenden, um dem Seitentext 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 die Elemente nach Bedarf anzupassen:

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

Die API zur Anpassung pro Element befindet sich noch in der Entwicklungsphase. Wir arbeiten mit den Normungsteams zusammen, um Entwicklern eine API mit mehr Aussagekraft zur Verfügung zu stellen, die sie deaktivieren können. Sie können der Unterhaltung zu diesem GitHub-Problem folgen.

Automatisches dunkles Design deaktivieren

Sie respektieren nicht nur die Entscheidung der Nutzenden auf ihrem Gerät, dunkle Designs bieten Nutzern Vorteile wie eine verbesserte Akkulaufzeit und Bedienungshilfen. Anstatt das automatische dunkle Design zu deaktivieren, empfehlen wir dringend, ein eigenes ausgewähltes dunkles Design zu implementieren. um die Präferenzen der Nutzenden zu respektieren und diese Vorteile zu behalten.

Sollte es jedoch nicht praktisch sein, 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

Sie können das automatische dunkle Design auch deaktivieren, indem Sie dem Header Ihrer Seite das folgende Meta-Tag hinzufügen. Das Meta-Tag hat den Vorteil, dass es die Anwendung des automatischen dunklen Designs verhindert. was zu einem Blitz dunkler Inhalte führen kann.

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

Deaktivierung pro Element

Sie können auch den Wert des color-scheme-Werts festlegen. CSS-Property auf only light festlegen. Mit der Deaktivierung pro Element kann der automatische dunkle Modus zwar für die gesamte Seite deaktiviert werden, Ein Vorteil dieses Ansatzes besteht darin, dass nur bestimmte Teile der Seite deaktiviert werden können:

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

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

:root {
  color-scheme: only light;
}

Dann gebt uns Feedback!

Automatisches dunkles Design wird noch festgelegt, Wir würden uns über Feedback zu allen Bereichen der Implementierung freuen: von den Ergebnissen des Abdunkelungsalgorithmus bis hin zu den Entwickler-APIs, um Elemente anzupassen und zu deaktivieren.

Es gibt viele Kanäle, über die Sie uns Feedback geben können:

Foto von Félix Besombes.