تصميم الوضع الداكن: كيف تطلق ثيمًا ثانيًا دون أن تكسر الأول
دليل مصمم عامل إلى الوضع الداكن. حسابات الألوان التي تنجح فعلًا، وفخاخ المكوّنات التي يجب تجنبها، وكيف تطلق ثيمًا داكنًا يبدو مصممًا لا مقلوبًا.
معظم الأوضاع الداكنة ليست مصممة، بل مقلوبة. يقلب المصمم الخلفية إلى ما يقارب الأسود، ويلوّن النص بما يقارب الأبيض، ويعلن أن العمل انتهى. والنتيجة ثيم يبدو قاسيًا، ويُقرأ أسوأ من النسخة الفاتحة، ويجعل العلامة التجارية تبدو كمنتج آخر في إضاءة خاطئة.
هذه الورقة هي النسخة العملية. حسابات الألوان التي تجعل الثيم الداكن يبدو مقصودًا، وفخاخ المكوّنات التي تنكسر في الظلام، وبنية الـ tokens التي تُبقي الثيمين متزامنين مع نمو المنتج. لا تدرجات Dribbble، فقط ثيم داكن يستحق مكانه في نظام التصميم.
ما هو الوضع الداكن فعلًا
الوضع الداكن ثيم ثانٍ كامل، وليس قلبًا للألوان. له منطق أسطحه الخاص، وقواعد تباينه الخاصة، وتعديلاته الخاصة على وزن الخط. الوضع الداكن الحقيقي يُصمَّم من الصفر على نفس مجموعة المكوّنات، ثم يُوفَّق مع الثيم الفاتح عبر tokens مشتركة.
يفشل اختصار القلب لسبب محدد. الوضع الفاتح يعتمد على أسطح بيضاء تعكس العمق إلى الأعلى. الوضع الداكن لا يستطيع قلب ذلك، لأن الأسطح السوداء الخالصة تمتص العمق بدل أن تصنعه. لذلك يجب إعادة بناء نظام الارتفاع كله. يشرح دليل أنظمة التصميم لماذا يجب أن يحدث ذلك داخل الـ tokens لا داخل المكوّنات الفردية.
لماذا يهم الوضع الداكن في 2026
ثلاثة أسباب. ولا واحد منها جمالي.
عمر البطارية على شاشات OLED. كل بكسل أسود على لوحة OLED لا يستهلك أي طاقة. الواجهة الداكنة على الهاتف قد تخفض استهلاك الشاشة من 30 إلى 60 بالمئة عند السطوع العالي. لمستخدمي الجوال، الثيم الداكن ميزة بطارية قبل أن يكون ميزة بصرية.
إتاحة الاستخدام لمن يعانون حساسية الضوء. المستخدمون المصابون بالصداع النصفي أو اللابؤرية أو رهاب الضوء لا يستطيعون استخدام واجهة فاتحة لفترات طويلة براحة. إطلاق الوضع الداكن التزام بإتاحة الاستخدام وليس تفضيلًا. تشرح قائمة التحقق من إتاحة الويب موقع الثيمات داخل تدقيق كامل.
توقعات المستخدم. أنظمة التشغيل تأتي بمفتاح وضع داكن يطبَّق على النظام كله. المنتج الذي يتجاهل إعداد النظام يبدو قديمًا. والمستخدمون يصفّون متاجر التطبيقات ودلائل الإضافات حسب دعم الوضع الداكن. غياب الثيم الداكن مشكلة تسويقية، لا مجرد فجوة في الواجهة.
القاعدة الأولى: لا تستخدم الأسود الخالص أبدًا
الأسود الخالص (#000000) هو الخطأ الأكثر شيوعًا في أي وضع داكن جديد. يبدو صحيحًا لأنه يبدو أغمق سطح ممكن. لكنه يُقرأ خاطئًا لأن العين البشرية لا تستطيع الحكم على العمق أمام الأسود التام.
الحل: استخدم رماديًا داكنًا بصبغة خفيفة من لون العلامة كسطح أساسي. شيء في نطاق #0B0B10 إلى #121218 لمعظم المنتجات، وأحيانًا يصل إلى #1A1A1F. القيمة الدقيقة تعتمد على حرارة لون العلامة. العلامة الدافئة تميل إلى داكن دافئ قليلًا. والباردة إلى داكن بارد قليلًا. أما الحيادي الخالص فيبدو بلا حياة.
والقاعدة نفسها تنطبق على النص الأعلى تباينًا. الأبيض الخالص (#FFFFFF) على سطح داكن يخلق الهالة الضوئية، وهي تأثير ضبابي ساطع عند الحواف يجعل قراءة النص الصغير مرهقة. اخفض النص إلى حوالي #E8E8EA أو استخدم أبيض بشفافية من 85 إلى 92 بالمئة. الفرق لا تراه العين لكنه هائل للمقروئية.
ارتفاع الأسطح في الوضع الداكن
الوضع الفاتح يستخدم الظلال ليُظهر أن البطاقة فوق الخلفية. الوضع الداكن لا يستطيع، لأن الأسطح الداكنة تبتلع الظلال. الحل البديل هو الارتفاع عبر الإضاءة.
كل درجة ارتفاع تُفتّح السطح ولا تُغمّقه. البطاقة فوق السطح الأساسي أفتح قليلًا منه. والنافذة المنبثقة فوق البطاقة أفتح أكثر. العمق في الواجهة الداكنة يُقرأ كتدرج أسطح تصعد نحو المستخدم، لا كظلال تسقط من تحتها.
صاغ Material Design هذا في سلم ارتفاع من خمس درجات، والفكرة العامة صالحة في أي نظام تصميم. سلم عملي لمعظم المنتجات:
| الارتفاع | مثال | قيمة السطح |
|---|---|---|
| 0 | الخلفية الأساسية | #0E0E12 |
| 1 | بطاقة، حقل إدخال | #17171C |
| 2 | بطاقة مرتفعة، قائمة | #1F1F25 |
| 3 | نافذة منبثقة، حوار | #28282F |
| 4 | Popover، تلميح | #31313A |
الأرقام المحددة تختلف من علامة لأخرى، لكن المنطق لا يختلف. كل سطح مرتفع أفتح من الذي تحته، وكل ظل خفيف، والتسلسل الهرمي يُقرأ كأسطح مكدسة في الفضاء لا كصناديق مرسومة على صفحة.
حسابات التباين للثيمات الداكنة
يغطي مسرد نسبة التباين الحد الأدنى في WCAG وهو 4.5 إلى 1 للنص العادي و3 إلى 1 للنص الكبير. الوضع الداكن لا يخفف هذه القواعد، لكنه يغيّر طريقة تحقيقها.
في الوضع الفاتح، نص المتن عند حوالي #222 على خلفية بيضاء يحقق نحو 16 إلى 1. اعتاد المصممون على هامش ضخم فوق الحد الأدنى. الوضع الداكن أضيق. نص المتن بلون #E0E0E0 على #0E0E12 يحقق نحو 13 إلى 1، وهذا ما زال قويًا، لكن هامش الخطأ أصغر. خفض النص إلى #B0B0B0 لتليين المظهر قد يدفع قسمًا كاملًا بهدوء إلى ما دون 4.5 إلى 1.
الانضباط المطلوب: كل قرار لوني في الوضع الداكن يمر عبر أداة فحص التباين. ليس مرة واحدة لكل ثيم، بل مرة لكل زوج tokens. النص على السطح الأساسي، النص على البطاقة، النص على النافذة المنبثقة، نص placeholder، النص المعطّل، نص الروابط. كل زوج فحص مستقل.
فخ شائع هو token النص الخافت. في الوضع الفاتح، النص الخافت #666 على الأبيض يُقرأ بوضوح عند 5.7 إلى 1. وعند قلبه إلى #999 على #0E0E12 تنخفض النسبة إلى نحو 4.2 إلى 1، وهذا يفشل في WCAG AA. اختصار القلب يكسر الامتثال لإتاحة الاستخدام بصمت، ومعظم الفرق لا تلاحظ حتى يكتشفه تدقيق.
اللون في الوضع الداكن: التشبّع، لا القيمة فقط
ألوان العلامة التي تتألق على خلفية بيضاء كثيرًا ما تبدو موحلة أو كهربائية على خلفية داكنة. السبب أن الأسطح الداكنة تضخّم التشبّع المُدرَك. لون مميز مشبع 100 بالمئة على سطح فاتح يبدو واثقًا. واللون نفسه على سطح داكن يبدو مشعًّا.
القاعدة أن تخفّض تشبّع الألوان المميزة في الثيم الداكن، عادة بنسبة 10 إلى 20 بالمئة، وتفتّحها قليلًا. زر رئيسي لونه #3455FF على الأبيض قد يصبح #5C78FF على الداكن. العائلة اللونية نفسها، معدّلة لبيئة التباين الجديدة. تبقى العلامة تُقرأ كعلامة. فقط تتوقف عن إيذاء العين.
يغطي مسرد لوحة الألوان البنية الأساسية التي يعيش هذا التعديل داخلها. الوضع الداكن الجيد لا يخترع ألوانًا جديدة، بل يطلق مجموعة موازية من ألوان العلامة نفسها مضبوطة لسياق السطح الجديد.
فخاخ المكوّنات التي تنكسر في الظلام
معظم المكوّنات تحتاج تعديلًا واحدًا على الأقل للوضع الداكن. وبعضها ينكسر تمامًا بدونه. هؤلاء هم المخالفون المعتادون.
الحدود تصبح الفاصل الرئيسي
في الوضع الفاتح، ظل خفيف أو حد بالكاد مرئي يفصل المكوّنات. في الوضع الداكن تختفي الظلال ومعظم الحدود. يصبح الحد الأداة الرئيسية لتعريف حواف المكوّنات، وكثيرًا ما يحتاج رفعه من شيء مثل #EEE في الفاتح إلى حوالي #2A2A30 في الداكن ليبقى مرئيًا.
الاختبار أن تعرض الواجهة بسطوع 80 بالمئة على لابتوب. إن بدأت حواف المكوّنات تختفي، فإن token الحد يحتاج قيمة أسطع في الثيم الداكن.
الظلال تعكس غرضها
الظلال في الوضع الفاتح تدفع الأسطح إلى الأسفل والبعيد. الظلال في الوضع الداكن يجب أن توحي بأسطح تصعد وتتقدم. يتحقق هذا عادة بمزيج من سطح أفتح قليلًا (الارتفاع) مع ظل داكن شبه غير مرئي تحته يضيف وزنًا دون ظهور.
زوج ظلال عملي للوضع الداكن:
- خارجي:
0 4px 12px rgba(0, 0, 0, 0.5)لتثبيت العنصر - إبراز علوي داخلي:
inset 0 1px 0 rgba(255, 255, 255, 0.05)ليوحي بحافة مرفوعة
معًا، يبدو المكوّن مرفوعًا بدل أن يكون مقصوصًا. وبمفرده، لا يظهر أي من التأثيرين.
الحالات المعطّلة تختفي
الزر المعطّل في الوضع الفاتح عادة رمادي باهت على الأبيض. المعالجة نفسها في الوضع الداكن تذيب الزر في السطح تمامًا. الحل أن ترفع شفافية الحالة المعطّلة لا أن تخفضها. شيء مثل 40 بالمئة شفافية فوق لون السطح المرتفع، بدل الهبوط إلى رمادي باهت. الحالة المعطّلة يجب أن تظل تُقرأ كزر، لكنه غير نشط.
الصور والرسومات التوضيحية تحتاج معاملة خاصة
صورة منتج مصوّرة على خلفية بيضاء تبدو مكسورة على سطح داكن. ورسم توضيحي للعلامة بخط أبيض يختفي كليًا. الصور تحتاج مرورها الخاص للوضع الداكن، إما عبر أصل منفصل، أو تبديل الخلفية، أو فلتر مضبوط بعناية. هذا أغلى جزء في إطلاق الوضع الداكن بشكل صحيح، وهو الجزء الذي تحذفه معظم الفرق.
الحل العملي للفرق التي لا تستطيع إطلاق أصول صور موازية: أضف خلفية ناعمة لكل حاوية صورة في الوضع الداكن، شيئًا حول #F5F5F7 بزوايا مدورة. الصور المصوّرة على الأبيض تجلس الآن على حاوية فاتحة، وبقية الواجهة تبقى داكنة.
حالات تركيز الإدخال تحتاج تباينًا أكبر
حلقة التركيز الزرقاء التي تنجح على خلفية بيضاء تفقد أثرها أمام الأسطح الداكنة. يغطي مسرد حالة التركيز مؤشر focus-visible المطلوب في WCAG. في الوضع الداكن، كثيرًا ما تحتاج حلقة التركيز أن تكون أسطع أو أسمك بنسبة 10 إلى 20 بالمئة من توأمها في الوضع الفاتح. متطلب إتاحة الاستخدام لم يتغير، لكن المعالجة البصرية يجب أن تتكيف لتحققه.
بنية الـ tokens للثيمين
وضع داكن يعيش في تجاوزات CSS هو وضع داكن سينحرف. كل مكوّن جديد سيتعامل مع الثيمات بطريقة مختلفة، وخلال ستة أشهر سيكون في المنتج ثلاثة أنماط للثيمات تتجادل فيما بينها.
البنية الصحيحة هي الـ tokens الدلالية. يغطي مسرد design token المفهوم الأساسي. الوضع الداكن هو الحالة التي تثبت أن الـ tokens ليست اختيارية.
ثلاث طبقات من الـ tokens:
الطبقة الأولى: البدائيات (primitives). قيم ألوان خام. color.neutral.900، color.brand.500. بلا رأي وبلا سياق.
الطبقة الثانية: الدلالية. أسماء قائمة على الدور. color.surface.base، color.surface.raised، color.text.primary، color.text.muted، color.border.default. كل semantic token يشير إلى بدائي.
الطبقة الثالثة: الثيم. خريطتان كاملتان، واحدة لكل ثيم، تقرران إلى أي بدائي يُحَلّ كل token دلالي. الثيم الفاتح يربط color.surface.base بـ color.neutral.50. والثيم الداكن يربط color.surface.base بـ color.neutral.900.
المكوّنات لا تستهلك إلا الـ tokens الدلالية. لا تشير إلى بدائي مباشرة أبدًا، ولا تثبّت ثيمًا بشكل صلب. مبدّل الثيم يغيّر الخريطة، والمكوّنات تُعاد رسمها، ولا ينكسر شيء. هذا هو النمط الوحيد الذي يتسع لأكثر من فريق من مصممين اثنين.
احترام تفضيلات النظام
يكشف المتصفح prefers-color-scheme عبر استعلامات وسائط CSS. والمنتج يجب أن يحترمه. التجربة الافتراضية لمستخدم فعّل الوضع الداكن على مستوى النظام هي الثيم الداكن، نقطة. المفتاح داخل التطبيق تحسين وليس بديلًا.
ثلاث قواعد لتنفيذ صحيح:
اتبع تفضيل النظام افتراضيًا عند أول تحميل. لا تتجاوز اختيار نظام تشغيل المستخدم بثيم فاتح لمجرد أن المصمم يفضّل النماذج الفاتحة.
احفظ اختيار المستخدم داخل التطبيق. إن بدّل المستخدم إلى الداكن داخل التطبيق، فإن هذا الاختيار يصمد عبر التحديثات ويتفوق على تفضيل النظام حتى يعيد ضبطه.
وفّر خيار "مطابقة النظام". المستخدمون الذين يريدون أن يقود إعداد النظام يحتاجون طريقًا للعودة إلى ذلك السلوك. المفتاح ثلاثي الحالات (فاتح، داكن، النظام) هو النمط المتوقع ويجب إطلاقه افتراضيًا.
اختبار الوضع الداكن
أخطاء الوضع الداكن تختبئ. مكوّن يبدو سليمًا في ملف التصميم، ويمر مراجعة الكود في الثيم الفاتح، ويُطلق بفشل تباين لا يظهر إلا حين يفتحه مستخدم ليلًا. انضباط الاختبار هنا صارم.
اختبار السطوع. افتح المنتج على لابتوب بسطوع 30 بالمئة في غرفة مظلمة. أي شيء يختفي، أي شيء يتلطخ، أي شيء يتوهج بشكل مزعج يُسجَّل كخطأ. هذا يلتقط الحدود الخفية أكثر من اللازم، والنص الساطع أكثر من اللازم، والألوان المميزة التي ما زالت مشبعة أكثر من اللازم.
تدقيق التباين. كل تغيير في الثيم يطلق فحص تباين كاملًا عبر كل الأزواج الدلالية. أدوات مثل axe وWAVE أو فاحص التباين المدمج في Figma تلتقط التراجعات التي تفوتها المراجعة البصرية.
مقارنة لقطات الشاشة. تُلتقط لقطات الوضعين الفاتح والداكن لكل شاشة رئيسية في كل إصدار. المقارنات البصرية تكشف انحراف الثيم غير المقصود قبل أن يكتشفه المستخدم.
اختبار الجهاز الحقيقي. هواتف OLED تعرض الأسطح الداكنة بشكل مختلف عن لابتوبات LCD. وضع داكن يبدو مثاليًا على MacBook كثيرًا ما يكشف تشرّطًا أو انتقالات حادة على iPhone. اختبر على هواتف فعلية، لا على محاكي الأجهزة في المتصفح فقط.
إخفاقات الوضع الداكن الشائعة
ثلاثة أنماط تسبب معظم مشكلات جودة إطلاق الوضع الداكن. وكلها يمكن تجنبها ببنية الـ tokens أعلاه.
الواجهة نصف المقلوبة. الأسطح الرئيسية انقلبت إلى الداكن، لكن مكوّنات مدفونة (نوافذ منبثقة، تلميحات، صفحات تسويقية، شاشات إدارة قديمة) ما زالت تُطلق بالوضع الفاتح. يبدّل المستخدم إلى الداكن فيقفز نصف المنتج إلى الأبيض عند النقر. الحل تدقيق كل سطح في المنتج، مع قائمة تحقق تتتبع تغطية الثيم لكل شاشة.
لحظة العلامة المكسورة. صفحات الهبوط التسويقية تبقى فاتحة بينما يتحول المنتج إلى الداكن، أو العكس. هوية العلامة تتشظى عبر رحلة المستخدم، ويبدو المنتج كشركتين. الحل الاتفاق مسبقًا على ما إذا كان الموقع التسويقي سيطلق الوضع الداكن. كلا الخيارين صحيح، لكن السطحين يجب أن يتطابقا.
تراجع إتاحة الاستخدام. الوضع الفاتح يُطلق متوافقًا مع WCAG AA، والداكن يفوّته في ثلاثة مواضع، ولا أحد يفحص حتى يأتي تدقيق الامتثال. الحل طبقة الـ tokens الدلالية مع فحص تباين آلي في CI. كل PR يشغّل فحص تباين. والإخفاقات تمنع الدمج.
إن أردت فريقًا يطلق الوضع الداكن كقرار نظام من الدرجة الأولى، من الـ tokens حتى الاختبار، وظّف Brainy. الوضع الداكن نادرًا ما يكون المشكلة الصعبة. المشكلة الصعبة هي إطلاق الزوج دون انحراف.
الأسئلة الشائعة
هل الأسود الخالص أفضل خلفية للوضع الداكن؟
لا. الأسود الخالص (#000000) يخلق تباينًا قاسيًا مع النص الأبيض ويزيل إشارات العمق البصرية التي تحتاجها العين لقراءة الارتفاع. استخدم رماديًا داكنًا بصبغة خفيفة من العلامة، عادة في نطاق #0B0B10 إلى #121218. العمق في الواجهة الداكنة يُقرأ كأسطح تصعد نحو المستخدم، وهذا يتطلب سطحًا بادئًا ليس أسود خالصًا.
كيف تصنع الارتفاع في الوضع الداكن دون ظلال؟
الارتفاع في الوضع الداكن يأتي من الإضاءة لا من الظلال. كل سطح مرتفع أفتح قليلًا من الذي تحته، فيتكوّن تدرج أسطح تتكدس نحو المستخدم. ظل داكن خفيف وإبراز علوي باهت جدًا يمكنهما تعزيز التأثير، لكن الإشارة الأساسية هي لون السطح نفسه.
هل يكفي أن يقلب الوضع الداكن ألوان الثيم الفاتح؟
لا. القلب يرفع تشبّع الألوان المميزة إلى مستويات مزعجة، ويُنزل النص الخافت دون حدود تباين WCAG، ويكسر نموذج الارتفاع الذي يعتمد على الظلال. الوضع الداكن ثيم ثانٍ مصمم من الصفر على نفس مجموعة المكوّنات، ثم يُوفَّق عبر tokens دلالية مشتركة.
كيف أتعامل مع الصور والفوتوغرافيا في الوضع الداكن؟
الصور المصوّرة على خلفيات بيضاء تكسر اتساق الثيم. الخيارات: إطلاق أصول موازية للوضع الداكن، أو إضافة حاوية فاتحة خفيفة حول كل صورة عند تفعيل الوضع الداكن، أو تطبيق فلاتر بعناية. الرسومات التوضيحية غالبًا تحتاج نسخة منفصلة للوضع الداكن. هذا أغلى جزء في الوضع الداكن وأكثرها تخطيًا.
كيف أبني الـ tokens لدعم الثيمين؟
ثلاث طبقات. البدائيات (قيم الألوان الخام)، والـ tokens الدلالية (أسماء قائمة على الدور مثل color.surface.base)، وخرائط الثيم (واحدة لكل ثيم، تحل كل token دلالي إلى بدائي). المكوّنات تستهلك الـ tokens الدلالية فقط، فيغيّر مبدّل الثيم الخريطة ولا ينكسر شيء. هذا النمط هو ما يجعل الوضع الداكن يتسع لأكثر من فريق صغير.
هل يحسّن الوضع الداكن إتاحة الاستخدام؟
لمن يعانون حساسية الضوء أو الصداع النصفي أو رهاب الضوء، نعم. أما لمن يحتاجون نصًا عالي التباين أو لديهم إدراك لوني محدد، فليس بالضرورة. الوضع الداكن خيار لإتاحة الاستخدام وليس مكسبًا تلقائيًا. الثيم الداكن المنفّذ جيدًا يستوفي قواعد تباين WCAG بنفس صرامة الثيم الفاتح، والمنفّذ بشكل سيئ يفشل فيها.
الوضع الداكن قرار نظام، لا مفتاح تبديل
منتج بثيم واحد وثيم ثانٍ مكسور أسوأ من منتج بثيم واحد نظيف. الوضع الداكن إما أن يُطلق موازيًا للثيم الفاتح، مصممًا بالكامل ومختبرًا بالكامل ومبنيًا على tokens بالكامل، أو لا يُطلق.
ابنِ طبقة الـ tokens أولًا. شغّل حسابات التباين ثانيًا. صمّم الثيم الداكن مقابل كل ارتفاع وكل مكوّن وكل حاوية صورة. اختبر بسطوع منخفض على أجهزة حقيقية. أطلق الثيمين معًا أو لا تطلق أيًّا منهما.
إن أردت عملًا في العلامة والويب والواجهات يتعامل مع الوضع الداكن كالتزام على مستوى النظام لا كمفتاح تفضيل، وظّف Brainy. ثيمان، منتج واحد، قرار تصميم متماسك واحد.
قراءات ذات صلة
- دليل أنظمة التصميم
- تباين الألوان القابل للوصول
- قائمة التحقق من إتاحة الويب
- نظرية الألوان للمصممين
- تصميم التسلسل الهرمي البصري
Want a product that ships dark mode as a system decision instead of a last-minute toggle? Brainy builds brand, web, and UI with both themes wired into the tokens from day one.
Get Started
