الوضع الداكن — ما هو، سمة الواجهة الداكنة في التطبيقات المحمولة

ما هو الوضع الداكن ولماذا هو مطلوب؟

الوضع الداكن — هو نظام ألوان حيث تكون خلفية الشاشة داكنة (عادةً #121212 في Android، #1C1C1E في iOS)، بينما يكون النص وعناصر الواجهة فاتحة. على عكس عكس الألوان البسيط، يستخدم الوضع الداكن عالي الجودة لوحة مختارة بعناية: خلفية رمادية داكنة بدلاً من الأسود الخالص (يقلل من تأثير الهالة)، وتشبع منخفض للألوان المميزة، وظلال ناعمة. ظهر دعم النظام للوضع الداكن في iOS 13 (سبتمبر 2019) وAndroid 10 (سبتمبر 2019).

السبب الرئيسي للاعتماد — راحة المستخدم. في الإضاءة المنخفضة (في المساء، في الظلام)، تسبب الشاشة البيضاء الساطعة إجهاد العين وقد تؤدي إلى الصداع. يقلل الوضع الداكن من سطوع الشاشة دون التضحية بإمكانية القراءة. بالنسبة للمستخدمين الذين يعانون من رهاب الضوء أو حساسية الضوء، فإن السمة الداكنة ليست خيارًا بل هي الطريقة الوحيدة لاستخدام التطبيق بشكل مريح. وفقًا لـ Android Developers، أكثر من 30% من مستخدمي Android يبقون السمة الداكنة مفعلة طوال الوقت.

الوضع الداكن يوفر طاقة البطارية على شاشات OLED. على عكس LCD، حيث تكون الإضاءة الخلفية دائمًا قيد التشغيل، تضيء بكسلات OLED نفسها بنفسها. اللون الداكن يعني أن البكسل متوقف — ينخفض استهلاك الطاقة. وفقًا لـ Google (مدونة Android Developers، 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

API الوضع الداكن في 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
    }
}

// تفعيل إجباري للوضع الداكن
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 (2020): في الإضاءة العادية، يوفر الوضع الفاتح سرعة قراءة أعلى بنسبة 15-20%. ومع ذلك، في ظروف الإضاءة المنخفضة، يقلل الوضع الداكن من إجهاد العين ويحسن قابلية القراءة. للواجهات ذات الكميات الكبيرة من النص (مقالات، مستندات)، يكون الوضع الفاتح عادةً أفضل.

استهلاك الطاقة — حجة رئيسية للوضع الداكن على OLED. وفقًا لـ Google (2019)، يستهلك YouTube في السمة الداكنة على شاشة OLED طاقة أقل بنسبة 43% مقارنة بالسمة الفاتحة. Google Maps — بنسبة 32%. كلما كانت الواجهة أكثر سطوعًا وكلما ارتفع مستوى سطوع الشاشة، زاد التوفير. على شاشات LCD، لا يتجاوز التوفير 5%. بالنسبة للمستخدمين الذين يعملون كثيرًا مع التطبيق في الخارج تحت أشعة الشمس الساطعة، يظل الوضع الفاتح الخيار الوحيد المقروء.

توصيات IT Sectr — نحن ننفذ كلا السمتين مع خيارات التبديل: النظام (اتباع النظام)، داكن، فاتح. لا ينبغي أن يكون التبديل التلقائي هو الخيار الوحيد — قد يرغب المستخدم في السمة الداكنة أثناء النهار (للصداع النصفي) أو السمة الفاتحة ليلاً (للقراءة). في مشاريعنا، نضيف مفتاح السمة في إعدادات الملف الشخصي ونتذكر الاختيار. للتطبيقات ذات المحتوى المتميز (الصور، الفيديو)، يُوصى بمعاينة السمة قبل التطبيق.