Mengimplementasikan tema gelap

Mencoba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan tema di Compose.
Skema Warna - Desain Material 3 →

Gambar 1. Tema gelap.

Tema gelap tersedia di Android 10 (API level 29) dan yang lebih tinggi. Tag tersebut memiliki manfaat berikut:

  • Mengurangi pemakaian daya secara signifikan, bergantung pada teknologi layar perangkat.
  • Meningkatkan visibilitas untuk pengguna yang memiliki gangguan penglihatan dan sensitif terhadap cahaya terang.
  • Memudahkan penggunaan perangkat di lingkungan yang minim cahaya.

Tema gelap diterapkan pada UI sistem Android dan aplikasi yang berjalan di perangkat.

Ada tiga cara untuk mengaktifkan tema gelap di Android 10 dan yang lebih tinggi:

  • Gunakan setelan sistem dengan membuka Setelan > Tampilan > Tema untuk mengaktifkan tema gelap.
  • Gunakan kartu Setelan Cepat untuk beralih tema dari baki notifikasi, jika diaktifkan.
  • Di perangkat Pixel, aktifkan mode Penghemat Baterai untuk mengaktifkan tema gelap secara bersamaan. Perangkat lain mungkin tidak mendukung perilaku ini.

Untuk petunjuk tentang cara menerapkan tema gelap pada konten berbasis web menggunakan komponen WebView, lihat Menggelapkan konten web di WebView.

Mendukung tema gelap di aplikasi Anda

Untuk mendukung tema gelap, tetapkan tema aplikasi Anda—biasanya ditemukan di res/values/styles.xml—untuk diwarisi dari tema DayNight:

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

Anda juga dapat menggunakan tema gelap Komponen Material:

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

Tindakan ini mengaitkan tema utama aplikasi ke flag mode malam yang dikontrol sistem dan memberi aplikasi tema gelap default saat diaktifkan.

Tema dan gaya

Hindari penggunaan warna atau ikon hardcode yang dimaksudkan untuk digunakan dalam tema terang. Gunakan atribut tema atau resource yang memenuhi syarat malam.

Dua atribut tema yang paling penting untuk tema gelap:

  • ?android:attr/textColorPrimary: warna teks tujuan umum. Warna ini hampir hitam dalam tema terang dan hampir putih dalam tema gelap. Atribut ini berisi status nonaktif.
  • ?attr/colorControlNormal: warna ikon tujuan umum. Atribut ini berisi status nonaktif.

Sebaiknya gunakan Komponen Desain Material, karena sistem tema warnanya, seperti atribut tema ?attr/colorSurface dan ?attr/colorOnSurface, memberikan akses mudah ke warna yang sesuai. Anda dapat menyesuaikan atribut ini dalam tema.

Mengubah tema dalam aplikasi

Anda dapat mengizinkan pengguna mengubah tema aplikasi saat aplikasi sedang berjalan. Berikut adalah opsi yang direkomendasikan:

  • Terang
  • Gelap
  • Default sistem (opsi default yang direkomendasikan)

Opsi ini dipetakan langsung ke mode AppCompat.DayNight:

Untuk beralih tema, lakukan tindakan berikut:

Force Dark

Android 10 menyediakan Gelap Otomatis, fitur bagi developer untuk menerapkan tema gelap dengan cepat tanpa menetapkan tema DayNight secara eksplisit.

Gelap Otomatis menganalisis setiap tampilan aplikasi bertema terang dan menerapkan tema gelap secara otomatis sebelum digambar ke layar. Anda dapat menggunakan kombinasi Gelap Otomatis dan implementasi native untuk mengurangi waktu yang diperlukan untuk menerapkan tema gelap.

Aplikasi harus ikut serta dalam Gelap Otomatis dengan menyetel android:forceDarkAllowed="true" di tema aktivitas. Atribut ini ditetapkan pada semua tema terang yang disediakan sistem dan AndroidX, seperti Theme.Material.Light. Saat Anda menggunakan Gelap Otomatis, uji aplikasi Anda secara menyeluruh dan kecualikan tampilan sesuai kebutuhan.

Jika aplikasi Anda menggunakan tema gelap, seperti Theme.Material), Gelap Otomatis tidak akan diterapkan. Demikian pula, jika tema aplikasi Anda diwarisi dari tema DayNight, Gelap Otomatis tidak akan diterapkan karena peralihan tema otomatis.

Menonaktifkan Force Dark pada tampilan

Gelap Otomatis dapat dikontrol pada tampilan tertentu dengan atribut tata letak android:forceDarkAllowed atau dengan setForceDarkAllowed().

Konten web

Untuk informasi tentang penggunaan tema gelap dalam konten berbasis web, lihat Menggelapkan konten web di WebView. Untuk contoh tema gelap yang diterapkan ke WebView, lihat demo WebView di GitHub .

Praktik terbaik

Bagian berikut memberikan praktik terbaik untuk mengimplementasikan tema gelap.

Notifikasi dan widget

Untuk platform UI yang Anda tampilkan di perangkat, tetapi tidak Anda kontrol secara langsung, pastikan tampilan apa pun yang Anda gunakan mencerminkan tema aplikasi host. Dua contohnya adalah notifikasi dan widget peluncur.

Notifikasi

Gunakan template notifikasi yang disediakan sistem, seperti MessagingStyle. Artinya, sistem bertanggung jawab untuk menerapkan gaya tampilan yang benar.

Tampilan widget dan notifikasi kustom

Untuk widget peluncur, atau jika aplikasi Anda menggunakan tampilan konten notifikasi kustom, uji konten pada tema terang dan gelap.

Kesalahan umum yang harus diperhatikan antara lain:

  • Dengan asumsi warna latar belakang selalu terang.
  • Melakukan hardcode warna teks.
  • Menetapkan warna latar belakang hardcode saat menggunakan warna teks default.
  • Menggunakan ikon drawable yang memiliki warna statis.

Dalam semua kasus ini, gunakan atribut tema yang sesuai, bukan warna hardcode.

Meluncurkan layar

Jika aplikasi Anda memiliki layar peluncuran kustom, Anda mungkin perlu mengubahnya agar mencerminkan tema yang dipilih.

Hapus warna hardcode seperti warna latar belakang yang ditetapkan secara terprogram ke putih. Sebagai gantinya, gunakan atribut tema ?android:attr/colorBackground.

Perubahan konfigurasi

Saat tema aplikasi berubah, baik melalui setelan sistem maupun AppCompat, perubahan ini akan memicu perubahan konfigurasi uiMode. Artinya, aktivitas akan otomatis dibuat ulang.

Dalam beberapa kasus, Anda mungkin ingin aplikasi menangani perubahan konfigurasi. Misalnya, Anda mungkin ingin menunda perubahan konfigurasi karena ada video yang sedang diputar.

Aplikasi dapat menangani penerapan tema gelap dengan mendeklarasikan bahwa setiap Activity dapat menangani perubahan konfigurasi uiMode:

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

Saat Activity mendeklarasikan bahwa ia menangani perubahan konfigurasi, metode onConfigurationChanged()-nya akan dipanggil saat ada perubahan tema.

Untuk memeriksa tema saat ini, aplikasi dapat menjalankan kode seperti berikut:

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