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 generiertes dunkles Design auf Websites mit hellem Design an, wenn der Nutzer im Betriebssystem dunkle Designs aktiviert hat. 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 Algorithmus zum Abdunkeln auch für Ihre Nutzer über einen Ursprungstest aktivieren. So können Sie testen, wie sich das automatische dunkle Design auf Ihre KPIs auswirkt.

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

Automatisches dunkles Design auf deinem Gerät testen

Mit 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. Tippe dann auf das Dreipunkt-Menü, wähle Einstellungen und dann Design aus und setze ein Häkchen bei Dunkles Design nach Möglichkeit auf Websites anwenden.

Jetzt werden helle Seiten auf dem Smartphone abgedunkelt.

Anpassung einzelner Elemente

Wir möchten, dass das automatische dunkle Design in allen Fällen gute Ergebnisse liefert. Erste Gespräche mit Entwicklern haben jedoch gezeigt, dass sie bestimmte Elemente optimieren möchten, um das gewünschte Erscheinungsbild besser 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 wird erkannt

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

Anpassen einer großen Anzahl von Elementen

Die oben beschriebene Lösung kann schwer 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 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);

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 einem frühen Entwicklungsstadium. Wir arbeiten mit den Standardteams zusammen, um Entwicklern eine aussagekräftigere API für die Deaktivierung zur Verfügung zu stellen. Sie können die Unterhaltung zu diesem GitHub-Problem verfolgen.

Automatisches dunkles Design deaktivieren

Dunkle Designs respektieren nicht nur die Wahl des Nutzers auf seinem Gerät, sondern bieten auch Vorteile wie eine längere Akkulaufzeit und Barrierefreiheit. Anstatt das automatische dunkle Design zu deaktivieren, empfehlen wir dringend, ein eigenes dunkles Design zu implementieren, um die Präferenz des Nutzers zu berücksichtigen und diese Vorteile beizubehalten.

Wenn es jedoch nicht möglich ist, ein eigenes dunkles Design zu implementieren, und das von „Automatisches dunkles Design“ generierte Ergebnis nicht zufriedenstellend ist, können Sie die Funktion deaktivieren,

Meta-Tag verwenden

Die erste Alternative zur Deaktivierung des automatischen dunklen Designs besteht darin, dem Header Ihrer Seite das folgende Meta-Tag hinzuzufügen. Der Vorteil des Meta-Tags besteht darin, dass das automatische dunkle Design überhaupt nicht angewendet wird. Dadurch wird ein „Aufblitzen von abgedunkelten Inhalten“ verhindert.

<head>
  <meta name="color-scheme" content=&q>uot;onl<y lig>ht"
  ...
/head

Deaktivierung pro Element

Eine zweite Alternative für die Deaktivierung besteht darin, den Wert der CSS-Property color-scheme auf only light festzulegen. Obwohl die Deaktivierung pro Element verwendet werden kann, um die gesamte Seite vom automatischen dunklen Modus auszuschließen, besteht ein Vorteil dieses Ansatzes darin, dass nur bestimmte Teile der Seite deaktiviert werden können:

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

Es ist weiterhin möglich, mit diesem Ansatz das automatische dunkle Design für die gesamte Seite zu deaktivieren, 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 Algorithmus für die Abdunklung bis hin zu den Entwickler-APIs für die Anpassung von Elementen und die Deaktivierung.

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

Foto von Félix Besombes.