Dunkles Design implementieren

Compose ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Arbeiten mit Designs in Compose
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 Bildschirmtechnologie des Geräts erheblich.
  • Verbesserte Sichtbarkeit für Nutzer mit eingeschränktem Sehvermögen und für Nutzer, die empfindlich auf grelles Licht reagieren.
  • Erleichtert die Nutzung eines Geräts bei wenig Licht.

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

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

  • Wenn Sie das dunkle Design verwenden möchten, gehen Sie zu Einstellungen > Display > Design und aktivieren Sie die entsprechende Option.
  • Wenn die Funktion aktiviert ist, können Sie über die Kachel „Schnelleinstellungen“ im Benachrichtigungs-Steuerfeld zwischen den Themen wechseln.
  • Aktivieren Sie auf Pixel-Geräten den Energiesparmodus, 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 mithilfe einer WebView-Komponente finden Sie unter Webinhalte in WebView verdunkeln.

Dunkles Design in Ihrer App unterstützen

Wenn Sie das dunkle Design unterstützen möchten, legen Sie das Design Ihrer App (normalerweise unter res/values/styles.xml) so fest, dass es von einem DayNight-Design übernommen wird:

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

Sie können auch das dunkle Material Components-Design verwenden:

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

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

Designs und Stile

Verwenden Sie keine hartcodierten Farben oder Symbole, die für die Verwendung in einem hellen Design vorgesehen sind. Verwenden Sie stattdessen Themenattribute oder Ressourcen mit Nachtqualifikation.

Für das dunkle Design sind zwei Designattribute am wichtigsten:

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

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

Design in der App ändern

Sie können Nutzern erlauben, das App-Design zu ändern, während die App ausgeführt wird. Wir empfehlen folgende Optionen:

  • Leicht
  • Dunkel
  • Systemstandardeinstellung (empfohlene Standardoption)

Diese Optionen entsprechen direkt den AppCompat.DayNight-Modi:

So wechseln Sie das Design:

Dunkles Design erzwingen

Android 10 bietet Dunkles Design erzwingen, eine Funktion, mit der Entwickler schnell ein dunkles Design implementieren können, ohne explizit ein DayNight-Design festzulegen.

Bei „Dunkelmodus erzwingen“ wird jede Ansicht Ihrer App mit hellem Design analysiert und automatisch ein dunkles Design angewendet, bevor die Ansicht auf dem Bildschirm dargestellt wird. Sie können eine Mischung aus „Force Dark“ und nativer 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 wie Theme.Material.Light festgelegt. Wenn Sie „Force Dark“ verwenden, testen Sie Ihre App gründlich und schließen Sie bei Bedarf Ansichten aus.

Wenn Ihre App ein dunkles Design verwendet, z. B. Theme.Material, wird „Dunkeles Design erzwingen“ nicht angewendet. Wenn das Design Ihrer App von einem DayNight-Design abgeleitet ist, wird „Dunkel erzwingen“ aufgrund des automatischen Designwechsels nicht angewendet.

„Dunklen Modus erzwingen“ für eine Datenansicht deaktivieren

Die Funktion „Force Dark“ 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 verdunkeln. 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 dunkler Designs.

Benachrichtigungen und Widgets

Achten Sie bei UI-Oberflächen, die Sie auf dem Gerät anzeigen, aber nicht direkt steuern, darauf, dass die verwendeten Ansichten dem Design der Host-App entsprechen. 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 Ansichten für benutzerdefinierte Benachrichtigungen

Testen Sie die Inhalte von Launcher-Widgets oder benutzerdefinierten Benachrichtigungsinhalten sowohl im hellen als auch im dunklen Design.

Auf die folgenden häufigen Fallstricke sollten Sie achten:

  • Angenommen, die Hintergrundfarbe ist immer hell.
  • Textfarben hartcodieren
  • Festlegen einer hartcodierten Hintergrundfarbe bei Verwendung der Standardtextfarbe
  • Ein gezeichnetes Symbol mit einer statischen Farbe verwenden

Verwenden Sie in all diesen Fällen die entsprechenden Designattribute anstelle von hartcodierten Farben.

Startbildschirme

Wenn Ihre App einen benutzerdefinierten Startbildschirm hat, müssen Sie ihn möglicherweise so ändern, dass er dem ausgewählten Design entspricht.

Entfernen Sie alle hartcodierten Farben, z. B. Hintergrundfarben, die programmatisch auf „Weiß“ gesetzt sind. Verwenden Sie stattdessen das Attribut „?android:attr/colorBackground“ für das Design.

Konfigurationsänderungen

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

In einigen Fällen kann es sinnvoll sein, die Konfigurationsänderung von einer App auszuführen. So können Sie beispielsweise eine Konfigurationsänderung verzögern, weil gerade ein Video wiedergegeben wird.

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

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

Wenn ein Activity angibt, dass es Konfigurationsänderungen verarbeitet, wird seine Methode onConfigurationChanged() aufgerufen, wenn es zu einer Themenänderung kommt.

Um das aktuelle Design zu prüfen, können Apps Code wie diesen ausführen:

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;
}