الوضع الداكن (Dark Mode) بدون أخطاء: ليش قلب الألوان ما يكفي

أسهل طريقة لعمل وضع داكن: خلفية سوداء، ونص أبيض، وخلاص. وأسرع طريقة لعمل وضع داكن يتعب العين ويبان رخيصاً هي نفس الطريقة. الوضع الداكن مو عكس الفاتح؛ هو نسخة ثانية من نفس الهوية، بقواعد مختلفة للضوء والعمق.

لا تستخدم الأسود الخالص كخلفية أساسية

الأبيض الساطع فوق الأسود الخالص يعطي تبايناً حاداً يرهق العين في القراءة الطويلة، وبعض الناس يشوفون النص كأنه «يهتز». الأفضل خلفية رمادية داكنة جداً، ويُفضّل تميل قليلاً للون الهوية بدل الرمادي الميت. والنص الأساسي أبيض مخفّف قليلاً، مو أبيض خالص.

العمق بالإضاءة لا بالظلال

في الوضع الفاتح نستخدم الظلال عشان نقول «هذي البطاقة مرتفعة». في الداكن الظلال ما تبان تقريباً. البديل: كل ما ارتفع العنصر، صارت خلفيته أفتح قليلاً. الخلفية الأساسية أغمق شيء، البطاقة أفتح منها بدرجة، والنافذة المنبثقة أفتح بدرجة إضافية.

الألوان الأساسية تحتاج تعديلاً

• الألوان المشبعة جداً تبان صارخة على خلفية داكنة؛ خفّف تشبّعها قليلاً.
• اللون الأساسي الغامق اللي كان ممتازاً على الأبيض قد يختفي على الداكن؛ استخدم درجة أفتح منه.
• ألوان الحالات (خطأ، نجاح، تحذير) تحتاج نسخاً خاصة بالداكن، ويجب اختبار تباينها من جديد.
• النص الثانوي الرمادي غالباً يصير غير مقروء؛ تحقّق من تباينه تحديداً.

الصور والشعارات والرسومات

• الشعار الداكن يحتاج نسخة فاتحة أو أحادية اللون.
• الرسومات التوضيحية بخلفيات بيضاء تطلع كمربعات مضيئة؛ جهّز نسخاً شفافة.
• الصور الساطعة جداً ممكن تخفّف سطوعها قليلاً في الوضع الداكن.
• لقطات الشاشة داخل المحتوى تحتاج حدوداً خفيفة حتى لا تذوب في الخلفية.

الأساس التقني: المتغيرات

لو الألوان مكتوبة مباشرة داخل كل شاشة، إضافة وضع داكن تعني المرور على كل ملف. لو مسمّاة بوظيفتها (خلفية، سطح، نص، حد)، يصير الأمر تبديل قيم فقط. عشان كذا الوضع الداكن قرار يُفضّل يُحسب من بداية المشروع، حتى لو أُطلق لاحقاً.

احترم اختيار المستخدم

• الافتراضي: اتبع إعداد نظام الجهاز.
• وفّر اختياراً يدوياً بثلاث قيم: فاتح، داكن، حسب النظام.
• احفظ الاختيار ولا تعيده للافتراضي في كل مرة.
• في المواقع، تجنّب وميض الوضع الفاتح لحظة التحميل قبل تطبيق الداكن.

هل منتجك يحتاج وضعاً داكناً أصلاً؟

الوضع الداكن مو إلزامي لكل مشروع، وإضافته تعني صيانة نسختين من كل لون وكل صورة. رتّب أولويتك حسب طبيعة الاستخدام:

• أولوية عالية: تطبيقات القراءة، والاستخدام الليلي، وأدوات العمل اللي تبقى مفتوحة ساعات.
• أولوية متوسطة: لوحات التحكم والأنظمة الداخلية.
• أولوية أقل: صفحات هبوط تسويقية قصيرة الزيارة، ومتاجر تعتمد على صور منتجات بخلفيات بيضاء.
• قد لا يناسب: هوية مبنية بالكامل على ألوان فاتحة ونقية، إلا بعد تصميم مدروس جداً.

ولو قررت إن منتجك يستاهل وضعاً داكناً، فلا تطلقه قبل مراجعة شاملة؛ لأن الوضع الداكن الناقص أسوأ من عدم وجوده، والمستخدم يتذكّر الشاشة البيضاء المفاجئة أكثر مما يتذكّر عشرين شاشة داكنة متقنة. راجع هذي النقاط:

• مرّ على كل شاشة، مو الشاشات الرئيسية فقط: الإعدادات، الأخطاء، النوافذ المنبثقة.
• افحص تباين كل نص وأيقونة من جديد.
• تأكد إن الحقول وحدودها ظاهرة، وإن المؤشر داخل الحقل مرئي.
• راجع الرسائل البريدية والإشعارات والصفحات الخارجية المرتبطة.
• افتح المحتوى اللي يضيفه المستخدمون، مثل الصور بخلفيات شفافة.
• جرّب الانتقال بين الوضعين أثناء استخدام التطبيق بدون إعادة تشغيل.

المشاكل في الوضع الداكن غالباً تختبئ في الزوايا الصغيرة، والمستخدم اللي يستخدمه يلاحظها أسرع من غيره لأنها تلمع حرفياً في وجهه.

وتذكّر إن بعض مستخدميك يفضّلون الوضع الفاتح دائماً حتى في الليل، وبعضهم يستخدم الداكن طول اليوم. عشان كذا لا تصمم إحدى النسختين بعناية والثانية على عجل؛ الاثنتان واجهة منتجك الرسمية، وكل مستخدم يحكم على جودة المنتج من النسخة اللي يشوفها هو.

الوضع الداكن المتقن يعطي انطباع منتج مدروس. في منصة أزهل الرقمية نبني الألوان كمتغيرات من البداية في Flutter والويب، فيكون الوضع الداكن امتداداً طبيعياً لا مشروعاً مستقلاً. تواصل مع أزهل على واتساب لو تبي تضيفه لتطبيقك أو موقعك الحالي.