Dunkles Design implementieren

Compose ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Themen in „Compose“ verwenden
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 diese Kachel aktiviert ist, kannst du in der Benachrichtigungsleiste das Design 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 deiner 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 Hauptthema der App mit den vom System gesteuerten Nachtmodus-Flags verknüpft und der App wird ein dunkles Standarddesign zugewiesen, wenn es 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 Attribute 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. Es enthält einen deaktivierten Status.

Wir empfehlen die Verwendung von Material Design-Komponenten, da das Farbdesign, wie die Designattribute ?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 die folgenden Optionen:

  • Leicht
  • Dunkel
  • Systemstandardeinstellung (empfohlene Standardoption)

Diese Optionen lassen sich direkt den AppCompat.DayNight-Modi zuordnen:

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 angezeigt wird. Du kannst eine Mischung aus „Force Dark“ und der nativen Implementierung verwenden, um den Zeitaufwand für die Implementierung des dunklen Designs zu reduzieren.

Apps müssen die Funktion „Dunkles Design erzwingen“ aktivieren, indem sie android:forceDarkAllowed="true" im Design der Aktivität festlegen. Dieses Attribut wird für alle vom System und von AndroidX bereitgestellten hellen Designs festgelegt, z. B. Theme.Material.Light. 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 übernommen wird, wird „Dunkelheit 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

Bei Launcher-Widgets oder wenn Ihre App benutzerdefinierte Ansichten für Benachrichtigungsinhalte verwendet, testen Sie die Inhalte 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.
  • Eine hartcodierte Hintergrundfarbe bei Verwendung der Standardtextfarbe festlegen.
  • Verwendung eines Drawable-Symbols in einer statischen Farbe

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