Wdrażanie ciemnego motywu

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

Rysunek 1. ciemny motyw.

Ciemny motyw jest dostępny na Androidzie 10 (poziom interfejsu API 29) i nowszych wersjach. Ma on te zalety:

  • Znacznie zmniejsza zużycie energii, w zależności od technologii ekranu urządzenia.
  • Poprawia widoczność dla użytkowników niedowidzących i osób 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 działających na urządzeniu.

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

  • Aby włączyć ciemny motyw, użyj ustawienia systemowego, wybierając Ustawienia > Wyświetlacz > Motyw.
  • Jeśli ta opcja jest włączona, możesz przełączać motywy w obszarze powiadomień za pomocą kafelka Szybkich ustawień.
  • Na urządzeniach Pixel włączenie trybu oszczędzania baterii powoduje jednoczesne włączenie ciemnego motywu. Inne urządzenia mogą nie obsługiwać tego działania.

Instrukcje stosowania ciemnego motywu do treści z internetu 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ę 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 Design:

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

Powoduje to powiązanie głównego motywu aplikacji z flagami trybu nocnego kontrolowanymi przez system i nadaje aplikacji domyślny ciemny motyw, gdy jest on włączony.

Motywy i style

Unikaj używania zakodowanych na stałe kolorów lub ikon przeznaczonych do użycia w jasnym motywie. Zamiast tego użyj atrybutów motywu lub zasobów przeznaczonych do trybu nocnego.

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

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

Zalecamy korzystanie z 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 motywie.

Zmienianie motywów w aplikacji

Możesz zezwolić użytkownikom na zmianę motywu aplikacji podczas jej działania. 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ę wymuszanie trybu ciemnego, która pozwala deweloperom szybko wdrożyć ciemny motyw bez konieczności jawnego ustawiania motywu DayNight.

Wymuszanie trybu ciemnego analizuje każdy widok aplikacji z jasnym motywem 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 wymuszania trybu ciemnego i implementacji natywnej.

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

Jeśli aplikacja używa ciemnego motywu, np. Theme.Material, funkcja wymuszania trybu ciemnego nie jest stosowana. Podobnie, jeśli motyw aplikacji dziedziczy po motywie DayNight, wymuszony tryb ciemny nie jest stosowany ze względu na automatyczne przełączanie motywów.

Wyłączanie wymuszonego trybu ciemnego w widoku

Wymuszenie trybu ciemnego można kontrolować w określonych widokach 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 na GitHubie.

Sprawdzone metody

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

Powiadomienia i widżety

W przypadku interfejsów, które wyświetlasz na urządzeniu, ale nie masz nad nimi bezpośredniej kontroli, upewnij się, że wszystkie używane widoki odzwierciedlają motyw aplikacji hosta. Dwa przykłady to powiadomienia i widżety w Menu z aplikacjami.

Powiadomienia

Użyj szablonów powiadomień dostarczonych przez system, takich jak MessagingStyle. Oznacza to, że system odpowiada za stosowanie prawidłowego stylu widoku.

Widżety i niestandardowe widoki powiadomień

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

Typowe pułapki, na które należy uważać:

  • Zakładamy, że kolor tła jest zawsze jasny.
  • kodowanie kolorów tekstu na stałe,
  • Ustawienie 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 aplikacja ma niestandardowy ekran powitalny, może być konieczne zmodyfikowanie go, aby odzwierciedlał wybrany motyw.

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

Zmiany konfiguracji

Gdy motyw aplikacji zmienia się w ustawieniach systemowych lub w AppCompat, powoduje 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, ponieważ odtwarzany jest film.

Aplikacja może obsługiwać implementację ciemnego motywu, deklarując, że każdy element 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ępuje zmiana motywu.

Aby sprawdzić, jaki jest bieżący motyw, aplikacje mogą uruchomić 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;
}