كيف تضيف الوضع الداكن إلى موقعك أو تطبيقك (دون وميض أبيض)

لإضافة الوضع الداكن، عرّف ألوانك كـ رموز مسماة (الخلفية، والنص، والسطح، والحدود، واللون المميز) بدلاً من القيم الثابتة في الكود، وأعطِ كل رمز قيمة فاتحة وقيمة داكنة، وبدّل بينهما باستخدام خاصية الوسائط CSS prefers-color-scheme بحيث يتبع الموقع إعداد نظام الزائر. إذا أردت زر تبديل يدوياً أيضاً، فاحفظ الاختيار في المتصفح وطبّقه بسكربت مضمّن صغير في head الصفحة حتى لا يحدث وميض أبيض عند التحميل. ثم تحقق من التباين والصور والرسوم البيانية في المظهرين. في أداة بناء تطبيقات بالذكاء الاصطناعي، قد يكفي أمر واضح واحد لمعظم هذا العمل؛ أما الجودة الحقيقية فتكمن في المراجعة.

نهجان

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

ابدأ برموز الألوان

يصعب الوضع الداكن حين تكون الألوان مبعثرة في الكود على هيئة white و#333 وgray-100. ويسهل حين تأتي كل الألوان من مجموعة صغيرة من الرموز المسماة:

كل مكوّن يستخدم أسماء الرموز. وعندها يصبح تبديل المظهر مجرد تبديل مجموعة واحدة من القيم، لا تعديل كل مكوّن على حدة.

نصائح للوحة الداكنة:

• تجنّب الأسود الخالص والأبيض الخالص في المساحات الكبيرة؛ فالرمادي الداكن جداً والأبيض المائل إلى الرمادي أسهل في القراءة.
• أظهر العمق بأسطح أفتح، لا بالظلال، فالظلال تكاد لا تظهر على الخلفيات الداكنة.
• خفّف تشبّع ألوان العلامة التجارية الساطعة قليلاً؛ فقد تتوهج بشكل مزعج على الخلفيات الداكنة.
• حافظ على تباين قابل للقراءة. يطلب مستوى AA من WCAG تبايناً لا يقل عن 4.5:1 للنص العادي. ويفشل النص الرمادي الخافت كثيراً في الثيمات الداكنة.

مع Tailwind CSS

يُعد Tailwind أداة التنسيق الافتراضية في كثير من التطبيقات المبنية بالذكاء الاصطناعي. وبحسب وثائق Tailwind للوضع الداكن، يستخدم متغيّر dark: خاصية prefers-color-scheme افتراضياً، لذا تتبع فئات مثل bg-white dark:bg-gray-900 إعداد النظام دون أي عمل إضافي.

من أجل زر تبديل يدوي في Tailwind v4، تُظهر الوثائق تحويل المتغيّر إلى صنف على عنصر أب:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

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

تجنّب الوميض الأبيض

يحدث الوميض لأن الصفحة تُرسم في الوضع الفاتح، ثم يُحمَّل JavaScript ويقرأ الاختيار المحفوظ ويتحول إلى الداكن. والحل:

1. ضع سكربتاً مضمّناً صغيراً في head الصفحة يقرأ المظهر المحفوظ ويضبط الصنف على العنصر الجذري قبل أن يُرسم أي شيء.
2. اضبط خاصية CSS color-scheme لكل مظهر حتى تتطابق عناصر المتصفح المرسومة (أشرطة التمرير وعناصر النماذج) معه.
3. أعطِ الصفحة لون خلفية صريحاً في المظهرين.
4. إذا كان التطبيق يُرسَم على الخادم، فتأكد من أن الخادم والمتصفح متفقان على المظهر الأولي، وإلا قد تُعاد عملية الرسم فيحدث وميض.

أوامر تعمل

إعداد كامل:

أضف الوضع الداكن. أولاً استبدل الألوان الثابتة برموز ألوان (الخلفية، والسطح، والنص، والنص الخافت، والحدود، واللون المميز) بقيم فاتحة وداكنة. الافتراضي هو إعداد نظام الزائر. أضف مفتاح تبديل في الترويسة بخيارات فاتح وداكن ونظام، واحفظ الاختيار في localStorage، وطبّقه بسكربت مضمّن في head حتى لا يحدث وميض أبيض عند التحميل. اضبط color-scheme لكل مظهر. أبقِ التصميم الفاتح الحالي كما هو تماماً.

إصلاح ما تبقّى:

افحص كل صفحة في الوضع الداكن وأصلح: النص ذو التباين المنخفض (استهدف 4.5:1 على الأقل)، والخلفيات البيضاء الثابتة في الكود، والحدود التي تختفي، والرسوم البيانية التي فيها نص داكن على خلفية داكنة، والشعارات التي تختفي. لا تغيّر المظهر الفاتح.

الصور والرسوم البيانية:

استخدم نسخة فاتحة من الشعار في الوضع الداكن. اجعل محاور الرسم البياني وخطوط الشبكة وتسمياته تستخدم رموز الثيم. أعطِ لقطات الشاشة حدّاً خفيفاً في الوضع الداكن حتى لا تختلط بالخلفية.

خطوة بخطوة

1. راجع الألوان. ابحث عن الألوان الثابتة في الكود واستبدلها برموز. هذا معظم العمل.
2. حدّد القيم الداكنة لكل رمز.
3. اتبع إعداد النظام باستخدام prefers-color-scheme (أو الافتراضي dark: في Tailwind).
4. أضف زر تبديل إن أردت: فاتح، داكن، نظام. احفظ الاختيار في المتصفح؛ وللتطبيقات التي يسجّل أصحابها الدخول يمكنك حفظه أيضاً في ملف تعريف المستخدم.
5. امنع الوميض بالسكربت المضمّن في head وcolor-scheme.
6. تحقق من الأجزاء الحساسة: الشعارات والأيقونات والصور ذات الخلفيات البيضاء، والرسوم البيانية، وكتل الكود، والخرائط، والتضمينات، ورسائل البريد الإلكتروني.
7. اختبر المظهرين على الحاسوب والهاتف، مع ضبط النظام على الفاتح ثم على الداكن، وبعد إعادة التحميل بالكامل.

أخطاء شائعة

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

قائمة التحقق

• كل الألوان تأتي من رموز الثيم
• يتبع إعداد النظام افتراضياً
• زر اختياري بخيارات فاتح وداكن ونظام، ويُتذكَّر الاختيار
• لا يوجد وميض أبيض عند التحميل أو إعادة التحميل
• color-scheme مضبوط حتى تتطابق عناصر النماذج وأشرطة التمرير
• التباين للنص لا يقل عن 4.5:1 في المظهرين
• الشعارات والصور والرسوم البيانية والتضمينات مُراجعة في الوضع الداكن
• المظهر الفاتح بلا تغيير
• تم الاختبار على الحاسوب والهاتف

الوضع الداكن مع Mythex

تستخدم التطبيقات المبنية على Mythex افتراضياً Vite وReact وTypeScript وTailwind، لذا تنطبق عليها طريقة Tailwind الموضحة أعلاه مباشرة: الصق أمر الإعداد الكامل في المحادثة، ثم تحقق من المعاينة في المظهرين وبحجم الهاتف. ومن إرشادات Mythex لتصميم الأوامر أن تسمّي ما تريد تغييره وما تريد إبقاءه، وهذا مهم هنا: قل إن المظهر الفاتح يجب أن يبقى كما هو. راجع أوامر التصميم والواجهة، وارجع إلى نقطة حفظ (checkpoint) إذا تراجعت إحدى المرات عن الهدف.

لمزيد من المعلومات عن الحصول على المظهر الصحيح، راجع كيف تصمم تطبيقاً جميلاً بالذكاء الاصطناعي وكيف تكتب أوامر لأدوات بناء التطبيقات بالذكاء الاصطناعي.

الأسئلة