SwiftUI Academy · Pelajaran

Beradaptasi dengan Mode Terang & Gelap

Gunakan warna semantik untuk kedua tampilan.

Pelajaran 4 dari 413 langkah

Beradaptasi dengan Mode Terang & Gelap adalah pelajaran SwiftUI Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 SwiftUI Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Dua Tampilan

iOS menyediakan tampilan Terang dan Gelap, dan pengguna dapat berganti kapan saja. App yang dibuat dengan baik akan terlihat menarik pada keduanya tanpa usaha tambahan.

Gunakan Warna Semantik

Gunakan warna semantik seperti Color.primary atau Color(.systemBackground). Warna tersebut otomatis berubah di antara kedua tampilan.

Text("Title")
    .foregroundStyle(.primary)
    .background(Color(.systemBackground))

Hindari Warna yang Ditetapkan Secara Tetap

Latar belakang Color.black yang tetap hitam akan tetap hitam dalam Mode Gelap dan dapat menyatu dengannya. Warna semantik beradaptasi, sedangkan warna mentah tidak.

Text("Hi")
    .background(.black)

Warna dalam Katalog Aset

Tentukan warna di katalog aset dengan nilai Any dan Dark yang terpisah. Referensikan warna tersebut berdasarkan namanya dan warnanya akan berubah untuk Anda.

Color("Brand")

Primer dan Sekunder

Gunakan .secondary untuk teks yang kurang penting. Teks akan diredupkan dengan tepat di setiap mode, tetapi tetap mudah dibaca.

Text("Subtitle")
    .foregroundStyle(.secondary)

Material untuk Kedalaman

Material sistem seperti .ultraThinMaterial memburamkan latar belakang dan beradaptasi dengan mode, sehingga kartu terasa seperti bagian asli sistem.

VStack { }
    .background(.ultraThinMaterial)

Mendeteksi Mode

Baca tampilan saat ini dengan @Environment(\.colorScheme) ketika Anda benar-benar memerlukan konten yang berbeda untuk setiap mode.

@Environment(\.colorScheme) var scheme

Beralih Berdasarkan Skema

Dengan colorScheme yang tersedia, Anda dapat memilih aset, misalnya mengganti logo, hanya ketika warna semantik tidak dapat memenuhi kebutuhan.

Image(scheme == .dark ? "logoDark" : "logoLight")

Mempratinjau Kedua Mode

Tambahkan .preferredColorScheme(.dark) ke pratinjau untuk memeriksa Mode Gelap tanpa meninggalkan Xcode.

#Preview {
    ContentView()
        .preferredColorScheme(.dark)
}

Memaksa Mode

Anda dapat mengunci suatu layar dengan preferredColorScheme, tetapi sebisa mungkin tetap hormati pilihan sistem pengguna.

ContentView()
    .preferredColorScheme(.dark)

Memeriksa Kontras

Pastikan teks tetap mudah dibaca dalam kedua mode. Kontras yang baik merupakan bagian dari aksesibilitas, bukan sekadar gaya.

Pemeriksaan Singkat

Pilihan warna mana yang otomatis beradaptasi antara Mode Terang dan Gelap?

Jawab di pelajaran interaktif

Rangkuman

App Anda kini terlihat tepat dalam tampilan apa pun: manfaatkan warna semantik, warna aset, dan material, lalu pratinjau kedua mode. 🌓

Gratis untuk memulai

Belajar Swift dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 30
Pelajaran: 120

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Beradaptasi dengan Mode Terang & Gelap” gratis?

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

Apa yang akan aku pelajari di “Beradaptasi dengan Mode Terang & Gelap”?

Gunakan warna semantik untuk kedua tampilan. Kamu berlatih SwiftUI 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 SwiftUI Academy?

Tidak diperlukan pengalaman sebelumnya. SwiftUI 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 4 dari 4.

Berapa lama pelajaran “Beradaptasi dengan Mode Terang & Gelap” 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 SwiftUI Academy ini?

Ya. Setiap pelajaran SwiftUI 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

← Kembali ke SwiftUI Academy