Dunkles Design implementieren

Compose ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Hier erfahren Sie, wie Sie mit Designs in Compose arbeiten.
Farbschema – Material Design 3 →

Abbildung 1: Dunkles Design

Das dunkle Design ist ab Android 10 (API-Level 29) verfügbar. Sie bietet folgende Vorteile:

  • Reduziert den Stromverbrauch je nach Displaytechnologie des Geräts erheblich.
  • Verbessert die Sichtbarkeit für Nutzer mit eingeschränktem Sehvermögen und für Nutzer, die empfindlich auf helles Licht reagieren.
  • Erleichtert die Verwendung eines Geräts bei schlechten Lichtverhältnissen.

Bei Verwendung des dunklen Designs ändert sich die Darstellung der Android-Systembenutzeroberfläche und der auf dem Gerät ausgeführten Apps.

Es gibt drei Möglichkeiten, das dunkle Design unter Android 10 und höher zu aktivieren:

  • Wenn du das dunkle Design aktivieren möchtest, gehe zu Einstellungen > Display > Design.
  • Wenn die Schnelleinstellungen-Kachel aktiviert ist, kannst du das Design über die Benachrichtigungsleiste wechseln.
  • Auf Pixel-Geräten kannst du den Energiesparmodus aktivieren, um gleichzeitig das dunkle Design zu aktivieren. Andere Geräte unterstützen dieses Verhalten möglicherweise nicht.

Eine Anleitung zum Anwenden eines dunklen Designs auf webbasierte Inhalte mit einer WebView-Komponente finden Sie unter Webinhalte in WebView abdunkeln.

Dunkles Design in Ihrer App unterstützen

Wenn du das dunkle Design unterstützen möchtest, lege das Design deiner App fest, das sich normalerweise in res/values/styles.xml befindet, damit es von einem DayNight-Design übernommen wird:

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

Sie können auch das dunkle Design für Material-Komponenten verwenden:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

Dadurch wird das Hauptdesign der App mit den vom System gesteuerten Flags für den Nachtmodus verknüpft und die App erhält ein standardmäßiges dunkles Design, wenn es aktiviert ist.

Designs und Stile

Vermeiden Sie hartcodierte Farben oder Symbole, die für die Verwendung in einem hellen Design vorgesehen sind. Verwende stattdessen Designattribute oder für den Nachtmodus geeignete Ressourcen.

Zwei Designattribute sind für das dunkle Design am wichtigsten:

  • ?android:attr/textColorPrimary: Eine Textfarbe für allgemeine Zwecke. Im hellen Design ist sie fast schwarz, im dunklen Design fast weiß. Sie enthält einen deaktivierten Status.
  • ?attr/colorControlNormal: eine Symbolfarbe für allgemeine Zwecke. Sie enthält einen deaktivierten Status.

Wir empfehlen die Verwendung von Material Design-Komponenten, da das Farbschemasystem, z. B. die Designattribute ?attr/colorSurface und ?attr/colorOnSurface, einen einfachen Zugriff auf geeignete Farben bietet. Sie können diese Attribute in Ihrem Design anpassen.

Designs in der App ändern

Sie können Nutzern erlauben, das Design der App zu ändern, während die App ausgeführt wird. Folgende Optionen werden empfohlen:

  • Hell
  • Dunkel
  • Systemstandard (empfohlene Standardoption)

Diese Optionen entsprechen direkt den AppCompat.DayNight-Modi:

So wechseln Sie das Design:

Funktion „Dunkles Design erzwingen“

Android 10 bietet die Funktion Dunkles Design erzwingen, mit der Entwickler schnell ein dunkles Design implementieren können, ohne explizit ein DayNight-Design festlegen zu müssen.

Die Funktion „Dunkles Design erzwingen“ analysiert jede Ansicht Ihrer App mit hellem Design und wendet automatisch ein dunkles Design an, bevor die Ansicht auf dem Bildschirm angezeigt wird. Du kannst eine Kombination aus der Funktion „Dunkles Design erzwingen“ und der nativen Implementierung verwenden, um die Zeit für die Implementierung des dunklen Designs zu verkürzen.

Apps müssen die Funktion „Dunkles Design erzwingen“ aktivieren, indem sie android:forceDarkAllowed="true" im Design der Aktivität festlegen. Dieses Attribut ist für alle vom System und von AndroidX bereitgestellten hellen Designs festgelegt, z. B. Theme.Material.Light. Wenn Sie die Funktion „Dunkles Design erzwingen“ verwenden, sollten Sie Ihre App gründlich testen und Ansichten nach Bedarf ausschließen.

Wenn deine App ein dunkles Design wie Theme.Material verwendet, wird die Funktion „Dunkles Design erzwingen“ nicht angewendet. Wenn das Design Ihrer App von einem DayNight-Design abgeleitet ist, wird die Funktion „Dunkles Design erzwingen“ aufgrund des automatischen Designwechsels ebenfalls nicht angewendet.

Funktion „Dunkles Design erzwingen“ für eine Ansicht deaktivieren

Die Funktion „Dunkles Design erzwingen“ kann für bestimmte Ansichten mit dem Layoutattribut android:forceDarkAllowed oder mit setForceDarkAllowed() gesteuert werden.

Webinhalt

Informationen zur Verwendung dunkler Designs in webbasierten Inhalten finden Sie unter Webinhalte in WebView abdunkeln. Ein Beispiel für ein dunkles Design, das auf eine WebView angewendet wird, finden Sie in der WebView-Demo auf GitHub.

Best Practices

In den folgenden Abschnitten finden Sie Best Practices für die Implementierung von dunklen Designs.

Benachrichtigungen und Widgets

Achten Sie bei UI-Oberflächen, die Sie auf dem Gerät anzeigen, aber nicht direkt steuern, darauf, dass alle von Ihnen verwendeten Ansichten das Design der Host-App widerspiegeln. Zwei Beispiele sind Benachrichtigungen und Launcher-Widgets.

Benachrichtigungen

Verwenden Sie die vom System bereitgestellten Benachrichtigungsvorlagen, z. B. MessagingStyle. Das bedeutet, dass das System für die Anwendung des richtigen Ansichtsstils verantwortlich ist.

Widgets und benutzerdefinierte Benachrichtigungsansichten

Bei Launcher-Widgets oder wenn deine App benutzerdefinierte Ansichten für Benachrichtigungsinhalte verwendet, solltest du die Inhalte sowohl im hellen als auch im dunklen Design testen.

Zu den häufigsten Fehlern gehören:

  • Angenommen, die Hintergrundfarbe ist immer hell.
  • Textfarben hartcodieren.
  • Festlegen einer hartcodierten Hintergrundfarbe bei Verwendung der Standardtextfarbe.
  • Verwendung eines Drawable-Symbols mit einer statischen Farbe.

Verwende in all diesen Fällen geeignete Designattribute anstelle von hartcodierten Farben.

Startbildschirme

Wenn deine App einen benutzerdefinierten Startbildschirm hat, musst du ihn möglicherweise so anpassen, dass er das ausgewählte Design widerspiegelt.

Entferne alle hartcodierten Farben, z. B. Hintergrundfarben, die programmatisch auf Weiß festgelegt sind. Verwenden Sie stattdessen das Designattribut ?android:attr/colorBackground.

Konfigurationsänderungen

Wenn sich das Design der App ändert, entweder über die Systemeinstellung oder AppCompat, wird eine Konfigurationsänderung vom Typ uiMode ausgelöst. Das bedeutet, dass Aktivitäten automatisch neu erstellt werden.

In einigen Fällen kann es sinnvoll sein, dass eine App die Konfigurationsänderung verarbeitet. Beispielsweise möchten Sie eine Konfigurationsänderung möglicherweise verzögern, weil ein Video abgespielt wird.

Eine App kann die Implementierung des dunklen Designs verarbeiten, indem sie deklariert, dass jede Activity die Konfigurationsänderung uiMode verarbeiten kann:

<activity
    android:name=".MyActivity"
    android:configChanges="uiMode" />

Wenn eine Activity deklariert, dass sie Konfigurationsänderungen verarbeitet, wird ihre Methode onConfigurationChanged() aufgerufen, wenn sich das Design ändert.

Apps können Code wie den folgenden ausführen, um das aktuelle Design zu prüfen:

Kotlin

val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
when (currentNightMode) {
    Configuration.UI_MODE_NIGHT_NO -> {} // Night mode is not active, we're using the light theme.
    Configuration.UI_MODE_NIGHT_YES -> {} // Night mode is active, we're using dark theme.
}

Java

int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK;
switch (currentNightMode) {
    case Configuration.UI_MODE_NIGHT_NO:
        // Night mode is not active, we're using the light theme
        break;
    case Configuration.UI_MODE_NIGHT_YES:
        // Night mode is active, we're using dark theme
        break;
}