كيف تعمل رموز الوضع الداكن

رموز الوضع الداكن مجموعة قيم ثانية مرتبطة بالأسماء الدلالية نفسها المستخدمة في السمة الفاتحة، بحيث يعيد تبديل الوضع توجيه أسماء مثل --color-surface إلى ألوان أخرى دون أن يحتاج أي مكوّن إلى معرفة الوضع النشط.

لماذا لا ينفع العكس

النهج البديهي - قلب السطوع وتبديل الأبيض والأسود - ينتج سمة داكنة تبدو خاطئة بطرق يصعب تسميتها في البداية.

بعض الأسباب المحددة:

الأسود الخالص قاسٍ. معظم السمات الداكنة المتقنة تستخدم رماديًا شديد الدكنة، غالبًا بلمسة لونية خفيفة، بدل #000000. والنص الأبيض بتباين كامل على أسود خالص يسبب هالة، فيبدو النص وكأنه ينزف.

الألوان المشبعة تُقرأ أكثر سطوعًا على الداكن. أزرق يستقر مريحًا على الأبيض قد يهتز أمام خلفية داكنة. ولهذا تُخفَّض إشباعية نسخ الوضع الداكن *وتُفتَّح*، لا أن تُفتَّح فقط.

الارتفاع ينعكس. في السمات الفاتحة تُلقي الأسطح المرتفعة ظلالًا. وفي الداكنة يكاد الظل لا يُرى، فتُشار الأسطح المرتفعة بأن تصبح أفتح. ورموز الظل التي تعمل في وضع لا تحمل معلومة في الآخر.

نسب التباين لا تنجو من القلب. اقتران يجتاز AA في الفاتح قد يسقط في الداكن. كل اقتران يحتاج إعادة فحص، لا مجرد إعادة حساب.

البنية التي تجعله ينجح

الوضع الداكن مشكلة تسمية قبل أن يكون مشكلة لون. ولا يخرج نظيفًا إلا إذا كانت الطبقة الدلالية موجودة أصلًا.

:root {
  --color-surface: var(--grey-50);
  --color-text-primary: var(--grey-900);
}

[data-theme="dark"] {
  --color-surface: var(--grey-900);
  --color-text-primary: var(--grey-50);
}

المكوّنات تشير إلى --color-surface. ولا تعلم قط أن ثمة وضعًا. وإضافة سمة ثالثة لاحقًا كتلة أخرى بالشكل نفسه، لا تغييرًا في كل مكوّن.

أما إن أشارت المكوّنات إلى الرموز الأساسية مباشرة فلا يوجد ما يُعاد توجيهه، ويصير الوضع الداكن شرطًا في كل ملف.

ولّد الاثنين معًا

سمة داكنة تُضاف بعد ستة أشهر تعني مراجعة كل مكوّن. أما إن أُنتجت مع السمة الفاتحة من السلالم نفسها فهي مجانية.

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

أين يقع Flash DSM من هذا

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

• الرمز الدلالي
• رمز التصميم
• نظام التصميم