0Pricing
Jetpack Compose Academy · Pelajaran

Mode Gelap & Warna Dinamis

Sesuaikan warna dengan sistem dan wallpaper.

Mode Gelap & Warna Dinamis adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Dua Palet, Satu Aplikasi

Aplikasi yang dipoles menyediakan palet terang dan gelap. Anda mendefinisikannya sebagai objek colorScheme terpisah dan beralih di tingkat tema. 🌙

Mendeteksi Pengaturan Sistem

Anda menanyakan mode aktif kepada sistem dengan isSystemInDarkTheme, sebuah Composable yang mengembalikan true saat pengguna memilih mode gelap.

val dark = isSystemInDarkTheme()

Memilih Skema

Dengan penanda tersebut, Anda memilih palet yang akan diteruskan ke MaterialTheme, sehingga aplikasi otomatis mengikuti pengaturan dark mode sistem.

val scheme = if (dark) darkColorScheme()
  else lightColorScheme()

Bawaan darkColorScheme

Pembangun darkColorScheme menyediakan nilai bawaan yang sesuai untuk kondisi minim cahaya, sehingga Anda mendapatkan permukaan gelap yang nyaman dan mudah dibaca bahkan sebelum menyesuaikannya.

Kontras Tetap Penting

Dalam mode gelap, Anda tetap menggunakan roles warna yang sama, tetapi membuat permukaan lebih gelap dan warna di atasnya lebih terang agar teks tetap mudah dibaca.

Apa Itu Warna Dinamis

Dynamic color adalah keajaiban Material You: pada Android 12 ke atas, sistem dapat mengambil palet Anda dari wallpaper pengguna. 🎨

Memeriksa Versi Android

Warna dinamis memerlukan API 31 atau lebih tinggi, jadi lakukan pemeriksaan versi sebelum menggunakan skema berbasis wallpaper.

val supported = Build.VERSION.SDK_INT >= 31

Membuat Skema Dinamis

Saat didukung, Anda memanggil dynamicLightColorScheme atau varian gelapnya dengan konteks untuk mengambil warna langsung dari wallpaper.

dynamicDarkColorScheme(context)

Selalu Sediakan Fallback

Pada perangkat lama, warna dinamis tidak tersedia, jadi gunakan colorScheme buatan Anda sebagai fallback agar identitas merek tetap terjaga.

Menghubungkan Semuanya

Tema Anda memilih warna dinamis jika diizinkan, atau memilih mode gelap maupun terang berdasarkan pengaturan sistem, sehingga satu pilihan colorScheme menangani semua kasus.

val scheme = when {
  dynamicOk && dark -> dynamicDarkColorScheme(ctx)
  dark -> darkColorScheme()
  else -> lightColorScheme()
}

Uji Kedua Mode

Pratinjau layar Anda dalam mode terang dan gelap, serta dengan wallpaper berwarna-warni, agar dynamic color tidak mengejutkan Anda dengan kombinasi yang sulit dibaca. ✨

Pemeriksaan Singkat

Pengguna Android 13 memasang wallpaper ungu. Apa yang dapat dilakukan tema Anda?

Rangkuman: Warna Adaptif dan Personal

Anda mendeteksi mode sistem dengan isSystemInDarkTheme, mengganti palet, dan memadukan warna dinamis dengan fallback yang aman. 🎉

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mode Gelap & Warna Dinamis” gratis?

Ya — teks lengkap “Mode Gelap & Warna Dinamis” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mode Gelap & Warna Dinamis”?

Sesuaikan warna dengan sistem dan wallpaper. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Mode Gelap & Warna Dinamis” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. MaterialTheme & Skema Warna
  2. Tipografi & Token Bentuk
  3. Mode Gelap & Warna Dinamis
  4. Membangun Sistem Design Kustom
← Kembali ke Jetpack Compose Academy