Wdrażanie ciemnego motywu

Wypróbuj sposób tworzenia wiadomości
Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak korzystać z motywów w sekcji Utwórz
Schemat kolorów – Material Design 3 →

Rysunek 1. Ciemny motyw.

Ciemny motyw jest dostępny na urządzeniach z Androidem 10 (poziom interfejsu API 29) i nowszym. Ma następujące zalety:

  • Znacznie zmniejsza zużycie energii w zależności od technologii ekranu urządzenia.
  • Poprawia widoczność dla użytkowników niedowidzących i wrażliwych na jasne światło.
  • Ułatwia korzystanie z urządzenia w słabym oświetleniu.

Ciemny motyw dotyczy interfejsu systemu Android i aplikacji uruchomionych na urządzeniu.

Ciemny motyw można włączyć na Androidzie 10 lub nowszym na 3 sposoby:

  • Użyj ustawienia systemowego, klikając Ustawienia > Wyświetlacz > Motyw, aby włączyć ciemny motyw.
  • Używając kafelka Szybkich ustawień, możesz przełączać motywy na pasku powiadomień, jeśli są one włączone.
  • Na urządzeniach Pixel włącz Oszczędzanie baterii, aby jednocześnie włączyć ciemny motyw. Inne urządzenia mogą nie obsługiwać tego działania.

Instrukcje stosowania ciemnego motywu do treści internetowych za pomocą komponentu WebView znajdziesz w artykule Przyciemnianie treści internetowych w komponencie WebView.

Obsługa ciemnego motywu w aplikacji

Aby obsługiwać ciemny motyw, ustaw motyw aplikacji – zwykle stosowany w res/values/styles.xml – tak, aby odziedziczył go z motywu DayNight:

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

Możesz też użyć ciemnego motywu Material Komponenty:

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

Łączy to główny motyw aplikacji z flagami trybu nocnego kontrolowanego przez system i nadaje aplikacji domyślny ciemny motyw po włączeniu.

Motywy i style

Unikaj używania zakodowanych na stałe kolorów lub ikon przeznaczonych do zastosowania w jasnym motywie. Zamiast tego użyj atrybutów związanych z motywem lub zasobów nocnych.

W przypadku ciemnego motywu najważniejsze są dwa atrybuty:

  • ?android:attr/textColorPrimary: kolor tekstu ogólnego przeznaczenia. Jest prawie czarny i jasny, a ciemny – prawie biały. Zawiera ona stan wyłączony.
  • ?attr/colorControlNormal: kolor ikony ogólnego przeznaczenia. Zawiera ona stan wyłączony.

Zalecamy korzystanie z komponentów Material Design, ponieważ system motywów kolorystycznych, taki jak atrybuty motywu ?attr/colorSurface i ?attr/colorOnSurface, zapewnia łatwy dostęp do odpowiednich kolorów. Możesz dostosować te atrybuty w motywie.

Zmień motywy w aplikacji

Możesz zezwolić użytkownikom na zmienianie motywu aplikacji, gdy jest ona uruchomiona. Oto zalecane opcje:

  • Jasny
  • Ciemny
  • Ustawienie domyślne systemu (zalecana opcja domyślna)

Te opcje są mapowane bezpośrednio na tryby AppCompat.DayNight:

Aby przełączyć motyw, wykonaj te czynności:

wymuszanie trybu ciemnego

Android 10 udostępnia funkcję Wymuś ciemny motyw, która pozwala deweloperom szybko wdrażać ciemny motyw bez konieczności ustawiania motywu DayNight.

Wymuszaj ciemny motyw analizuje każdy wyświetlenie Twojej aplikacji z jasnym motywem i automatycznie stosuje ciemny motyw, zanim obraz zostanie wyświetlony na ekranie. Możesz użyć kombinacji interfejsu Force Dark i natywnej implementacji, aby skrócić czas potrzebny na wdrożenie ciemnego motywu.

Aplikacje muszą włączać wymuszanie ciemności za pomocą ustawienia android:forceDarkAllowed="true" w motywie aktywności. Ten atrybut jest ustawiony w przypadku wszystkich jaskrawych motywów dostarczanych przez system i AndroidaX, np. Theme.Material.Light. Jeśli używasz funkcji Wymuś ciemny ekran, dokładnie przetestuj aplikację i w razie potrzeby wyklucz widoki.

Jeśli aplikacja używa ciemnego motywu, np. Theme.Material, ustawienie Wymuś ciemny motyw nie jest stosowane. Podobnie jeśli motyw aplikacji dziedziczy motyw DayNight, tryb ciemny nie jest stosowany z powodu automatycznego przełączania motywu.

Wyłączanie wymuszania przyciemnienia w widoku

Opcja wymuszania ciemności można kontrolować w przypadku określonych widoków za pomocą atrybutu układu android:forceDarkAllowed lub setForceDarkAllowed().

Treści z internetu

Informacje o używaniu ciemnych motywów w treściach internetowych znajdziesz w artykule Przyciemnianie treści internetowych w komponencie WebView. Przykład ciemnego motywu zastosowanego w komponencie WebView znajdziesz w prezentacji WebView na GitHubie.

Sprawdzone metody

W poniższych sekcjach znajdziesz sprawdzone metody implementacji ciemnych motywów.

Powiadomienia i widżety

W przypadku platform interfejsu, które są wyświetlane na urządzeniu, ale których nie można bezpośrednio kontrolować, upewnij się, że wszystkie używane widoki są zgodne z motywem aplikacji hosta. Mogą to być na przykład powiadomienia i widżety programu uruchamiającego.

Powiadomienia

Użyj szablonów powiadomień dostarczonych przez system, np. MessagingStyle. Oznacza to, że to system odpowiada za zastosowanie właściwego stylu widoku.

Widżety i niestandardowe widoki powiadomień

W przypadku widżetów programu uruchamiającego lub jeśli aplikacja korzysta z niestandardowych widoków treści powiadomień, przetestuj treści zarówno na jasnym, jak i ciemnym motywie.

Oto częste błędy, na które trzeba uważać:

  • Zakładamy, że tło jest zawsze jasne.
  • Zakodowanie kolorami tekstu na stałe.
  • Ustawienie koloru tła zakodowanego na stałe, gdy używany jest domyślny kolor tekstu.
  • Używanie rysowalnej ikony w kolorze statycznym.

We wszystkich tych przypadkach użyj odpowiednich atrybutów motywu zamiast kolorów zakodowanych na stałe.

Ekrany uruchamiania

Jeśli Twoja aplikacja ma niestandardowy ekran uruchamiania, być może trzeba będzie go zmodyfikować, aby odzwierciedlał wybrany motyw.

Usuń wszystkie kolory zakodowane na stałe, takie jak kolory tła, które zostały automatycznie ustawione na biały. Zamiast tego użyj atrybutu motywu ?android:attr/colorBackground.

Zmiany konfiguracji

Gdy motyw aplikacji zmieni się przez ustawienie systemowe lub przez AppCompat, spowoduje to zmianę konfiguracji uiMode. Oznacza to, że aktywności są automatycznie odtwarzane.

W niektórych przypadkach możesz chcieć, aby aplikacja obsługiwała zmianę konfiguracji. Możesz na przykład opóźnić zmianę konfiguracji ze względu na odtwarzanie filmu.

Aplikacja może obsłużyć wdrożenie ciemnego motywu, deklarując, że każdy element Activity może obsłużyć zmianę konfiguracji uiMode:

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

Jeśli obiekt Activity zadeklaruje, że obsługuje zmiany w konfiguracji, jej metoda onConfigurationChanged() jest wywoływana w przypadku zmiany motywu.

Aby sprawdzić aktualny motyw, aplikacje mogą uruchamiać taki kod:

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