โหมดมืด — คืออะไร, ธีมอินเทอร์เฟซมืดในแอปพลิเคชันมือถือ

โหมดมืดคืออะไรและจำเป็นอย่างไร?

โหมดมืด คือโทนสีที่พื้นหลังของหน้าจอมืด (ปกติ #121212 ใน Android, #1C1C1E ใน iOS) ในขณะที่ข้อความและองค์ประกอบอินเทอร์เฟซสว่าง ต่างจากการกลับสีแบบง่ายๆ โหมดมืดที่มีคุณภาพใช้จานสีที่คัดสรรมาอย่างพิถีพิถัน: พื้นหลังเทาเข้มแทนสีดำบริสุทธิ์ (ลดเอฟเฟกต์รัศมี), ความอิ่มสีของสีเน้นที่ลดลง และเงาที่นุ่มนวล การรองรับโหมดมืดระดับระบบปรากฏใน iOS 13 (กันยายน 2019) และ Android 10 (กันยายน 2019).

เหตุผลหลักในการนำมาใช้ คือความสะดวกสบายของผู้ใช้ ในที่แสงน้อย (ตอนเย็น ในที่มืด) หน้าจอสีขาวสว่างทำให้ปวดตาและอาจกระตุ้นให้เกิดอาการปวดศีรษะ โหมดมืดช่วยลดความสว่างหน้าจอโดยไม่เสียความสามารถในการอ่าน สำหรับผู้ใช้ที่มีอาการกลัวแสงหรือไวต่อแสง ธีมมืดไม่ใช่ตัวเลือก แต่เป็นวิธีเดียวที่จะใช้แอปพลิเคชันได้อย่างสบาย ตามข้อมูลของ Android Developers ผู้ใช้ Android มากกว่า 30% เปิดธีมมืดไว้ตลอดเวลา.

โหมดมืดประหยัดแบตเตอรี่ บนหน้าจอ OLED ต่างจาก LCD ที่แบ็คไลท์เปิดอยู่ตลอดเวลา พิกเซล OLED จะส่องสว่างด้วยตัวเอง สีมืดหมายความว่าพิกเซลปิดอยู่ — การใช้พลังงานลดลง ตามข้อมูลของ Google (Android Developers Blog, 2019) บน Pixel ที่มีหน้าจอ OLED โหมดมืดที่ความสว่าง 100% ช่วยลดการใช้พลังงานลง 60% เมื่อเทียบกับธีมสว่าง บนหน้าจอ LCD การประหยัดจะน้อยมาก (ประมาณ 3–5%) เนื่องจากแบ็คไลท์ของเมทริกซ์ทำงานแยกจากสีของพิกเซล.

ประวัติของโหมดมืดในระบบปฏิบัติการมือถือ

การรองรับระบบ สำหรับโหมดมืดผ่านหลายขั้นตอน iOS 13 (2019) นำเสนอธีมมืดทั่วโลกผ่าน UIUserInterfaceStyle Android 10 (2019) เพิ่ม Force Dark Mode สำหรับแอปพลิเคชันที่ไม่มีธีมมืดของตัวเอง Android 12 (2021) กับ Material You เริ่มสร้างจานสีมืดจากวอลเปเปอร์โดยอัตโนมัติ iOS 15 (2021) ขยาย API สำหรับ Safari และเนื้อหาเว็บ ตามข้อมูลของ StatCounter (2026) 82% ของ 100 แอปพลิเคชันยอดนิยมใน App Store และ Google Play รองรับโหมดมืด.

โหมดมืดใน iOS: Swift API และการสนับสนุน UIKit

iOS โหมดมืด API ขึ้นอยู่กับโปรโตคอล UITraitEnvironment ทุก UIViewController และ UIView มีคุณสมบัติ traitCollection.userInterfaceStyle ซึ่งสามารถเป็น .unspecified, .light หรือ .dark เมื่อธีมระบบเปลี่ยน iOS จะเรียกเมธอด traitCollectionDidChange(_:) นักพัฒนาต้องอัปเดตสีในเมธอดนี้ หรือใช้สีไดนามิก (UIColor(dynamicProvider:)) ที่สลับระหว่างจานสีสว่างและมืดโดยอัตโนมัติ.

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

// บังคับเปิดโหมดมืด
window.overrideUserInterfaceStyle = .dark

สีไดนามิก — วิธีที่ดีที่สุดในการใช้โหมดมืดใน iOS UIColor(named:) โหลดค่าที่แตกต่างจาก Asset Catalog โดยอัตโนมัติสำหรับลักษณะ .light และ .dark เพียงกำหนดสีใน Assets.xcassets ด้วยสองรูปแบบ (Any Appearance + Dark Appearance) แล้ว UIKit จะเลือกสีที่ถูกต้องโดยอัตโนมัติ สีระบบไดนามิก (UIColor.systemBackground, .label, .secondaryLabel) รองรับโหมดมืดอยู่แล้วและเปลี่ยนโดยอัตโนมัติ.

SwiftUI และโหมดมืด

SwiftUI รองรับโหมดมืดตั้งแต่แกน สีและตัวปรับแต่งมาตรฐานทั้งหมด (Color.primary, .background, Color(UIColor.systemBackground)) ปรับตัวโดยอัตโนมัติ สำหรับสีที่กำหนดเอง ให้ใช้ Color(uiColor:) กับ UIColor แบบไดนามิก หรือตัวแปรสภาพแวดล้อม @Environment(\.colorScheme) สำหรับการตรวจสอบธีมอย่างชัดเจน SwiftUI View จะวาดใหม่โดยอัตโนมัติเมื่อธีมเปลี่ยน โดยไม่ต้องเรียก traitCollectionDidChange.

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

    var body: some View {
        Text("โหมดมืด")
            .foregroundColor(colorScheme == .dark ? .white : .black)
            .background(colorScheme == .dark ? Color(.systemGray6) : .white)
    }
}

โหมดมืดใน Android: Kotlin API และ AppCompat

Android โหมดมืด ถูกใช้งานผ่านไลบรารี AppCompat และธีม Theme.AppCompat.DayNight ในระหว่างวันใช้ธีมสว่าง ในเวลากลางคืน — ธีมมืด การเปิดใช้งานแบบบังคับถูกตั้งค่าผ่าน AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (มืด), MODE_NIGHT_NO (สว่าง), MODE_NIGHT_FOLLOW_SYSTEM (ระบบ) ทรัพยากรถูกแบ่งเป็นสว่าง (res/values/styles.xml) และมืด (res/values-night/styles.xml).

// บังคับเปิดธีมมืด
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // ตั้งค่าก่อน super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // กำหนดธีมปัจจุบัน
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// ลงทะเบียนโหมดกลางคืนใน AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode เป็นคุณสมบัติระบบใน Android 10+ ที่กลับสีของแอปพลิเคชันที่ไม่รองรับธีมมืดโดยอัตโนมัติ เปิดใช้งานผ่านตัวเลือกนักพัฒนาหรือผ่านแอตทริบิวต์ android:forceDarkAllowed="true" ในธีม นี่เป็นวิธีแก้ปัญหาชั่วคราว: สำหรับการผลิต คุณต้องใช้จานสีมืดของคุณเองผ่าน values-night มิฉะนั้นคุณภาพของภาพจะต่ำ (ไอคอนกลับสี, สีที่อ่านยาก).

Material You Dynamic Themes

Material You (Android 12+) สร้างสีหลัก 5 สีจากวอลเปเปอร์ของอุปกรณ์โดยอัตโนมัติ: primary, secondary, tertiary, neutral, neutralVariant สำหรับแต่ละสีจะสร้างจานสีสว่างและมืด นักพัฒนาใช้แอตทริบิวต์: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface ระบบจะเลือกรูปแบบสำหรับธีมปัจจุบันด้วยตัวเอง Dynamic Color รองรับบน Android 12+ กับ Material Design 3 (คอมโพเนนต์ com.google.android.material:material).

// values/themes.xml — ธีมสว่าง
<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 — ธีมมืด
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

การออกแบบธีมมืด: กฎคอนทราสต์และสี

การออกแบบโหมดมืด ไม่ใช่แค่การกลับสี Google Material Design แนะนำให้ใช้เทาเข้ม (#121212) แทนสีดำบริสุทธิ์ สีดำบริสุทธิ์ (#000000) สร้างคอนทราสต์สูงเกินไปกับข้อความสีขาว ทำให้เกิดเอฟเฟกต์รัศมี (แสงรอบตัวอักษร) ระดับความสูงขององค์ประกอบแสดงผ่านสี: ยิ่งองค์ประกอบสูงเท่าไร พื้นหลังก็ยิ่งสว่างมากขึ้นเท่านั้น การ์ดบนพื้นหลัง — #1E1E1E, ไดอะล็อก — #2D2D2D, แผงนำทาง — #383838.

คอนทราสต์สี ในโหมดมืดควรต่ำกว่าโหมดสว่าง Material Design แนะนำ: ข้อความหลัก — สีขาว (#FFFFFF) ที่ความทึบ 87%, รอง — 60%, ปิดใช้งาน — 38% สีเน้นควรมีความอิ่มสีน้อยกว่า: ถ้าในธีมสว่าง primary = #6200EE ดังนั้นในธีมมืด — #BB86FC (สีม่วงอ่อนและนุ่ม) ตาม WCAG 2.1 ต้องรักษาคอนทราสต์ขั้นต่ำ 4.5:1 สำหรับข้อความปกติในทั้งสองธีม.

รูปภาพและไอคอน ต้องการการจัดการแยกต่างหากในธีมมืด ไอคอนที่มีความโปร่งใสควรถูกเปลี่ยนสีเป็นสีสว่าง รูปภาพที่มีพื้นหลังสว่างอาจทำให้แสบตา — แนะนำให้ลดความสว่างลง 20-30% หรือเพิ่มโอเวอร์เลย์โปร่งแสง สำหรับโลโก้และองค์ประกอบแบรนด์ ให้ใช้รุ่นสำหรับพื้นหลังมืด iOS Asset Catalog และ Android VectorDrawable รองรับทรัพยากรแยกต่างหากสำหรับธีมสว่างและมืด.

โหมดมืดกับโหมดสว่าง: ข้อดีและข้อเสีย

การเลือกระหว่างธีม ขึ้นอยู่กับสภาพการใช้งาน ประเภทเนื้อหา และความชอบของผู้ใช้ การศึกษาของ Nielsen Norman Group (2020) แสดงให้เห็นว่า: ภายใต้แสงปกติ โหมดสว่างให้ความเร็วในการอ่านสูงกว่า 15-20% อย่างไรก็ตาม ในสภาพแสงน้อย โหมดมืดช่วยลดความเมื่อยล้าของดวงตาและปรับปรุงความสามารถในการอ่าน สำหรับอินเทอร์เฟซที่มีข้อความปริมาณมาก (บทความ, เอกสาร) โหมดสว่างมักจะดีกว่า.

การใช้พลังงาน เป็นข้อโต้แย้งหลักสำหรับโหมดมืดบน OLED ตามข้อมูลของ Google (2019) YouTube ในธีมมืดบนหน้าจอ OLED ใช้พลังงานน้อยกว่าในธีมสว่าง 43% Google Maps — 32% ยิ่งอินเทอร์เฟซสว่างมากขึ้นและระดับความสว่างหน้าจอสูงขึ้นเท่าไร การประหยัดก็ยิ่งมากขึ้นเท่านั้น บนหน้าจอ LCD การประหยัดไม่เกิน 5% สำหรับผู้ใช้ที่ทำงานกับแอปพลิเคชันกลางแจ้งภายใต้แสงแดดจ้า โหมดสว่างยังคงเป็นตัวเลือกเดียวที่อ่านได้.

คำแนะนำจาก IT Sectr — เรานำเสนอทั้งสองธีมพร้อมตัวเลือกการสลับ: ระบบ (ตามระบบ), มืด, สว่าง การสลับอัตโนมัติไม่ควรเป็นตัวเลือกเดียว — ผู้ใช้อาจต้องการธีมมืดในตอนกลางวัน (สำหรับไมเกรน) หรือธีมสว่างในตอนกลางคืน (สำหรับอ่านหนังสือ) ในโปรเจกต์ของเรา เราเพิ่มสวิตช์ธีมในการตั้งค่าโปรไฟล์และจดจำตัวเลือก สำหรับแอปพลิเคชันที่มีเนื้อหาพรีเมียม (รูปภาพ, วิดีโอ) แนะนำให้ดูตัวอย่างธีมก่อนนำไปใช้.