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 funkcji Utwórz
Schemat kolorów – Material Design 3 →

Rysunek 1. Ciemny motyw

Ciemny motyw jest dostępny na Androidzie 10 (poziom interfejsu API 29) i nowszych. Ma to 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 przy 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 i nowszych wersjach na 3 sposoby:

  • Aby włączyć ciemny motyw, kliknij Ustawienia > Wyświetlacz > Motyw.
  • Gdy ta opcja jest włączona, możesz przełączać motywy z paska powiadomień za pomocą kafelka Szybkich ustawień.
  • Na urządzeniach Pixel włącz Oszczędzanie baterii, aby jednocześnie włączyć ciemny motyw. Inne urządzenia mogą nie obsługiwać tej funkcji.

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 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 Material Komponenty:

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

Łączy to główny motyw aplikacji z kontrolowanymi przez system flagami trybu nocnego i nadaje aplikacji domyślny ciemny motyw, gdy jest włączony.

Motywy i style

Unikaj stosowania na stałe kolorów lub ikon przeznaczonych do użytku z jasnym motywem. Używaj zamiast nich atrybutów motywu lub zasobów kwalifikacji nocnych.

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

  • ?android:attr/textColorPrimary: kolor tekstu ogólnego przeznaczenia. Jest prawie czarna w jasnym motywie i prawie biała w ciemnych motywach. która jest wyłączona.
  • ?attr/colorControlNormal: kolor ikony ogólnego przeznaczenia. która jest wyłączona.

Zalecamy korzystanie z komponentów Material Design, ponieważ system ich kolorów, w tym atrybuty motywu ?attr/colorSurface i ?attr/colorOnSurface, zapewnia łatwy dostęp do odpowiednich kolorów. Możesz dostosować te atrybuty w swoim 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 zmienić motyw, wykonaj te czynności:

Wymuś ciemny kolor

Android 10 udostępnia funkcję Force Dark, dzięki której deweloperzy mogą szybko wdrożyć ciemny motyw bez ustawiania motywu DayNight.

Funkcja wymuszania trybu ciemnego analizuje każdy widok aplikacji w jasnym kolorze i automatycznie stosuje ciemny motyw, zanim zostanie on wyświetlony na ekranie. Aby skrócić czas potrzebny na wdrożenie ciemnego motywu, możesz użyć kombinacji trybu Wymuś tryb ciemny i implementacji natywnej.

Aplikacje muszą włączyć wymuszanie trybu ciemnego, ustawiając atrybut android:forceDarkAllowed="true" w motywie aktywności. Ten atrybut jest ustawiany we wszystkich jasnych motywach dostępnych w systemie i w AndroidzieX, np. Theme.Material.Light. Gdy używasz opcji Wymuś tryb ciemny, dokładnie przetestuj aplikację i w razie potrzeby wyklucz wyświetlenia.

Jeśli aplikacja używa ciemnego motywu, np. Theme.Material, tryb wymuszania trybu ciemnego nie będzie stosowany. Podobnie, jeśli motyw aplikacji dziedziczy z motywu DayNight, funkcja wymuszania trybu ciemnego nie będzie stosowana ze względu na automatyczne przełączanie motywu.

Wyłączanie wymuszania ciemnego widoku na ekranie

Wymuszanie trybu ciemnego można ustawić w przypadku konkretnych 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 wersji demonstracyjnej WebView w GitHubie.

Sprawdzone metody

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

Powiadomienia i widżety

W przypadku platform interfejsu, które są wyświetlane na urządzeniu, ale nie mają nad nimi bezpośredniej kontroli, upewnij się, że używane widoki odzwierciedlają motyw aplikacji hosta. Są to na przykład powiadomienia i widżety uruchamiające.

Powiadomienia

Użyj szablonów powiadomień udostępnionych w systemie, np. MessagingStyle. Oznacza to, że za stosowanie prawidłowego stylu widoku odpowiada system.

Widżety i niestandardowe widoki powiadomień

W przypadku widżetów Menu z aplikacjami lub jeśli aplikacja używa niestandardowych widoków treści powiadomień, przetestuj zawartość zarówno na jasnym, jak i ciemnym motywie.

Typowe błędy, na które należy uważać:

  • Zakładamy, że kolor tła jest zawsze jasny
  • Kodowanie tekstu na stałe.
  • Ustawienie zakodowanego na stałe koloru tła z domyślnym kolorem tekstu.
  • używanie ikony, którą można rysować, w stałym kolorze.

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 wpisane na stałe, takie jak kolor tła automatycznie ustawiony na biały. Zamiast tego użyj atrybutu motywu ?android:attr/colorBackground.

Zmiany konfiguracji

Zmiana motywu aplikacji (za pomocą ustawienia systemu lub narzędzia AppCompat) powoduje zmianę konfiguracji uiMode. Oznacza to, że działania są automatycznie odtwarzane.

W niektórych przypadkach możesz potrzebować aplikacji do obsługi zmiany konfiguracji. Możesz na przykład opóźnić zmianę konfiguracji z powodu odtwarzania filmu.

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

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

Gdy Activity deklaruje, że obsługuje zmiany konfiguracji, jej metoda onConfigurationChanged() jest wywoływana w przypadku zmiany motywu.

Aby sprawdzić aktualny 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;
}