Wdrażanie ciemnego motywu

Wypróbuj tworzenie wiadomości
Jetpack Compose to zalecany zestaw narzędzi interfejsu na Androida. Dowiedz się, jak pracować z motywami w sekcji Redagowanie.
Schemat kolorów – Material Design 3 →

Rysunek 1. Ciemny motyw.

Tryb ciemny jest dostępny w Androidzie 10 (poziom interfejsu API 29) i nowszych. Zapewnia ona te korzyści:

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

Ciemny motyw stosowany jest do interfejsu Androida i aplikacji działających na urządzeniu.

Tryb ciemny można włączyć na Androidzie 10 i nowszych na 3 sposoby:

  • Aby włączyć ciemny motyw, otwórz ustawienia systemu (Ustawienia > Wyświetlacz > Motyw).
  • Jeśli ta funkcja jest włączona, możesz przełączać się między motywami za pomocą kafelka Szybkie ustawienia.
  • Na urządzeniach Pixel włącz tryb oszczędzania baterii, aby jednocześnie włączyć ciemny motyw. Inne urządzenia mogą nie obsługiwać tej funkcji.

Instrukcje dotyczące stosowania ciemnego motywu do treści internetowych za pomocą komponentu WebView znajdziesz w artykule Ciemny motyw w komponencie WebView.

Obsługa ciemnego motywu w aplikacji

Aby obsługiwać tryb ciemny, ustaw motyw aplikacji (zwykle znajduje się on w sekcji res/values/styles.xml) tak, aby dziedziczył z motywu DayNight:

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

Możesz też użyć ciemnego motywu komponentów Material Design:

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

Dzięki temu główny motyw aplikacji jest powiązany z flagami trybu nocnego kontrolowanymi przez system, a po włączeniu trybu nocnego aplikacja będzie domyślnie używać ciemnego motywu.

Motywy i style

Unikaj stosowania zakodowanych kolorów lub ikon przeznaczonych do ciemnego motywu. Zamiast tego użyj atrybutów motywu lub zasobów z kwalifikacją „nocna”.

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

  • ?android:attr/textColorPrimary: kolor tekstu ogólnego. W jasnym temacie jest ona prawie czarna, a w ciemnym – prawie biała. zawiera stan wyłączony.
  • ?attr/colorControlNormal: kolor ikony ogólnego przeznaczenia. zawiera stan wyłączony.

Zalecamy korzystanie z komponentów Material Design, ponieważ ich system kolorów, np. atrybuty ?attr/colorSurface i ?attr/colorOnSurface, ułatwia dostęp do odpowiednich kolorów. Możesz dostosować te atrybuty w swoim motywie.

Zmienianie motywów w aplikacji

Możesz zezwolić użytkownikom na zmianę motywu aplikacji w trakcie jej działania. Te opcje są zalecane:

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

Te opcje są bezpośrednio powiązane z tymi trybami: AppCompat.DayNight

Aby zmienić motyw:

Wymuszenie trybu ciemnego

Android 10 udostępnia funkcję Wymuszenie ciemnego motywu, która pozwala deweloperom szybko implementować ciemny motyw bez konieczności jawnego ustawiania motywu DayNight.

Funkcja wymuszania ciemnego motywu analizuje każdy widok aplikacji w jasnym motywie i automatycznie stosuje ciemny motyw przed wyświetleniem go na ekranie. Aby skrócić czas potrzebny na wdrożenie ciemnego motywu, możesz użyć zarówno zmuszania do ciemnego motywu, jak i implementacji natywnej.

Aplikacje muszą zezwalać na wymuszenie ciemnego motywu, ustawiając wartość android:forceDarkAllowed="true" w motywie aktywności. Ten atrybut jest ustawiany we wszystkich motywach jasnych udostępnianych przez system i AndroidX, takich jak Theme.Material.Light. Jeśli używasz opcji Wymuś ciemny motyw, dokładnie przetestuj aplikację i w razie potrzeby wyklucz widoki.

Jeśli aplikacja używa ciemnego motywu (np. Theme.Material), tryb ciemny nie jest stosowany. Podobnie, jeśli motyw Twojej aplikacji dziedziczy z motywu DayNight, tryb ciemny nie zostanie zastosowany z powodu automatycznego przełączania motywów.

Wyłączanie trybu ciemnego w danym widoku

Wymuszenie ciemnego motywu można włączyć w określonych widokach za pomocą atrybutu android:forceDarkAllowed lub za pomocą setForceDarkAllowed().

Treści z internetu

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

Sprawdzone metody

W następnych sekcjach znajdziesz sprawdzone metody implementowania ciemnych motywów.

Powiadomienia i widżety

W przypadku interfejsów, które wyświetlasz na urządzeniu, ale nie kontrolujesz bezpośrednio, upewnij się, że widoki, których używasz, odzwierciedlają motyw aplikacji hosta. Dwa przykłady to powiadomienia i widżety w Menu z aplikacjami.

Powiadomienia

Użyj szablonów powiadomień udostępnionych przez system, takich jak MessagingStyle. Oznacza to, że system jest odpowiedzialny za zastosowanie prawidłowego stylu widoku.

Widoki widżetów i powiadomień niestandardowych

W przypadku widżetów w wyszukiwarce lub jeśli Twoja aplikacja korzysta z niestandardowych widoków treści powiadomień przetestuj je w jasnym i ciemnym motywie.

Oto najczęstsze pułapki, na które należy uważać:

  • Zakładamy, że kolor tła jest zawsze jasny.
  • Stałe kodowanie kolorów tekstu.
  • Ustawienie zakodowanego na stałe koloru tła przy użyciu domyślnego koloru tekstu.
  • Używanie rysowanej ikony w statycznym kolorze.

W każdym z tych przypadków zamiast zakodowanych na stałe kolorów użyj odpowiednich atrybutów motywu.

ekrany uruchamiania,

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

Usuń wszystkie zakodowane na stałe kolory, takie jak kolory tła ustawione programowo na biały. Zamiast tego użyj atrybutu tematyka ?android:attr/colorBackground.

Zmiany konfiguracji

Gdy motyw aplikacji zmieni się z powodu ustawienia systemu lub AppCompat, spowoduje to uiModezmianę konfiguracji. Oznacza to, że aktywności są automatycznie odtwarzane.

W niektórych przypadkach możesz chcieć, aby zmiana konfiguracji została przeprowadzona przez aplikację. Możesz na przykład opóźnić zmianę konfiguracji, ponieważ w danym momencie odtwarzany jest film.

Aplikacja może obsługiwać implementację ciemnego motywu, deklarując, że każdy Activity może obsługiwać zmianę konfiguracji uiMode:

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

Gdy Activity deklaruje, że obsługuje zmiany konfiguracji, metoda onConfigurationChanged() jest wywoływana, gdy nastąpi zmiana motywu.

Aby sprawdzić, jaki jest bieżący motyw, aplikacje mogą uruchomić kod podobny do tego:

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