Dark Mode — چیست، تم تیره رابط کاربری در برنامه‌های موبایل

Dark Mode چیست و چرا به آن نیاز داریم؟

Dark Mode — طرح رنگی رابط کاربری است که در آن پس‌زمینه صفحه تیره (معمولاً #121212 در Android، #1C1C1E در iOS) و متن و عناصر رابط کاربری روشن هستند. برخلاف معکوس‌سازی ساده رنگ‌ها، Dark Mode با کیفیت از پالت مخصوص انتخاب شده استفاده می‌کند: پس‌زمینه خاکستری تیره به جای سیاه خالص (کاهش اثر هاله)، اشباع کمتر رنگ‌های تأکیدی و سایه‌های نرم. پشتیبانی سیستمی از Dark Mode در iOS 13 (سپتامبر ۲۰۱۹) و Android 10 (سپتامبر ۲۰۱۹) ظاهر شد.

دلیل اصلی پیاده‌سازی — راحتی کاربر. در نور کم (عصر، در تاریکی) صفحه سفید روشن باعث فشار چشم می‌شود و می‌تواند سردرد ایجاد کند. Dark Mode روشنایی صفحه را بدون کاهش خوانایی کم می‌کند. برای کاربران مبتلا به فوتوفوبیا یا حساسیت به نور، تم تیره یک گزینه نیست، بلکه تنها امکان استفاده راحت از برنامه است. طبق داده‌های Android Developers، بیش از ۳۰٪ کاربران Android همیشه تم تیره را فعال نگه می‌دارند.

Dark Mode در مصرف باتری صرفه‌جویی می‌کند در نمایشگرهای OLED. برخلاف LCD که نور پس‌زمینه همیشه روشن است، پیکسل‌های OLED خودشان نور می‌دهند. رنگ تیره به معنای خاموش بودن پیکسل است — مصرف انرژی کاهش می‌یابد. طبق داده‌های Google (Android Developers Blog، ۲۰۱۹)، در Pixel با نمایشگر OLED، Dark Mode در روشنایی ۱۰۰٪ مصرف انرژی را ۶۰٪ در مقایسه با تم روشن کاهش می‌دهد. در نمایشگرهای LCD صرفه‌جویی حداقل است (حدود ۳–۵٪) زیرا نور پس‌زمینه ماتریس مستقل از رنگ پیکسل‌ها کار می‌کند.

تاریخچه Dark Mode در سیستم‌عامل‌های موبایل

پشتیبانی سیستمی Dark Mode چند مرحله را پشت سر گذاشت. iOS 13 (۲۰۱۹) تم تیره جهانی را از طریق UIUserInterfaceStyle معرفی کرد. Android 10 (۲۰۱۹) Force Dark Mode را برای برنامه‌های بدون تم تیره اختصاصی اضافه کرد. Android 12 (۲۰۲۱) با Material You شروع به تولید خودکار پالت تیره از کاغذدیواری کرد. iOS 15 (۲۰۲۱) API را برای Safari و محتوای وب گسترش داد. طبق داده‌های StatCounter (۲۰۲۶)، ۸۲٪ از ۱۰۰ برنامه برتر در App Store و Google Play از Dark Mode پشتیبانی می‌کنند.

Dark Mode در iOS: Swift API و پشتیبانی UIKit

API Dark Mode در iOS بر اساس پروتکل 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
    }
}

// فعال‌سازی اجباری Dark Mode
window.overrideUserInterfaceStyle = .dark

رنگ‌های پویا — بهترین روش پیاده‌سازی Dark Mode در iOS است. UIColor(named:) به طور خودکار مقادیر مختلف را از Asset Catalog برای ظاهر .light و .dark بارگیری می‌کند. کافی است رنگ را در Assets.xcassets با دو گزینه (Any Appearance + Dark Appearance) تنظیم کنید و UIKit خود گزینه مناسب را انتخاب می‌کند. رنگ‌های سیستم پویا (UIColor.systemBackground، .label، .secondaryLabel) از قبل از Dark Mode پشتیبانی می‌کنند و به طور خودکار تغییر می‌کنند.

SwiftUI و Dark Mode

SwiftUI از Dark Mode به صورت پیش‌فرض پشتیبانی می‌کند. همه رنگ‌ها و اصلاح‌کننده‌های استاندارد (Color.primary، .background، Color(UIColor.systemBackground)) به طور خودکار تطبیق می‌یابند. برای رنگ‌های سفارشی از Color(uiColor:) با UIColor پویا یا متغیر محیطی @Environment(\.colorScheme) برای بررسی صریح تم استفاده کنید. نمای SwiftUI با تغییر تم، بدون نیاز به فراخوانی 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 در Android: Kotlin API و AppCompat

Dark Mode در 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+) به طور خودکار ۵ رنگ کلیدی از کاغذدیواری دستگاه تولید می‌کند: 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>

طراحی تم تیره: قوانین کنتراست و رنگ

طراحی Dark Mode — فقط معکوس‌سازی رنگ‌ها نیست. Google Material Design استفاده از خاکستری تیره (#121212) را به جای سیاه خالص توصیه می‌کند. سیاه خالص (#000000) کنتراست بسیار بالایی با متن سفید ایجاد می‌کند و باعث اثر هاله (هاله در اطراف حروف) می‌شود. سطح ارتفاع (elevation) عناصر از طریق رنگ تعیین می‌شود: هرچه عنصر بالاتر باشد، پس‌زمینه آن روشن‌تر است. کارت روی پس‌زمینه — #1E1E1E، دیالوگ — #2D2D2D، پنل ناوبری — #383838.

کنتراست رنگ در Dark Mode باید کمتر از Light Mode باشد. Material Design توصیه می‌کند: متن primary — سفید (#FFFFFF) با شفافیت ۸۷٪، secondary — ۶۰٪، disabled — ۳۸٪. رنگ‌های تأکیدی باید اشباع کمتری داشته باشند: اگر در تم روشن primary = #6200EE، در تم تیره — #BB86FC (بنفش روشن و ملایم). طبق WCAG 2.1، حداقل کنتراست ۴.۵:۱ برای متن عادی باید در هر دو تم رعایت شود.

تصاویر و آیکون‌ها نیاز به پردازش جداگانه در تم تیره دارند. آیکون‌های دارای شفافیت باید به رنگ روشن تغییر داده شوند. عکس‌های با پس‌زمینه روشن ممکن است خیره‌کننده به نظر برسند — توصیه می‌شود روشنایی را ۲۰–۳۰٪ کاهش دهید یا یک پوشش نیمه‌شفاف اضافه کنید. برای لوگوها و عناصر برند از نسخه مخصوص پس‌زمینه تیره استفاده کنید. iOS Asset Catalog و Android VectorDrawable از منابع جداگانه برای تم روشن و تیره پشتیبانی می‌کنند.

مقایسه Dark Mode و Light Mode: مزایا و معایب

انتخاب بین تم‌ها به شرایط استفاده، نوع محتوا و ترجیحات کاربر بستگی دارد. تحقیقات Nielsen Norman Group (۲۰۲۰) نشان داد: در نور معمولی، Light Mode سرعت خواندن را ۱۵–۲۰٪ افزایش می‌دهد. با این حال، در شرایط نور کم، Dark Mode خستگی چشم را کاهش می‌دهد و خوانایی را بهبود می‌بخشد. برای رابط‌های با حجم زیاد متن (مقالات، اسناد) معمولاً Light Mode ترجیح داده می‌شود.

مصرف انرژی — استدلال کلیدی برای Dark Mode در OLED. طبق داده‌های Google (۲۰۱۹)، YouTube در تم تیره در نمایشگر OLED ۴۳٪ انرژی کمتری نسبت به تم روشن مصرف می‌کند. Google Maps — ۳۲٪. هرچه رابط روشن‌تر و سطح روشنایی صفحه بالاتر باشد، صرفه‌جویی قابل‌توجه‌تر است. در نمایشگرهای LCD صرفه‌جویی از ۵٪ تجاوز نمی‌کند. برای کاربرانی که زیاد در فضای باز زیر آفتاب روشن با برنامه کار می‌کنند، Light Mode تنها گزینه خوانا باقی می‌ماند.

توصیه‌های IT Sectr — ما هر دو تم را با قابلیت جابجایی پیاده‌سازی می‌کنیم: سیستمی (follow system)، تیره، روشن. جابجایی خودکار نباید تنها گزینه باشد — کاربر ممکن است در روز (در زمان میگرن) تم تیره یا در شب (هنگام مطالعه) تم روشن بخواهد. در پروژه‌های خود، جابجایی تم را در تنظیمات پروفایل اضافه می‌کنیم و انتخاب را ذخیره می‌کنیم. برای برنامه‌های با محتوای پریمیوم (عکس، ویدئو) توصیه می‌شود قبل از اعمال، پیش‌نمایش تم نشان داده شود.