الوضع المظلم والراحة البصرية

1) لماذا موضوع مظلم

راحة العين في الإضاءة المنخفضة والوهج الأقل و «ومضات الضوء».
الطاقة: تنفق الشاشات الداكنة بطارية أقل على OLED/AMOLED.
ركز على البيانات: ركز على المحتوى وليس الخلفية.
توقعات المستخدم: علم النظام «يفضل نظام الألوان» هو المعيار الفعلي.

2) المبادئ

1. خلفية رمادية داكنة> أسود نقي لأسطح واجهة المستخدم (سهولة قراءة وتدرج أفضل).
2. التناقض في المحتوى: ليس «أبيض باللون الأسود»، ولكن ظلال ناعمة للنصوص الطويلة.
3. «اللمعان» الحذر: الأضواء الخلفية/اللهجات مكتومة، لكنها مميزة.
4. الظل ≠ العمق: نحن نعمل مع الظل الخفيف/غير الواضح، وليس التباين الحاد.
5. التوافر: WCAG AA (الحد الأدنى)، التركيز المرئي والحالات المفهومة.
6. إعدادات النظام أساسية: التبديل التلقائي و «تقليل الحركة».

3) اللوحة والرموز (مثال)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• اللهجات في الوضع المظلم أخف بنسبة 8-12٪ من الوضع الخفيف.
• استخدم المقياس الرمادي (4-5 خطوات)، وتجنب # 000 المطلق للمساحات الكبيرة (استثناء - وضع AMOLED).

4) النص وسهولة القراءة

نص الجسم: رمادي فاتح «# E6E8EB» إلى «# 0E1116» (على النقيض ~ 12:1).
النص الثانوي: «# A6AEB8» ؛ تلميحات - خطوة أكثر قتامة/أكثر شفافية.
القراءة الطويلة: ظلال دافئة قليلاً (قلل من «الهالة»).

الروابط - لهجة + خط افتراضي ؛ اللون ≠ الوسيلة الوحيدة للمعنى

5) الأسطح والعمق والزجاج

المرتفعات: 'base' → 'elev1' → 'elev2' ؛ كل طبقة أخف/أكثر دفئًا بنسبة 2-4٪.
الظلال ناعمة وواسعة وذات عتامة منخفضة ؛ تجنب السكتات الدماغية «المتوهجة».
الألواح الشفافة (الضبابية) مناسبة إلى حد ما ؛ يقارن النص بالنص الأساسي.
الحدود شبه رقيقة "-bd-noft' أو بالكاد مرئية" ورثة ".

6) الدول والتركيز

تحوم: + 2-3٪ خلفية أخف ؛ نشط: − 2-3٪ (أغمق).
التركيز: حلقة واضحة (على سبيل المثال 'outline: 2px solid # 6EA0FF; الموجز: 2px ؛ ')، مرئية على أزرار اللهجة.
المعوقون: الحد من التباين بعناية ؛ لا تقل عن المستوى المقروء للنص.

7) الأزرار والنماذج والجداول

الأساسي: الخلفية «-لكنة»، النص «# 0E116».
ثانوي: الخلفية '-bg-elev1'، الحدود '-bd-strong'، النص '-fg-primary'.
حقول المدخلات: الخلفية '-bg-elev1'، مع التركيز - حدود اللكنة ؛ العنصر الباهت، ولكن يمكن قراءته.
الجداول: خلفية الحمار الوحشي بالكاد ملحوظة، اختيار الصف عند التحليق أخف بنسبة 2-3٪.

8) الرسوم التوضيحية والشعارات والصور

الشعارات والرسوم البيانية - إصدارات انعكاسية في الظلام ؛ تجنب الخطوط الخفيفة الرقيقة على خلفيات مشبعة.
الصورة: أضف قناعًا داكنًا (40-60٪) للرؤوس المتباينة في الأعلى.
الأيقونات: سمك واحد، كونتور + حشوة - حسب الحالة، وليس ألوانًا «سامة».

9) تصور البيانات في موضوع مظلم

ألوان الصفوف معتدلة التشبع ؛ على الأقل 5 نغمات مميزة.
الشبكات والفؤوس - صامتة (ألفا 20-30٪)، التوقيعات - '-- fg-smuted'.
الشروح/الحوادث حية ولكن يمكن قراءتها ؛ خط مع الشكل/العلامة، وليس فقط اللون.
بيانات فارغة/تأخر - «ضباب» ناعم، وليس حقول بيضاء.

10) الأداء والبطارية

يوفر OLED حقًا اللون الأسود النقي (# 000) - استخدم في وضع AMOLED وفقًا لخيار المستخدم.
تجنب التوهج/الضبابية الكبيرة الصلبة على وحدات معالجة الرسومات الضعيفة.
الاحترام «يفضل الحركة المخفضة»: تبسيط الرسوم المتحركة/التحولات.

11) السلوك والتبديل

الافتراضي هو اتباع «نظام تفضيل الألوان».
امنح المستخدم مفتاحًا صريحًا (الضوء/الظلام/النظام)، واحتفظ بالاختيار (ملف تعريف الارتباط/التخزين المحلي).
عند تغيير الموضوع - لا ومضات: فصل سمي مسبق قبل العرض.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) التوافر (A11y)

تباين النص ≥ 4. 5:1 (عادي)، ≥ 3:1 (كبير).
لا ترمز الحالة باللون فقط: استخدم الأيقونة/النمط/التوقيع.
أنماط التركيز والتنقل في لوحة المفاتيح إلزامية.
VoiceOver/TalkBack: الأدوار، التسميات، طابور الطابا.

13) الأنماط المضادة

نص أبيض تمامًا على خلفية سوداء تمامًا في مناطق كبيرة - «وميض» وإرهاق.
لهجات النيون على الظلام - «ضوضاء خفيفة».
ظلال عالية التباين (رمادي على أسود مع حدود صلبة).
نص شفاف في الصورة بدون قناع.
عنصر عضوي متلاشي (ألفا منخفض جدًا).

14) أمثلة على المكونات

زر

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

بطاقة

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) خطة الاختبار

الإضاءة: غرفة مظلمة/ضوء النهار/مساء الشارع.
الأجهزة: OLED و IPS، الهاتف المحمول/سطح المكتب، كثافات مختلفة.
A11y: مدقق التباين، بطاقة لوحة المفاتيح، سهولة قراءة العناصر الإضافية.
الإدراك: اختبار ab «إجهاد العين» وأخطاء الإدخال في الليل.
الأداء: مقاييس RUM (INP/CLS) بعد إدراج موضوع مظلم ؛ حمل وحدة معالجة الرسومات (تأثيرات الضبابية/الظل).

16) مقاييس الجودة

التباين Violations/1k العناصر (الهدف: → 0).
معدل الشكوى على «مظلم للغاية/مشرق».
الانتهاء من الجلسة الليلية (المقاييس السلوكية حسب الجلسة 22: 00-06: 00).
INP/CLS p75 في الوضع المظلم مقابل الضوء (ليس أسوأ من الأساسي).
وضع الاشتراك المظلم والاحتفاظ بالمستخدمين الذين يختارون سمة.

17) قائمة التحقق من الإطلاق

• لوحة سرية داكنة بمستويات 4-5 سطح
• تناقض النص/الأيقونات/الحدود يقابل WCAG AA
• أنماط وحالات التركيز المرئية (تحوم/نشطة/معطلة)
• تم تعديل الشعارات/الأيقونات/الصور، وإضافة أقنعة في الصورة
• الرسوم البيانية - الشبكات الصامتة، والتعليقات التوضيحية القابلة للقراءة، والصفوف غير السامة
• مفتاح الضوء/الظلام/النظام، اختيار الحفظ بدون «فلاش»
• احترام «نظام تفضيل الألوان» و «يفضل الحراك المخفض»
• RUM/perf-dashboard، تنبيهات الانحدار

18) خطة التنفيذ (3 تكرارات)

1 التكرار - المؤسسة (1-2 أسابيع)

اللوحة/الرموز، الأسطح الأساسية (القاعدة/elev1/elev2)، النص/الحدود، الأزرار/الحقول/الجداول، مفتاح السمة.

التكرار 2 - الحبيبية (3-4 أسابيع)

الرسوم البيانية والرسوم التوضيحية في الظلام، والأقنعة في الصورة، والتركيز/الحالات، والرسوم المتحركة مع مراعاة الحركة المنخفضة، والتدقيق.

التكرار 3 - التحسين (مستمر)

وضع AMOLED كخيار، وتناقضات دقيقة، واختبارات قابلية الاستخدام في الليل، ومقارنة Light vs Dark RUM، وعمليات تدقيق منتظمة للعلامة التجارية/UX.

19) الأسئلة الشائعة الصغيرة

هل يجب أن أصنع خلفية سوداء خالصة ؟

بالنسبة لواجهة المستخدم، يكون الرمادي الداكن العميق أفضل ؛ اترك # 000 مع خيار «وضع AMOLED».

هل أحتاج إلى زيادة تشبع اللهجات ؟

في الظلام - عادة، على العكس من ذلك، يضيء قليلاً ويقلل من التشبع حتى لا «يتوهج».

ماذا عن صور اللافتات ؟

أضف خلفية/قناع مظلم، وتحقق من تباين النص والشعار.

المجموع

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