أنظمة ألوان الوضع الداكن: كيف تبني لوحة ألوان تعمل عند الثانية فجرًا
دليل عملي لأنظمة ألوان الوضع الداكن. نموذج ارتفاع الأسطح، وقاعدة خفض التشبع، ومعايرة الألوان المميزة، وسبع علامات تجارية تقدّم أنظف لوحات الوضع الداكن في 2026.
أنظمة ألوان الوضع الداكن: كيف تبني لوحة ألوان تعمل عند الثانية فجرًا
الوضع الداكن نظام موازٍ، والمنتجات التي تكتفي بقلب مفتاح على الوضع الفاتح هي التي تبدو معطوبة حين تنطفئ الأضواء.
هذا هو المقال كله في جملة واحدة. أما سبب فشل معظم الأوضاع الداكنة فأكثر تحديدًا: يلجأ المصممون إلى "اعكس اللوحة الفاتحة" فينتهون إما بسهول رمادية على رمادية، وإما بمرجاني كهربائي يحرق الشبكية. الحل معماري لا تجميلي. ابنِ نظامًا موازيًا بنموذج ارتفاع خاص به، وقواعد خفض تشبع خاصة به، ومعايرة ألوان مميزة خاصة به، وستبدو النتيجة مقصودة لأنها كذلك فعلًا.
الوضع الداكن نظام موازٍ لا عكس
لوحتك الفاتحة فيها رموز للخلفية والسطح والحدود والنص واللون المميز. لوحتك الداكنة تحتاج الرموز نفسها، وقيمها ليست عكس القيم الفاتحة. التشبع (Chroma) يتصرف بشكل مختلف عند الإضاءة المنخفضة. وتحولات الصبغة (Hue) تحدث عند الحد الإدراكي. ما يبدو مرجانيًا نظيفًا عند L 0.62 في الوضع الفاتح يتحول إلى نيون مرتجف عند L 0.72 في الوضع الداكن أمام سطح شبه أسود.
الفرق التي تقدّم أوضاعًا داكنة نظيفة لا تلمس زر تبديل. إنها تصمم لوحة ثانية، وتربطها بطبقة الرموز الدلالية نفسها، وتصل الاثنتين عبر مفتاح وضع في جذر السمة. هذا عمل أكثر. وهو النهج الوحيد الذي لا يحرجك.
نموذج ارتفاع الأسطح
الخلفية. السطح. السطح المرتفع. سطح التراكب. كل واجهة تصميم وضع داكن تعمل فعلًا فيها هذه الطبقات الأربع، وتخطي الطبقة الثالثة هو السبب الأكثر شيوعًا لشعور الواجهات الداكنة بالتسطح.
في الوضع الفاتح الارتفاع واضح: بطاقات بيضاء على خلفيات رمادية، والظلال رخيصة، والعمق مجاني. في الوضع الداكن تختفي الظلال أمام الأسطح الداكنة. يجب أن يسكن الارتفاع في إضاءة السطح نفسه. كل طبقة خطوة صغيرة مقصودة نحو الأفتح، لا قفزة.
الطبقات الأربع ليست خيارات جمالية. إنها بنية تحمل الحِمل. كل مكوّن في نظامك يجلس على إحدى هذه الطبقات، ووضوح كل زوج نص وسطح يعتمد على موضعه في الطبقات.
الخلفية تضع القاع
الخلفية هي أعمق طبقة. القاعدة: لا تستخدم الأسود الخالص (oklch(0 0 0)) بتشبع كامل. استخدم أسود قريبًا منه بصبغة خفيفة عند إضاءة تتراوح بين 8 و10 بالمئة. الصبغة دافئة في الغالب، لأن الأسود البارد يبدو أرخص وأبرد مما يستحقه المنتج.
قيمة مثل oklch(0.10 0.012 30) تعطيك فحمًا داكنًا دافئًا يُقرأ "أسود" على أي شاشة ويتجنب إحساس الفراغ الميت الذي يعطيه الأسود الخالص. تشبع 0.012 وزاوية صبغة 30 درجة (ميل دافئ طفيف) تكفي. أكثر من ذلك يصبح عكرًا. وأقل يصبح بلا حياة.
السطح يحمل المحتوى
السطح هو الطبقة التي يجلس عليها معظم المحتوى، مرتفعة قليلًا عن الخلفية. خطوة الإضاءة من الخلفية إلى السطح تبلغ عادة 3 إلى 5 نقاط في OKLCH. تلك الفجوة هي أول إشارة تقرؤها العين: هنا يعيش المحتوى، والخلفية خلفه.
إن oklch(0.14 0.010 30) مقابل oklch(0.10 0.012 30) يكفي لفصل بصري دون حد أو ظل. ينخفض التشبع قليلًا لأنه كلما زادت الإضاءة في الأسطح الداكنة، يجب أن يتراجع التشبع لتفادي النزف العكر نحو الخلفية. هذا دقيق عند العرض وخاطئ تمامًا إن تجاهلته.
السطح المرتفع وسطح التراكب
الأسطح المرتفعة تحمل البطاقات واللوحات. أسطح التراكب تحمل النوافذ المنبثقة والأوراق السفلية. تستمر متوالية الإضاءة: السطح المرتفع عند نحو oklch(0.18 0.008 30)، وسطح التراكب عند oklch(0.22 0.007 30). ينخفض التشبع مع كل خطوة لأن الأعلى في الطبقات يعني الأقرب إلى المشاهد، وتلك الأسطح يجب أن تبدو نظيفة.
سبب انهيار معظم الواجهات الداكنة إلى عصيدة رمادية مسطحة أن المصممين يستخدمون طبقتين: خلفية وسطح. البطاقات على الخلفية، والنص على السطح، وكل شيء يُقرأ بالعمق نفسه. أضف الطبقة الثالثة والرابعة فتكتسب الواجهة وضوحًا فورًا دون ظل واحد.
قاعدة خفض التشبع
الألوان المشبعة التي تنجح في الضوء تحرق ليلًا. القاعدة: اخفض تشبع الألوان المميزة بنسبة 15 إلى 25 بالمئة، واخفض تشبع النص والحدود أكثر. الأمر ليس تعتيمًا للعلامة. إنه يتعلق بكيفية معالجة العين للتشبع تحت إضاءة محيطة منخفضة.
تحت إضاءة محيطة عالية (المكتب عند الظهر) يُقرأ التشبع الحي نابضًا بالحيوية. تحت إضاءة منخفضة (المكتب عند منتصف الليل) يُقرأ التشبع نفسه عدوانيًا ومشعًّا بهالة ومزعجًا جسديًا. الحل ليس الخوف من اللون. إنه معايرته. تبقى العلامة معروفة. ويتوقف المنتج عن إيذاء العين.
لماذا النص الأبيض الخالص خطأ
الأبيض الخالص على شبه الأسود ليس تباينًا عاليًا، بل تباين زائد. تأثير الهالة، حيث يبدو النص الساطع وكأنه ينزف في محيطه الداكن، ظاهرة بصرية موثقة تجعل الواجهات الداكنة أصعب قراءةً لا أسهل.
القيمة الصحيحة للنص الأساسي في الوضع الداكن حول 90 إلى 95 بالمئة إضاءة مع لمسة صبغة دافئة. oklch(0.93 0.005 60) يُقرأ "أبيض" ولا يصنع هالة. النص الثانوي ينخفض إلى oklch(0.70 0.010 60)، مقروء بحجم النص الأساسي ومتراجع بصريًا أمام النص الأساسي. الأبيض المائل هو القيمة التي يخطئ فيها المصممون أكثر من غيرها، لأنه يبدو كحل وسط وهو في الواقع القيمة الصحيحة.
معايرة اللون المميز تُبقي العلامة معروفة
يجب أن تُقرأ ألوان العلامة المميزة في الوضع الداكن دون أن تفقد هويتها. المعايرة رفع في الإضاءة مع خفض في التشبع، لا تغيير في الصبغة. إذا كان اللون المميز في الوضع الفاتح oklch(0.62 0.22 25)، فاللون المميز في الداكن oklch(0.72 0.17 25). الصبغة نفسها. إضاءة أعلى ليبرز أمام الأسطح الداكنة. تشبع أقل كي لا يصنع هالة.
الخطأ أن تعامل الوضع الداكن كمكان تُعتَّم فيه الألوان المميزة. التعتيم يقتل تمييز العلامة. رفع الإضاءة وخفض التشبع يحافظان على إحساس لوحة ألوان العلامة ويمنعان الحرق البصري. المستخدم لا يلاحظ التعديل. يلاحظ أن المنتج يبدو جيدًا.
تمريرة التباين التي تفوتها WCAG
نسب التباين في WCAG 2.1 تُمرّر الكثير من الواجهات الداكنة القبيحة. نسبة 4.5:1 بين سطح داكن ونص رمادي خافت قد تنجح في WCAG وهي صعبة القراءة فعلًا في ظروف الإضاءة المحيطة. التمريرة الثانية هي APCA، الذي ينمذج إدراك الإضاءة بدقة أكبر، خصوصًا في التمييز بين الفاتح على الداكن.
بعد APCA، أجرِ اختبار العين. الارتعاش (Shimmer) هو الاهتزاز الذي تراه حين يجتمع لونان بإضاءة متقاربة وتشبع مختلف. الهالة (Halo) هي نزف العناصر الساطعة في محيطها الداكن. التوهج (Bloom) هو الوهج المُدرَك على الألوان المميزة المشبعة. وجود أي منها يعني أن الزوج فاشل مهما كانت النسبة. أصلح القيم لا النسبة. وللتعمق أكثر في آليات تباين الألوان القابل للوصول، تغطي المنهجية الكاملة حالات حدّية لا يكشفها تدقيق الوضع الفاتح.
سبع علامات تقدّم لوحات داكنة نظيفة
Linear وNotion وVercel وStripe وGitHub وArc وRaycast، كل منها يحل الوضع الداكن بشكل مختلف. الأنماط المشتركة بينها هي التي تستحق السرقة.
| العلامة | نموذج الأسطح | استراتيجية اللون المميز | ما تُحسنه |
|---|---|---|---|
| Linear | أربع طبقات حقيقية بخطوات ضيقة | بنفسجي مرفوع، تشبع ~0.15 | خطوات ضيقة لدرجة أن العمق يبدو سلسًا |
| Notion | ثلاث طبقات مع تراكب | استخدام ضئيل للون المميز في الداكن | تشبع شبه معدوم، وعمق كامل |
| Vercel | ثنائي (خلفية + مرتفع) | أبيض فقط | بسيط بقسوة؛ ينجح لأنه يلتزم |
| Stripe | أربع طبقات بصبغة دافئة | أزرق معايَر لا مخفَّض | البيانات الكثيفة تُقرأ بوضوح في كل طبقة |
| GitHub | ثلاث سمات مسماة (داكن، خافت، عالي التباين) | أزرق مخضر، منزوع التشبع | "الخافت" هو الافتراضي الصحيح |
| Arc | تلوين مخصص لكل مساحة | صبغة يحددها المستخدم بالكامل | الارتفاع من تحول الصبغة لا الإضاءة |
| Raycast | طبقتان مع تمويه كثيف | لون برتقالي مميز مرفوع بجرأة | التمويه يخلق ارتفاعًا ضمنيًا |
Linear هو التطبيق المرجعي. خطوات الأسطح ضيقة بما يكفي ليُقرأ الواجهة كحقل داكن واحد بعمق حقيقي. البنفسجي المميز يُعرف بأنه بنفسجي Linear دون أن يحرق العين. والتسلسل الطباعي يعتمد على خطوات الإضاءة في رموز النص، لا على الحجم وحده.
Vercel يثبت أن النموذج الثنائي ينجح إذا التزمت به بالكامل. لا سطح ثالث. لا حالات رمادية. كل شيء إما خلفية عميقة أو سطح مرتفع قليلًا، والالتزام بالأحادية اللونية يجعله يبدو قرارًا تصميميًا لا قيدًا. معظم الفرق لا تستطيع تنفيذ هذا لأن لديها ألوان حالة ورسومًا توضيحية ولحظات علامة تحتاج إلى ارتفاع.
خيار "الخافت" في GitHub هو الفكرة الصحيحة المطبقة على النطاق الخطأ. بنوه كنسخة من السمة، لكن الدرس الحقيقي أن السطح الداكن الدافئ الصبغة أريح للقراءة الطويلة من الافتراضي الأبرد. كل وضع داكن يجب أن يعمل دافئًا افتراضيًا.
تريد وضعًا داكنًا يبدو مقصودًا عند الثانية فجرًا بدل أن يبدو معكوسًا عند الظهر؟ تصمم Brainy أنظمة ألوان داكنة موازية مع نموذج الارتفاع ومعايرة الألوان المميزة وخريطة رموز OKLCH جاهزة للإسقاط في Figma وCSS. وظّف Brainy.
خريطة رموز الوضع الداكن العاملة
خريطة الرموز أدناه تقدّم وضعًا داكنًا حقيقيًا بإحداثيات ألوان OKLCH. الأوليات (Primitives) هي القيم الخام. الدلاليات (Semantics) هي الأدوار. ضع الأوليات في مجموعة متغيرات Figma كقيم خام. اربط الدلاليات بالأوليات كأسماء مستعارة. هذه البنية ثنائية الطبقات هي نظام الرموز كله.
| الرمز | الدور | قيمة OKLCH | ما يقابلها بـ Hex |
|---|---|---|---|
--color-bg | قاع الخلفية | oklch(0.10 0.012 30) | #191512 |
--color-surface | سطح المحتوى الافتراضي | oklch(0.14 0.010 30) | #221e1a |
--color-surface-elevated | البطاقات واللوحات | oklch(0.18 0.008 30) | #2c2723 |
--color-surface-overlay | النوافذ المنبثقة والقوائم والأوراق | oklch(0.22 0.007 30) | #35302c |
--color-text-primary | النص الأساسي والعناوين | oklch(0.93 0.005 60) | #edeae5 |
--color-text-secondary | التسميات التوضيحية والوسوم والبيانات الوصفية | oklch(0.70 0.010 60) | #b0a89e |
--color-text-disabled | حالات التعطيل | oklch(0.45 0.005 60) | #6e6860 |
--color-border-subtle | الفواصل والخطوط الرفيعة | oklch(0.22 0.008 30) | #36302b |
--color-border-default | حدود الحقول والبطاقات | oklch(0.28 0.010 30) | #433d37 |
--color-accent | CTA الأساسي والحالات النشطة | oklch(0.72 0.17 25) | #e0816a |
--color-accent-muted | التحويم واللون المميز الثانوي | oklch(0.65 0.12 25) | #c27060 |
--color-accent-subtle | خلفية مصبوغة خلف عناصر اللون المميز | oklch(0.16 0.04 25) | #2a1e1a |
تتراوح الصبغة بين 25 و30 درجة طوال النظام (منطقة المرجاني الدافئ). يتماسك النظام لأن درجة الحرارة ثابتة من القاع إلى السقف. تبديل الصبغة إلى 250 درجة يعطيك لوحة شبيهة بـ Linear. وتبديلها إلى 200 درجة يعطيك لوحة قريبة من Vercel. البنية لا تتغير. الصبغة وحدها تتغير.
عند التنفيذ، يتحول الجدول كله إلى خصائص CSS مخصصة على :root[data-theme="dark"]. وفي Figma، كل صف متغير في مجموعة وضع "Dark". هذه البنية ثنائية المجموعات هي ما يجعل نظام التصميم قابلًا للتوسع عبر الأسطح.
تبديل الوضع، التنفيذ الذي لا يومض
يُحل التبديل بين الأوضاع دون وميض السمة الخطأ بضبط مخطط الألوان على عنصر html قبل تشغيل أي JavaScript. أي نهج آخر خاطئ في حالة حدّية واحدة على الأقل.
النمط: اقرأ localStorage بحثًا عن تفضيل محفوظ داخل وسم <script> مضمّن حاجب في <head>. طبّق data-theme="dark" أو data-theme="light" على عنصر html بشكل متزامن، قبل أن يُعرض CSS الذي يشير إلى الخصائص المخصصة. لا React. لا useEffect. لا وميض.
<script>
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.dataset.theme = saved ?? (prefersDark ? 'dark' : 'light');
</script>
هذا السكربت حاجب عن قصد. يعمل قبل العرض. وميض المحتوى غير المنسق سببه تطبيق السمة في JavaScript بعد أول رسم، وهذا السكربت الحاجب الواحد يقضي عليه تمامًا.
تفضيل النظام والافتراضي والتجاوز
يجب أن يتبع الافتراضي تفضيل نظام التشغيل. ويجب أن يُحفظ تجاوز المستخدم في localStorage. ويجب أن يعرض المفتاح ثلاث حالات: النظام، والفاتح، والداكن.
مفتاح بحالتين خطأ تصميمي. المستخدم الذي ضبط نظامه على الداكن ويريد من التطبيق أن يتبعه لا يريد إدارة مفتاح ثانٍ. يحتاج المفتاح إلى حالة "النظام" تمسح التجاوز المخزن وتترك تفضيل نظام التشغيل يقود. معظم التطبيقات تبني حالتين ثم تتلقى تذكرة دعم كلما غيّر أحدهم سمة نظامه وتساءل لماذا لم يتبعه التطبيق.
الأسئلة الشائعة
هل استخدام الألوان المميزة في الوضع الداكن يضر ببطارية OLED؟
الألوان المميزة تغطي مساحة سطح صغيرة في واجهة نموذجية. توفير البطارية من الوضع الداكن على OLED يأتي بالكامل تقريبًا من مساحات الأسطح الداكنة. زر CTA مرجاني على خلفية داكنة لا يغير استهلاك البطارية بشكل يُذكر. الخلفيات السوداء الخالصة تهم. والرسوم التوضيحية المشبعة بملء الشاشة تهم. الزر لا يهم.
هل يمكنني استخدام لون علامتي في الوضع الفاتح مباشرة كلون مميز في الوضع الداكن؟
ليس دون معايرة. إذا كان لون علامتك في الوضع الفاتح عند L 0.55 إلى 0.65 في OKLCH، فاستخدامه مباشرة على سطح داكن سيكون إما ضعيف الأداء (خافتًا فلا يبرز) أو مشعًّا بهالة (حيًّا زيادة أمام الإضاءة المحيطة الداكنة). ارفع الإضاءة بمقدار 8 إلى 12 نقطة. واخفض التشبع بنسبة 20 إلى 30 بالمئة. وأبقِ الصبغة. هذا هو اللون المميز المعايَر للوضع الداكن.
ما الحد الأدنى القابل للتطبيق لوضع داكن في نظام لا يملك واحدًا بعد؟
الخلفية، والسطح، والسطح المرتفع، والنص الأساسي، والنص الثانوي، واللون المميز. ستة رموز. ليس كاملًا، لكنه نظام. يمكن لكل مكوّن أن يرتبط بإحدى هذه القيم الست، ونموذج الارتفاع موجود للتوسع، ويمكنك شحنه دون إحراج. ابدأ من هنا، لا من مئة رمز بلا بنية.
هل الوضع الداكن المولَّد تلقائيًا مقبول يومًا؟
للنماذج الأولية والأدوات الداخلية والمنتجات التي فيها مصمم واحد نشط، يُقبل عكس آلي مع تعديلات التشبع كنقطة بداية. أما كوضع داكن مُشحون لمنتج له معايير علامة ومستخدمون حقيقيون، فلا. الأوضاع الداكنة الآلية تفشل في الألوان المميزة، وتفشل في الرسوم التوضيحية، وتفشل في حالات المكونات. هي مخطط أولي لا نظام منتهٍ.
هل يجعل OKLCH بناء الوضع الداكن أسهل؟
بشكل كبير. محور الإضاءة المنتظم إدراكيًا في OKLCH يعني أن خطوات الإضاءة بين طبقات الارتفاع تتصرف كما هو متوقع عبر الصبغات. في HSL، خطوة من 5 نقاط عند البرتقالي تبدو مختلفة عن خطوة 5 نقاط عند الأزرق. في OKLCH لا. بناء نموذج الارتفاع في OKLCH يعني أن الخطوات تبدو متسقة مهما كانت صبغة اللون المميز. الحجة الكاملة لـألوان OKLCH تغطي الرياضيات بعمق.
هل يجب أن تختلف الرموز الدلالية بين الفاتح والداكن أم الأوليات فقط؟
الأوليات تختلف. الدلاليات تبقى كما هي. --color-surface تعني "سطح المحتوى الافتراضي" في الوضعين. والأولية التي تشير إليها مختلفة في الوضع الداكن. هذا هو جوهر البنية ثنائية الطبقات. المكونات تشير إلى الدلاليات. والدلاليات تشير إلى الأوليات. ومفتاح الوضع يعيد تعيين الأوليات. فتتحدث المكونات تلقائيًا وبشكل صحيح.
التحول الذي تفتحه أنظمة الوضع الداكن فعلًا
الوضع الداكن الحقيقي سطح تصميم موازٍ. ليس فكرة لاحقة. وليس مفتاح إعدادات. إنه سطح ثانٍ ببنيته وقيوده وقرارات حرفته الخاصة. الفرق التي تعامله هكذا تشحن منتجات تبدو مقصودة عند الثانية فجرًا. والفرق التي تقلب مفتاحًا تشحن منتجات تبدو وكأن أحدهم نسي أن يُنهيها.
نموذج الارتفاع هو الأساس. وقاعدة خفض التشبع ومعايرة اللون المميز هما طبقة الحرفة. وخريطة رموز OKLCH هي التنفيذ. والمفتاح ثلاثي الحالات مع تبديل الأوضاع دون وميض هو شرط الشحن. كل قطعة مترابطة. ولا شيء منها اختياري إن أردت نتيجة جيدة.
ابنِ النظام الموازي. اشحن الخريطة. الفرق يظهر.
تريد وضعًا داكنًا يبدو مقصودًا عند الثانية فجرًا بدل أن يبدو معكوسًا عند الظهر؟ تصمم Brainy أنظمة ألوان داكنة موازية مع نموذج الارتفاع ومعايرة الألوان المميزة وخريطة رموز OKLCH جاهزة للإسقاط في Figma وCSS. وظّف Brainy.
جارٍ الآن الحفظ في drafts/dark-mode-color-systems.md.
Want a dark mode that looks intentional at 2 a.m. instead of inverted at noon? Brainy designs parallel dark color systems with the elevation model, accent calibration, and the OKLCH token map ready to drop into Figma and CSS.
Get Started
