Dark Mode — apa itu, tema gelap antarmuka di aplikasi seluler

Apa itu Dark Mode dan mengapa diperlukan?

Dark Mode — adalah skema warna antarmuka di mana latar belakang layar gelap (biasanya #121212 di Android, #1C1C1E di iOS), dan teks serta elemen antarmuka terang. Berbeda dengan inversi warna sederhana, Dark Mode berkualitas menggunakan palet yang dipilih secara khusus: latar belakang abu-abu tua alih-alih hitam pekat (mengurangi efek halo), saturasi rendah pada warna aksen, dan bayangan lembut. Dukungan sistem untuk Dark Mode muncul di iOS 13 (September 2019) dan Android 10 (September 2019).

Alasan utama penerapan — kenyamanan pengguna. Dalam pencahayaan rendah (sore hari, dalam gelap), layar putih terang menyebabkan ketegangan mata dan dapat memicu sakit kepala. Dark Mode mengurangi kecerahan layar tanpa kehilangan keterbacaan. Bagi pengguna dengan fotofobia atau sensitivitas cahaya, tema gelap bukanlah opsi, melainkan satu-satunya kemungkinan untuk menggunakan aplikasi dengan nyaman. Menurut Android Developers, lebih dari 30% pengguna Android mengaktifkan tema gelap secara permanen.

Dark Mode menghemat baterai pada layar OLED. Berbeda dengan LCD, di mana lampu latar selalu menyala, piksel OLED menyala secara mandiri. Warna gelap berarti piksel dimatikan — konsumsi daya menurun. Menurut Google (Android Developers Blog, 2019), pada Pixel dengan layar OLED, Dark Mode pada kecerahan 100% mengurangi konsumsi daya sebesar 60% dibandingkan dengan tema terang. Pada layar LCD, penghematan minimal (sekitar 3–5%), karena lampu latar matriks bekerja independen dari warna piksel.

Sejarah Dark Mode di sistem operasi seluler

Dukungan sistem Dark Mode melewati beberapa tahap. iOS 13 (2019) memperkenalkan tema gelap global melalui UIUserInterfaceStyle. Android 10 (2019) menambahkan Force Dark Mode untuk aplikasi tanpa tema gelap sendiri. Android 12 (2021) dengan Material You mulai secara otomatis menghasilkan palet gelap dari wallpaper. iOS 15 (2021) memperluas API untuk Safari dan konten web. Menurut StatCounter (2026), 82% dari 100 aplikasi teratas di App Store dan Google Play mendukung Dark Mode.

Dark Mode di iOS: API Swift dan dukungan UIKit

API Dark Mode iOS didasarkan pada protokol UITraitEnvironment. Setiap UIViewController dan UIView memiliki properti traitCollection.userInterfaceStyle, yang bisa berupa .unspecified, .light, atau .dark. Saat tema sistem berubah, iOS memanggil metode traitCollectionDidChange(_:). Pengembang harus memperbarui warna dalam metode ini atau menggunakan warna dinamis (UIColor(dynamicProvider:)) yang secara otomatis beralih antara palet terang dan gelap.

class ViewController: UIViewController {

    @IBOutlet var titleLabel: UILabel!

    override func traitCollectionDidChange(_: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
            updateColors()
        }
    }

    func updateColors() {
        let isDark = traitCollection.userInterfaceStyle == .dark
        view.backgroundColor = isDark ? UIColor(named: "darkBackground") : .systemBackground
        titleLabel.textColor = isDark ? .white : .darkText
    }
}

// Aktivasi paksa Dark Mode
window.overrideUserInterfaceStyle = .dark

Warna dinamis — cara terbaik untuk mengimplementasikan Dark Mode di iOS. UIColor(named:) secara otomatis memuat nilai yang berbeda dari Asset Catalog untuk tampilan .light dan .dark. Cukup atur warna di Assets.xcassets dengan dua varian (Any Appearance + Dark Appearance), dan UIKit akan memilih sendiri yang sesuai. Warna sistem dinamis (UIColor.systemBackground, .label, .secondaryLabel) sudah mendukung Dark Mode dan berubah secara otomatis.

SwiftUI dan Dark Mode

SwiftUI mendukung Dark Mode secara bawaan. Semua warna dan pengubah standar (Color.primary, .background, Color(UIColor.systemBackground)) beradaptasi secara otomatis. Untuk warna khusus, gunakan Color(uiColor:) dengan UIColor dinamis atau variabel lingkungan @Environment(\.colorScheme) untuk pemeriksaan tema secara eksplisit. View SwiftUI secara otomatis digambar ulang saat tema berubah, tanpa perlu memanggil traitCollectionDidChange.

struct ThemeView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text("Dark Mode")
            .foregroundColor(colorScheme == .dark ? .white : .black)
            .background(colorScheme == .dark ? Color(.systemGray6) : .white)
    }
}

Dark Mode di Android: API Kotlin dan AppCompat

Dark Mode Android diimplementasikan melalui pustaka AppCompat dan tema Theme.AppCompat.DayNight. Siang hari menggunakan tema terang, malam hari — tema gelap. Aktivasi paksa diatur melalui AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (gelap), MODE_NIGHT_NO (terang), MODE_NIGHT_FOLLOW_SYSTEM (sistem). Sumber daya dibagi menjadi terang (res/values/styles.xml) dan gelap (res/values-night/styles.xml).

// Aktivasi paksa tema gelap
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Pengaturan sebelum super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Menentukan tema saat ini
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Pendaftaran mode malam di AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode — fitur sistem Android 10+ yang secara otomatis membalikkan warna aplikasi yang tidak mendukung tema gelap. Diaktifkan melalui Pengaturan Pengembang atau melalui atribut android:forceDarkAllowed="true" dalam tema. Ini adalah solusi sementara: untuk produksi, Anda perlu mengimplementasikan palet gelap sendiri melalui values-night, jika tidak, kualitas visual akan rendah (ikon terbalik, warna sulit dibaca).

Material You Dynamic Themes

Material You (Android 12+) secara otomatis menghasilkan 5 warna kunci dari wallpaper perangkat: primary, secondary, tertiary, neutral, neutralVariant. Untuk setiap warna, dibuat palet terang dan gelap. Pengembang menggunakan atribut: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Sistem memilih sendiri varian untuk tema saat ini. Dynamic Color didukung pada Android 12+ dengan Material Design 3 (komponen com.google.android.material:material).

// values/themes.xml — tema terang
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_light</item>
    <item name="colorOnPrimary">@color/on_primary_light</item>
</style>

// values-night/themes.xml — tema gelap
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Desain tema gelap: aturan kontras dan warna

Desain Dark Mode — bukan sekadar inversi warna. Google Material Design merekomendasikan penggunaan abu-abu tua (#121212) alih-alih hitam pekat. Hitam pekat (#000000) menciptakan kontras yang terlalu tinggi dengan teks putih, menyebabkan efek halo (lingkaran cahaya di sekitar huruf). Tingkat elevasi elemen ditentukan melalui warna: semakin tinggi elemen, semakin terang latar belakangnya. Kartu di atas latar belakang — #1E1E1E, dialog — #2D2D2D, panel navigasi — #383838.

Kontras warna di Dark Mode harus lebih rendah daripada di Light Mode. Material Design merekomendasikan: teks primary — putih (#FFFFFF) dengan opacity 87%, secondary — 60%, disabled — 38%. Warna aksen harus kurang jenuh: jika dalam tema terang primary = #6200EE, maka dalam tema gelap — #BB86FC (ungu terang, redup). Menurut WCAG 2.1, kontras minimum 4.5:1 untuk teks biasa harus dipertahankan di kedua tema.

Gambar dan ikon memerlukan pemrosesan terpisah dalam tema gelap. Ikon dengan transparansi harus diubah warnanya menjadi terang. Foto dengan latar belakang cerah dapat terlihat menyilaukan — disarankan untuk mengurangi kecerahan sebesar 20–30% atau menambahkan overlay semi-transparan. Untuk logo dan elemen merek, gunakan versi untuk latar belakang gelap. iOS Asset Catalog dan Android VectorDrawable mendukung sumber daya terpisah untuk tema terang dan gelap.

Perbandingan Dark Mode dan Light Mode: kelebihan dan kekurangan

Pilihan antara tema tergantung pada kondisi penggunaan, jenis konten, dan preferensi pengguna. Penelitian Nielsen Norman Group (2020) menunjukkan: dalam pencahayaan normal, Light Mode memberikan kecepatan membaca 15–20% lebih tinggi. Namun, dalam kondisi pencahayaan rendah, Dark Mode mengurangi kelelahan mata dan meningkatkan keterbacaan. Untuk antarmuka dengan volume teks besar (artikel, dokumen), Light Mode biasanya lebih disukai.

Konsumsi daya — argumen utama untuk Dark Mode pada OLED. Menurut Google (2019), YouTube dalam tema gelap pada layar OLED mengonsumsi energi 43% lebih sedikit daripada dalam tema terang. Google Maps — 32%. Semakin terang antarmuka dan semakin tinggi tingkat kecerahan layar, semakin signifikan penghematannya. Pada layar LCD, penghematan tidak melebihi 5%. Bagi pengguna yang banyak bekerja dengan aplikasi di luar ruangan di bawah sinar matahari terang, Light Mode tetap menjadi satu-satunya opsi yang dapat dibaca.

Rekomendasi IT Sectr — kami mengimplementasikan kedua tema dengan kemampuan beralih: sistem (follow system), gelap, terang. Peralihan otomatis tidak boleh menjadi satu-satunya opsi — pengguna mungkin menginginkan tema gelap di siang hari (saat migrain) atau tema terang di malam hari (saat membaca). Dalam proyek kami, kami menambahkan sakelar tema di pengaturan profil dan menyimpan pilihan. Untuk aplikasi dengan konten premium (foto, video), disarankan untuk menampilkan pratinjau tema sebelum diterapkan.