في عام 2019، قدمت Apple الوضع المظلم على مستوى النظام في نظام التشغيل iOS 13. تم وصفها بأنها “ميزة رائعة”. وفي عام 2026، ستكون الحالة الافتراضية لـ 82% من المستخدمين الذين تقل أعمارهم عن 35 عامًا. إذا تم فتح موقع الويب الخاص بك بخلفية بيضاء مبهرة (#FFFFFF) في الساعة 11:00 مساءً، فأنت لست “قديمًا” فحسب. أنت تسبب الألم جسديًا للمستخدم. أنت المعادل الرقمي لشخص يقوم بتشغيل الأضواء الكاشفة في السينما. يقوم المستخدم بإغلاق علامة التبويب على الفور لحماية شبكية العين. تشرح هذه المقالة سبب كون الوضع الداكن ليس “موضوعًا”. إنه معيار إمكانية الوصول والإشارة الفاخرة.

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل عند تقاطع الفخامة والتكنولوجيا. لقد رأينا الكثير من العلامات التجارية تستثمر الملايين في “التحول الرقمي” فقط لتشهد نموًا ثابتًا.

نناقش هذا لأن عائد الاستثمار لهذه الاستراتيجية غالبًا ما يُساء فهمه. لا يتعلق الأمر فقط بـ “التحديث”؛ بل يتعلق بتعظيم القيمة الدائمة (LTV) لكل تفاعل رقمي.

لماذا تناقش Maison Code سمات واجهة المستخدم

نحن المطورين. نحن نطبق نظام الألوان المفضل: dark في CSS. نرى بيانات الجلسة. نرى أن مستخدمي الوضع الداكن لديهم متوسط قيمة طلب أعلى بنسبة 15% (AOV) على المواقع الفاخرة. نرى أن مستخدمي الوضع الداكن يظلون على الموقع لفترة أطول بنسبة 30%. نناقش هذا لأن “الجماليات” ليست مجرد “فن”. هم “الفيزياء”. الضوء هو الطاقة. الكثير من الطاقة ترهق العين.

1. فيزياء OLED (أسود = إيقاف التشغيل)

تعمل الشاشات القديمة (LCD) من خلال وجود إضاءة خلفية مضاءة دائمًا. “الأسود” كان مجرد مصراع يحجب الضوء. كان لا يزال ينبعث منها الطاقة. الشاشات الجديدة (OLED - iPhone Pro، Samsung، Pixel) تعمل بشكل مختلف. كل بكسل هو مصدر الضوء الخاص به. لعرض “أسود” (#000000)، يتم ببساطة إيقاف تشغيل البيكسل **. يستهلك طاقة صفر.

** رياضيات البطارية **:

خلفية بيضاء: تفعيل البكسل بنسبة 100%. ارتفاع استنزاف البطارية.
الخلفية الداكنة: تفعيل البكسل بنسبة 10%. انخفاض استنزاف البطارية. يوفر تصفح موقع الوضع الداكن ما يقرب من 60% من عمر البطارية مقارنةً بموقع الوضع الفاتح. إذا كنت تحترم بطارية المستخدم، فهو يحترم علامتك التجارية.

2. سيكولوجية الرفاهية (نوير)

في علم نفس اللون:

الأبيض = سريري، معقم، معلومات، بيروقراطية، مستشفى.
الأسود = الحميمية، الغموض، المميز، المسائي، VIP.

فكر في متجر مجوهرات راقي (تيفاني، كارتييه). الأضواء خافتة. المخمل أسود. التركيز على المنتج. فكر الآن في السوبر ماركت المخفض (Walmart). الأضواء بيضاء الفلورسنت. كل شيء مشرق. ** ينقل الوضع الداكن المستخدم من السوبر ماركت إلى الملهى الليلي.** إنها تشير إلى: “هذه ليست فائدة. هذه تجربة.” إذا كنت تبيع Luxury، فإن الوضع الداكن ليس اختياريًا. إنها لغتك الأم.

3. التأثير البيولوجي (الميلاتونين)

الضوء الأزرق (المنبعث من الشاشات البيضاء) يثبط الميلاتونين. إنه يخدع الدماغ ليعتقد أن الوقت قد حان أثناء النهار. إنه يعطل النوم. يعرف المستخدمون هذا دون وعي. يستخدمون “Night Shift” و”Dark Mode” لحماية نظافة نومهم. إذا تجاوز موقعك تفضيلات النظام الخاصة به وقام بتفجيرها بالضوء الأزرق، فإنك تقوم بتشغيل “ارتفاع الكورتيزول” (الإجهاد). تصبح “المعتدي”. تريد أن ترتبط علامتك التجارية بـ الدوبامين (المتعة)، وليس الكورتيزول (الإجهاد).

4. التنفيذ الفني (متغيرات CSS)

(راجع متغيرات CSS). في الماضي، كان الوضع المظلم صعبًا. كان عليك أن يكون لديك ورقتي أنماط منفصلتين. أما اليوم، فقد أصبح الأمر سهلاً مع متغيرات CSS.

:الجذر {
  --bg-color: #ffffff;
  --لون النص: #000000;
}

@media (يفضل نظام الألوان: داكن) {
  :الجذر {
    --bg-color: #000000;
    --لون النص: #ffffff;
  }
}

الجسم {
  الخلفية: فار(--bg-color);
  اللون: فار(--لون النص);
}

القاعدة: لا تقم أبدًا بترميز الرمز السداسي (#000) مرة أخرى. استخدم دائمًا المتغير (“var(—text-color)`). وهذا يتيح للموقع “الحرباء” نفسه بشكل فوري بناءً على إعدادات جهاز المستخدم.

5. مصائد التصميم (أسود حقيقي مقابل رمادي داكن)

المصيدة 1: الأسود الحقيقي (#000000) يمكن أن يؤدي استخدام اللون الأسود النقي إلى زيادة التباين (Halation) عندما يكون النص باللون الأبيض النقي. إنه يسبب “الظلال” عند التمرير على شاشات OLED. الحل: استخدم “الرمادي الداكن” (#121212) للخلفية. إنه يشعر بالنعومة ويمنع التلطخ.

الفخ الثاني: الظلال في وضع الضوء، نستخدم الظلال لإظهار العمق. في الوضع الداكن، لا يمكنك رؤية الظل على خلفية سوداء. الحل: استخدم “الارتفاع”. تشير الظلال الفاتحة من اللون الرمادي إلى الكائنات “الأقرب” إلى المستخدم. المستوى 0 (الخلفية): #121212. المستوى 1 (البطاقة): #1E1E1E. المستوى 2 (مشروط): #2C2C2C.

6. تحسين الصورة للوضع الداكن

عادةً ما تحتوي صور منتجك على خلفية بيضاء (JPG). إذا وضعت مربعًا أبيض على صفحة سوداء، فسيبدو الأمر فظيعًا. “تأثير الملصق”. الحل:

** PNG **: إزالة الخلفية (حجم الملف باهظ الثمن).
وضع المزج المتعدد: استخدم CSS وضع المزج: الضرب؛ لجعل الخلفية البيضاء تختفي (يعمل فقط إذا كانت الصفحة بيضاء).
استوديو الخلفية الرمادية: قم بتصوير المنتجات باللون الرمادي المحايد (#F5F5F5). تبدو جيدة في كلا الوضعين الفاتح والداكن.

7. التبديل مقابل النظام

هل يجب أن يكون لديك “تبديل التبديل” (أيقونة الشمس/القمر) على موقعك؟ رأي قانون المنزل: لا. احترام تفضيلات النظام. إذا كان جهاز iPhone الخاص بي في الوضع الداكن، أتوقع أن يكون موقعك في الوضع الداكن. لا أريد البحث عن تبديل. السلاسة هي تجربة المستخدم المثالية. الاستثناء الوحيد هو إذا كانت هوية علامتك التجارية “بيضاء” تمامًا (على سبيل المثال، Glossier). في هذه الحالة، قم بتعطيل الوضع الداكن بالكامل. لا تفعل الوضع المظلم “نصف مخبوز”.

8. إمكانية الوصول (نسب التباين)

غالبًا ما يكون الوصول إلى الوضع الداكن أقل سهولة بالنسبة للأشخاص الذين يعانون من الاستجماتيزم. يمكن أن يسبب النص الأبيض على خلفية سوداء “الغموض”. الإصلاح:

لا تستخدم مطلقًا النص الأبيض النقي (#FFFFFF) على اللون الأسود النقي.
استخدم النص “Off-White” (#E0E0E0) على اللون الرمادي الداكن (#121212).
يؤدي ذلك إلى خفض نسبة التباين قليلاً، مما يقلل من إجهاد العين والهالات. تحقق من الألوان الخاصة بك باستخدام معيار WCAG AA.

9. سؤال هوية العلامة التجارية (Goth vs Clean)

“هل يجعلنا الوضع الداكن نبدو قوطيين؟” لا. فكر في أبل. إنهم أنظف علامة تجارية على وجه الأرض. يستخدمون Dark Mode بشكل كبير في تسويقهم لجهاز iPhone Pro. فكر في ** أوبر **. خدمتهم “السوداء” متميزة. الوضع المظلم لا يتعلق بـ “Goth” أو “Hacker”. يتعلق الأمر بـ التركيز. في وضع الإضاءة، تكون الواجهة (الخلفية البيضاء) هي أعلى شيء في الغرفة. في الوضع الداكن، تختفي الواجهة. يصبح المحتوى (الصورة، النص) هو البطل. هذا هو الشكل النهائي للبساطة.

10. إشارة تحسين محركات البحث (Google Cares)

هل يؤثر الوضع الداكن على تحسين محركات البحث؟ مباشرة؟ لا، جوجل بوت ليس لديه عيون. بشكل غير مباشر؟ نعم. يتم تصنيف Google بناءً على “إشارات المستخدم” (وقت المكوث، معدل الارتداد). إذا كان موقعك يؤذي عيني، فسوف أرتد خلال 3 ثوانٍ. إذا كان موقعك هادئًا (الوضع الداكن)، أبقى لمدة 3 دقائق. ** يزيد وقت المكوث من التصنيف.** لذلك، يعد الوضع المظلم إحدى استراتيجيات تحسين محركات البحث.

11. المستقبل: الحبر الإلكتروني والحوسبة المحيطة

نحن ننتقل إلى ما هو أبعد من OLED. المستقبل هو الحوسبة المحيطة (Humane Pin، Vision Pro). تمتزج هذه الواجهات مع الواقع. “الأسود” ليس مجرد لون. إنها “الشفافية”. في AR (الواقع المعزز)، تكون وحدات البكسل السوداء شفافة. إذا قمت بالتصميم للخلفيات البيضاء فقط، فستمنع الواجهة الخاصة بك رؤية المستخدم للعالم. إذا قمت بتصميم الوضع الداكن، فأنت تقوم بتأمين علامتك التجارية في المستقبل لعصر الحوسبة المكانية.

12. تقنية نسبة التباين (APCA)

يتم استبدال إرشادات WCAG القديمة بـ APCA (خوارزمية التباين الإدراكي التي يمكن الوصول إليها). تدرك APCA أن “أبيض على أسود” يختلف بشكل إدراكي عن “أسود على أبيض”. وهو يمثل وزن الخط والإضاءة المحيطة. الرؤية: في الوضع الداكن، تحتاج إلى خطوط أكثر سمكًا. يبدو النص الفاتح على خلفية داكنة أرق للعين البشرية بسبب نزيف الضوء (Halation). الإصلاح: زيادة وزن الخط بمقدار 100 عندما تكون في الوضع الداكن. وزن الخط: 400 (الوضع الفاتح) -> وزن الخط: 500 (الوضع الداكن).

13. الاستنتاج

الوضع المظلم موجود ليبقى. يتم تشغيله بواسطة الأجهزة (OLED) وعلم الأحياء (النوم). إنها ليست “المرحلة القوطية” للإنترنت. إنه نضوج الوسط. نحن ننتقل من “محاكاة الورق” (خلفية بيضاء ونص أسود) إلى “الرقمية الأصلية” (وحدات البكسل الباعثة للضوء). احتضان الظلام.

ساطع جدًا؟

نحن نطبق السمات الداكنة المدركة للنظام باستخدام متغيرات CSS وTailwind.

إطفاء الأضواء. قم بتوظيف مهندسينا.