Wdrażanie ciemnego motywu

Wypróbuj Compose
Jetpack Compose to zalecany zestaw narzędzi do tworzenia interfejsu użytkownika na Androidzie. Dowiedz się, jak pracować z motywami w Compose
Schemat kolorów – Material Design 3 →

Rysunek 1. Ciemny motyw.

Ciemny motyw jest dostępny w Androidzie 10 (poziom interfejsu API 29) i nowszych. Ma on następujące korzyści:

  • 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 stosowany jest do interfejsu Androida i aplikacji działających na urządzeniu.

Ciemny motyw w Androidzie 10 i nowszych można włączyć na 3 sposoby:

  • Użyj ustawienia systemowego, otwierając Ustawienia > Wyświetlacz > Motyw.
  • Gdy jest włączony, użyj kafelka szybkich ustawień, aby przełączać motywy z paska powiadomień.
  • Na urządzeniach Pixel włącz tryb oszczędzania baterii, aby jednocześnie włączyć ciemny motyw. Inne urządzenia mogą nie obsługiwać tego działania.

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

Obsługa ciemnego motywu w aplikacji

Aby obsługiwać ciemny motyw, ustaw motyw aplikacji – zwykle znajduje się on w 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:

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

Powiąże to główny motyw aplikacji z flagami trybu nocnego sterowanymi przez system i zapewni aplikacji domyślny ciemny motyw, gdy jest on włączony.

Motywy i style

Unikaj używania kolorów lub ikon zakodowanych na stałe, które są przeznaczone do użycia w jasnym motywie. Zamiast tego używaj atrybutów motywu lub zasobów kwalifikowanych do trybu nocnego.

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

  • ?android:attr/textColorPrimary: kolor tekstu ogólnego przeznaczenia. W jasnym motywie jest prawie czarny, a w ciemnych – prawie biały. Zawiera stan wyłączony.
  • ?attr/colorControlNormal: kolor ikony ogólnego przeznaczenia. Zawiera stan wyłączony.

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

Zmienianie motywów w aplikacji

Możesz umożliwić użytkownikom zmianę motywu aplikacji podczas jej działania. Oto zalecane opcje:

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

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

Aby zmienić motyw:

Wymuszanie trybu ciemnego

Android 10 udostępnia funkcję wymuszania trybu ciemnego, która umożliwia deweloperom szybkie wdrożenie ciemnego motywu bez wyraźnego ustawiania motywu DayNight.

Wymuszanie trybu ciemnego analizuje każdy widok aplikacji z jasnym motywem i automatycznie stosuje ciemny motyw przed jego narysowaniem na ekranie. Możesz użyć połączenia wymuszania trybu ciemnego i implementacji natywnej, aby skrócić czas potrzebny na wdrożenie ciemnego motywu.

Aplikacje muszą wyrazić zgodę na wymuszanie trybu ciemnego, ustawiając android:forceDarkAllowed="true" w motywie aktywności. Ten atrybut jest ustawiony we wszystkich jasnych motywach dostarczanych przez system i AndroidX, takich jak Theme.Material.Light. Gdy używasz wymuszania trybu ciemnego, dokładnie przetestuj aplikację i w razie potrzeby wyklucz widoki.

Jeśli Twoja aplikacja używa ciemnego motywu, np. Theme.Material), wymuszanie trybu ciemnego nie jest stosowane. Podobnie, jeśli motyw aplikacji dziedziczy z motywu DayNight, wymuszanie trybu ciemnego nie jest stosowane ze względu na automatyczne przełączanie motywów.

Wyłączanie wymuszania trybu ciemnego w widoku

Wymuszanie trybu ciemnego można kontrolować w przypadku konkretnych widoków za pomocą atrybutu układu android:forceDarkAllowed lub za pomocą setForceDarkAllowed().

Treści z internetu

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

Sprawdzone metody

W kolejnych sekcjach znajdziesz sprawdzone metody wdrażania ciemnych motywów.

Powiadomienia i widżety

W przypadku powierzchni interfejsu użytkownika, które wyświetlasz na urządzeniu, ale nie kontrolujesz bezpośrednio, upewnij się, że wszystkie używane widoki odzwierciedlają motyw aplikacji hosta. Przykłady to powiadomienia i widżety Menu z aplikacjami.

Powiadomienia

Używaj szablonów powiadomień dostarczanych przez system, takich jak MessagingStyle. Oznacza to, że system jest odpowiedzialny za stosowanie prawidłowego stylu widoku.

Widżety i niestandardowe widoki powiadomień

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

Częste pułapki, na które należy uważać, to:

  • Zakładanie, że kolor tła jest zawsze jasny.
  • Kodowanie kolorów tekstu na stałe.
  • Ustawianie zakodowanego na stałe koloru tła przy użyciu domyślnego koloru tekstu.
  • Używanie ikony rysowalnej, która ma statyczny kolor.

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

Ekrany powitalne

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

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

Zmiany konfiguracji

Gdy motyw aplikacji zmienia się za pomocą ustawienia systemowego lub AppCompat, powoduje to zmianę uiMode konfiguracji. 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, ponieważ odtwarzany jest film.

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

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

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

Aby sprawdzić, jaki jest 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;
}