Chế độ tối — nó là gì, chủ đề giao diện tối trong ứng dụng di động

Chế độ tối là gì và tại sao cần nó?

Chế độ tối là bảng màu trong đó nền màn hình tối (thường là #121212 trong Android, #1C1C1E trong iOS), còn văn bản và các thành phần giao diện sáng. Không giống như đảo ngược màu sắc đơn giản, Chế độ tối chất lượng cao sử dụng bảng màu được chọn lọc kỹ lưỡng: nền xám đậm thay vì đen thuần (giảm hiệu ứng quầng sáng), độ bão hòa giảm của các màu nhấn và bóng mềm. Hỗ trợ Chế độ tối cấp hệ thống xuất hiện trong iOS 13 (tháng 9 năm 2019) và Android 10 (tháng 9 năm 2019).

Lý do chính cho việc áp dụng là sự thoải mái của người dùng. Trong điều kiện ánh sáng yếu (buổi tối, trong bóng tối), màn hình trắng sáng gây mỏi mắt và có thể gây đau đầu. Chế độ tối giảm độ sáng màn hình mà không hy sinh khả năng đọc. Đối với người dùng bị sợ ánh sáng hoặc nhạy cảm với ánh sáng, chủ đề tối không phải là một tùy chọn mà là cách duy nhất để sử dụng ứng dụng một cách thoải mái. Theo Android Developers, hơn 30% người dùng Android luôn bật chủ đề tối.

Chế độ tối tiết kiệm pin trên màn hình OLED. Không giống như LCD, nơi đèn nền luôn bật, pixel OLED tự phát sáng. Màu tối có nghĩa là pixel tắt — mức tiêu thụ điện năng giảm. Theo Google (Android Developers Blog, 2019), trên Pixel có màn hình OLED, Chế độ tối ở độ sáng 100% giảm mức tiêu thụ điện năng 60% so với chủ đề sáng. Trên màn hình LCD, mức tiết kiệm là tối thiểu (khoảng 3–5%) vì đèn nền ma trận hoạt động độc lập với màu pixel.

Lịch sử Chế độ tối trong hệ điều hành di động

Hỗ trợ hệ thống cho Chế độ tối đã trải qua nhiều giai đoạn. iOS 13 (2019) giới thiệu chủ đề tối toàn cục thông qua UIUserInterfaceStyle. Android 10 (2019) thêm Force Dark Mode cho các ứng dụng không có chủ đề tối riêng. Android 12 (2021) với Material You bắt đầu tự động tạo bảng màu tối từ hình nền. iOS 15 (2021) mở rộng API cho Safari và nội dung web. Theo StatCounter (2026), 82% trong số 100 ứng dụng hàng đầu trên App Store và Google Play hỗ trợ Chế độ tối.

Chế độ tối trong iOS: Swift API và hỗ trợ UIKit

API Chế độ tối iOS dựa trên giao thức UITraitEnvironment. Mỗi UIViewController và UIView có thuộc tính traitCollection.userInterfaceStyle, có thể là .unspecified, .light hoặc .dark. Khi chủ đề hệ thống thay đổi, iOS gọi phương thức traitCollectionDidChange(_:). Nhà phát triển phải cập nhật màu sắc trong phương thức này hoặc sử dụng màu động (UIColor(dynamicProvider:)) tự động chuyển đổi giữa bảng màu sáng và tối.

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

// Buộc bật Chế độ tối
window.overrideUserInterfaceStyle = .dark

Màu động — cách tốt nhất để triển khai Chế độ tối trong iOS. UIColor(named:) tự động tải các giá trị khác nhau từ Asset Catalog cho giao diện .light và .dark. Chỉ cần định nghĩa một màu trong Assets.xcassets với hai biến thể (Any Appearance + Dark Appearance), và UIKit sẽ tự động chọn màu phù hợp. Các màu hệ thống động (UIColor.systemBackground, .label, .secondaryLabel) đã hỗ trợ Chế độ tối và thay đổi tự động.

SwiftUI và Chế độ tối

SwiftUI hỗ trợ Chế độ tối ngay từ đầu. Tất cả màu sắc và bổ ngữ tiêu chuẩn (Color.primary, .background, Color(UIColor.systemBackground)) tự động thích ứng. Đối với màu tùy chỉnh, hãy sử dụng Color(uiColor:) với UIColor động hoặc biến môi trường @Environment(\.colorScheme) để kiểm tra chủ đề rõ ràng. SwiftUI View tự động vẽ lại khi chủ đề thay đổi mà không cần gọi traitCollectionDidChange.

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

    var body: some View {
        Text("Chế độ tối")
            .foregroundColor(colorScheme == .dark ? .white : .black)
            .background(colorScheme == .dark ? Color(.systemGray6) : .white)
    }
}

Chế độ tối trong Android: Kotlin API và AppCompat

Chế độ tối Android được triển khai thông qua thư viện AppCompat và chủ đề Theme.AppCompat.DayNight. Ban ngày sử dụng chủ đề sáng, ban đêm — chủ đề tối. Việc buộc bật được thiết lập thông qua AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (tối), MODE_NIGHT_NO (sáng), MODE_NIGHT_FOLLOW_SYSTEM (hệ thống). Tài nguyên được chia thành sáng (res/values/styles.xml) và tối (res/values-night/styles.xml).

// Buộc bật chủ đề tối
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Đặt trước super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Xác định chủ đề hiện tại
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Đăng ký chế độ ban đêm trong AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode là tính năng hệ thống trong Android 10+ tự động đảo ngược màu sắc của các ứng dụng không hỗ trợ chủ đề tối. Nó được bật thông qua Tùy chọn nhà phát triển hoặc thông qua thuộc tính android:forceDarkAllowed="true" trong chủ đề. Đây là giải pháp tạm thời: cho sản xuất, bạn cần triển khai bảng màu tối riêng thông qua values-night, nếu không chất lượng hình ảnh sẽ kém (biểu tượng bị đảo ngược, màu sắc khó đọc).

Material You Dynamic Themes

Material You (Android 12+) tự động tạo 5 màu chính từ hình nền thiết bị: primary, secondary, tertiary, neutral, neutralVariant. Cho mỗi màu, các bảng màu sáng và tối được tạo ra. Nhà phát triển sử dụng các thuộc tính: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Hệ thống tự chọn biến thể cho chủ đề hiện tại. Dynamic Color được hỗ trợ trên Android 12+ với Material Design 3 (thành phần com.google.android.material:material).

// values/themes.xml — chủ đề sáng
<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 — chủ đề tối
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Thiết kế chủ đề tối: quy tắc tương phản và màu sắc

Thiết kế Chế độ tối không chỉ đơn giản là đảo ngược màu sắc. Google Material Design khuyến nghị sử dụng xám đậm (#121212) thay vì đen thuần. Đen thuần (#000000) tạo độ tương phản quá cao với văn bản trắng, gây ra hiệu ứng quầng sáng (hào quang xung quanh chữ cái). Mức độ nâng cao của các thành phần được thể hiện qua màu sắc: thành phần càng cao, nền càng sáng. Thẻ trên nền — #1E1E1E, hộp thoại — #2D2D2D, bảng điều hướng — #383838.

Độ tương phản màu trong Chế độ tối phải thấp hơn trong Chế độ sáng. Material Design khuyến nghị: văn bản chính — trắng (#FFFFFF) với độ mờ 87%, phụ — 60%, bị vô hiệu hóa — 38%. Các màu nhấn phải ít bão hòa hơn: nếu trong chủ đề sáng primary = #6200EE, thì trong chủ đề tối — #BB86FC (tím nhạt, nhẹ nhàng). Theo WCAG 2.1, độ tương phản tối thiểu 4.5:1 cho văn bản thông thường phải được duy trì trong cả hai chủ đề.

Hình ảnh và biểu tượng yêu cầu xử lý riêng trong chủ đề tối. Biểu tượng có độ trong suốt phải được tô màu lại thành màu sáng. Ảnh có nền sáng có thể gây chói — nên giảm độ sáng từ 20–30% hoặc thêm lớp phủ bán trong suốt. Đối với logo và các thành phần thương hiệu, hãy sử dụng phiên bản cho nền tối. Asset Catalog iOS và VectorDrawable Android hỗ trợ tài nguyên riêng biệt cho chủ đề sáng và tối.

Chế độ tối so với Chế độ sáng: ưu và nhược điểm

Lựa chọn giữa các chủ đề phụ thuộc vào điều kiện sử dụng, loại nội dung và sở thích của người dùng. Một nghiên cứu của Nielsen Norman Group (2020) cho thấy: dưới ánh sáng bình thường, Chế độ sáng mang lại tốc độ đọc cao hơn 15–20%. Tuy nhiên, trong điều kiện ánh sáng yếu, Chế độ tối giảm mỏi mắt và cải thiện khả năng đọc. Đối với giao diện có lượng lớn văn bản (bài viết, tài liệu), Chế độ sáng thường được ưa chuộng hơn.

Tiêu thụ điện năng là một lý do chính cho Chế độ tối trên OLED. Theo Google (2019), YouTube ở chế độ tối trên màn hình OLED tiêu thụ ít hơn 43% năng lượng so với chế độ sáng. Google Maps — 32%. Giao diện càng sáng và mức độ sáng màn hình càng cao, mức tiết kiệm càng lớn. Trên màn hình LCD, mức tiết kiệm không vượt quá 5%. Đối với người dùng làm việc nhiều với ứng dụng ngoài trời dưới ánh nắng mạnh, Chế độ sáng vẫn là lựa chọn duy nhất có thể đọc được.

Khuyến nghị của IT Sectr — chúng tôi triển khai cả hai chủ đề với các tùy chọn chuyển đổi: hệ thống (theo hệ thống), tối, sáng. Chuyển đổi tự động không nên là lựa chọn duy nhất — người dùng có thể muốn chủ đề tối vào ban ngày (vì chứng đau nửa đầu) hoặc chủ đề sáng vào ban đêm (để đọc). Trong các dự án của chúng tôi, chúng tôi thêm nút chuyển đổi chủ đề trong cài đặt hồ sơ và ghi nhớ lựa chọn. Đối với các ứng dụng có nội dung cao cấp (ảnh, video), nên xem trước chủ đề trước khi áp dụng.