Dark Mode — ano ito, dark na tema ng interface sa mga mobile app

Ano ang Dark Mode at bakit ito kailangan?

Dark Mode — ay isang scheme ng kulay ng interface kung saan ang background ng screen ay madilim (karaniwang #121212 sa Android, #1C1C1E sa iOS), at ang teksto at mga elemento ng interface ay maliwanag. Hindi tulad ng simpleng inversion ng kulay, ang de-kalidad na Dark Mode ay gumagamit ng espesyal na napiling palette: dark gray na background sa halip na purong itim (binabawasan ang halo effect), mababang saturation ng accent na kulay at malambot na anino. Lumitaw ang system support para sa Dark Mode sa iOS 13 (Setyembre 2019) at Android 10 (Setyembre 2019).

Pangunahing dahilan ng pagpapatupad — kaginhawaan ng user. Sa mahinang ilaw (gabi, sa dilim), ang maliwanag na puting screen ay nagdudulot ng pagod ng mata at maaaring mag-trigger ng sakit ng ulo. Binabawasan ng Dark Mode ang liwanag ng screen nang hindi nawawala ang pagiging nababasa. Para sa mga user na may photophobia o light sensitivity, ang dark na tema ay hindi isang opsyon, kundi ang tanging paraan upang magamit nang kumportable ang app. Ayon sa Android Developers, mahigit 30% ng mga user ng Android ang permanenteng nag-a-activate ng dark na tema.

Nakakatipid ng baterya ang Dark Mode sa mga OLED screen. Hindi tulad ng LCD, kung saan laging naka-on ang backlight, ang mga OLED pixel ay kumikinang nang mag-isa. Ang madilim na kulay ay nangangahulugang naka-off ang pixel — bumababa ang konsumo ng kuryente. Ayon sa Google (Android Developers Blog, 2019), sa Pixel na may OLED screen, binabawasan ng Dark Mode sa 100% brightness ang konsumo ng kuryente ng 60% kumpara sa light na tema. Sa mga LCD screen, minimal ang tipid (mga 3–5%), dahil ang backlight ng matrix ay gumagana nang hiwalay sa kulay ng pixel.

Kasaysayan ng Dark Mode sa mga mobile operating system

System support ng Dark Mode ay dumaan sa ilang yugto. Ipinakilala ng iOS 13 (2019) ang global na dark na tema sa pamamagitan ng UIUserInterfaceStyle. Nagdagdag ang Android 10 (2019) ng Force Dark Mode para sa mga app na walang sariling dark na tema. Ang Android 12 (2021) kasama ang Material You ay nagsimulang awtomatikong gumawa ng dark palette mula sa wallpaper. Pinalawak ng iOS 15 (2021) ang API para sa Safari at web content. Ayon sa StatCounter (2026), 82% ng top-100 apps sa App Store at Google Play ay sumusuporta sa Dark Mode.

Dark Mode sa iOS: Swift API at suporta ng UIKit

iOS Dark Mode API ay batay sa UITraitEnvironment protocol. Ang bawat UIViewController at UIView ay may property na traitCollection.userInterfaceStyle, na maaaring .unspecified, .light o .dark. Kapag nagbago ang system theme, tinatawag ng iOS ang traitCollectionDidChange(_:) method. Dapat i-update ng developer ang mga kulay sa method na ito o gumamit ng dynamic na kulay (UIColor(dynamicProvider:)) na awtomatikong lumilipat sa pagitan ng light at dark palette.

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

// Sapilitang pag-activate ng Dark Mode
window.overrideUserInterfaceStyle = .dark

Dynamic na kulay — ang pinakamahusay na paraan upang ipatupad ang Dark Mode sa iOS. Awtomatikong naglo-load ang UIColor(named:) ng iba't ibang halaga mula sa Asset Catalog para sa .light at .dark na anyo. Sapat na itakda ang kulay sa Assets.xcassets na may dalawang variant (Any Appearance + Dark Appearance), at ang UIKit mismo ang pipili ng angkop. Ang dynamic system colors (UIColor.systemBackground, .label, .secondaryLabel) ay sumusuporta na sa Dark Mode at awtomatikong nagbabago.

SwiftUI at Dark Mode

SwiftUI ay sumusuporta sa Dark Mode mula sa labas ng kahon. Lahat ng standard na kulay at modifier (Color.primary, .background, Color(UIColor.systemBackground)) ay awtomatikong umaangkop. Para sa custom na kulay, gamitin ang Color(uiColor:) na may dynamic na UIColor o ang environment variable na @Environment(\.colorScheme) para sa explicit na pagsusuri ng tema. Ang SwiftUI View ay awtomatikong nagre-redraw kapag nagbago ang tema, nang hindi kinakailangang tawagin ang 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 sa Android: Kotlin API at AppCompat

Android Dark Mode ay ipinapatupad sa pamamagitan ng AppCompat library at Theme.AppCompat.DayNight theme. Sa araw, ginagamit ang light na tema, sa gabi — dark na tema. Ang sapilitang pag-activate ay itinatakda sa pamamagitan ng AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (dark), MODE_NIGHT_NO (light), MODE_NIGHT_FOLLOW_SYSTEM (system). Ang mga resource ay nahahati sa light (res/values/styles.xml) at dark (res/values-night/styles.xml).

// Sapilitang pag-activate ng dark na tema
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Pag-set bago ang super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Pagtukoy ng kasalukuyang tema
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Pagrehistro ng night mode sa AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode — system function ng Android 10+ na awtomatikong binabaligtad ang mga kulay ng app na hindi sumusuporta sa dark na tema. Ina-activate sa pamamagitan ng Developer Options o sa pamamagitan ng attribute na android:forceDarkAllowed="true" sa tema. Ito ay pansamantalang solusyon: para sa produksyon, kailangan mong ipatupad ang sarili mong dark palette sa pamamagitan ng values-night, kung hindi, ang visual na kalidad ay magiging mababa (baligtad na mga icon, mahirap basahin na kulay).

Material You Dynamic Themes

Material You (Android 12+) ay awtomatikong gumagawa ng 5 pangunahing kulay mula sa wallpaper ng device: primary, secondary, tertiary, neutral, neutralVariant. Para sa bawat kulay, ginagawa ang light at dark palette. Gumagamit ang developer ng mga attribute: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Ang system mismo ang pumipili ng variant para sa kasalukuyang tema. Ang Dynamic Color ay sinusuportahan sa Android 12+ na may Material Design 3 (component na com.google.android.material:material).

// values/themes.xml — light na tema
<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 — dark na tema
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Disenyo ng dark na tema: mga panuntunan ng contrast at kulay

Disenyo ng Dark Mode — hindi lang inversion ng kulay. Inirerekomenda ng Google Material Design ang paggamit ng dark gray (#121212) sa halip ng purong itim. Ang purong itim (#000000) ay lumilikha ng masyadong mataas na contrast sa puting teksto, na nagdudulot ng halo effect (liwanag sa paligid ng mga titik). Ang antas ng elevation ng mga elemento ay tinutukoy sa pamamagitan ng kulay: mas mataas ang elemento, mas maliwanag ang background nito. Card sa background — #1E1E1E, dialog — #2D2D2D, navigation panel — #383838.

Kulay contrast sa Dark Mode ay dapat na mas mababa kaysa sa Light Mode. Inirerekomenda ng Material Design: primary text — puti (#FFFFFF) na may opacity na 87%, secondary — 60%, disabled — 38%. Ang accent na kulay ay dapat na hindi gaanong saturated: kung sa light theme primary = #6200EE, sa dark theme — #BB86FC (maliwanag, mahinang purple). Ayon sa WCAG 2.1, ang minimum contrast na 4.5:1 para sa ordinaryong teksto ay dapat mapanatili sa parehong tema.

Mga larawan at icon ay nangangailangan ng hiwalay na pagproseso sa dark na tema. Ang mga icon na may transparency ay dapat na repaint sa maliwanag na kulay. Ang mga larawang may maliwanag na background ay maaaring mukhang nakakasilaw — inirerekomenda na bawasan ang liwanag ng 20–30% o magdagdag ng semi-transparent na overlay. Para sa mga logo at brand elements, gamitin ang bersyon para sa dark na background. Ang iOS Asset Catalog at Android VectorDrawable ay sumusuporta sa hiwalay na resource para sa light at dark na tema.

Paghahambing ng Dark Mode at Light Mode: mga kalamangan at kahinaan

Pagpili sa pagitan ng mga tema ay depende sa mga kondisyon ng paggamit, uri ng content at kagustuhan ng user. Ipinakita ng pananaliksik ng Nielsen Norman Group (2020): sa normal na ilaw, ang Light Mode ay nagbibigay ng 15–20% mas mataas na bilis ng pagbasa. Gayunpaman, sa kondisyon ng mahinang ilaw, binabawasan ng Dark Mode ang pagod ng mata at pinapabuti ang pagiging nababasa. Para sa mga interface na may malaking volume ng teksto (artikulo, dokumento), ang Light Mode ay karaniwang mas gusto.

Konsumo ng kuryente — pangunahing argumento para sa Dark Mode sa OLED. Ayon sa Google (2019), ang YouTube sa dark na tema sa OLED screen ay kumokonsumo ng 43% mas kaunting enerhiya kaysa sa light na tema. Google Maps — 32%. Kung gaano kaliwanag ang interface at kung gaano kataas ang brightness ng screen, mas makabuluhan ang tipid. Sa mga LCD screen, ang tipid ay hindi lalampas sa 5%. Para sa mga user na madalas nagtatrabaho sa app sa labas sa maliwanag na araw, ang Light Mode ay nananatiling tanging nababasang opsyon.

Rekomendasyon ng IT Sectr — ipinapatupad namin ang parehong tema na may kakayahang lumipat: system (follow system), dark, light. Ang awtomatikong paglipat ay hindi dapat ang tanging opsyon — maaaring gusto ng user ang dark na tema sa araw (sa migraine) o light na tema sa gabi (habang nagbabasa). Sa aming mga proyekto, nagdaragdag kami ng switch ng tema sa mga setting ng profile at naaalala ang pinili. Para sa mga app na may premium content (foto, video), inirerekomenda ang preview ng tema bago ilapat.