تصميم الويب بالوضع الداكن: أفضل الممارسات ودليل التنفيذ

تطور الوضع الداكن من تفضيل للمطورين إلى توقع تصميم سائد. أكثر من 80% من المطورين يستخدمون الوضع الداكن في IDE الخاص بهم، وتشمل أنظمة التشغيل الرئيسية الآن سمات داكنة على مستوى النظام. يتوقع المستخدمون أن تحترم المواقع والتطبيقات تفضيلاتهم. يغطي هذا الدليل مبادئ التصميم ونظرية الألوان وتنفيذ CSS واعتبارات إمكانية الوصول اللازمة لإنشاء تجربة وضع داكن فعالة.

لماذا الوضع الداكن مهم

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

ومع ذلك، يمكن أن يكون الوضع الداكن المنفذ بشكل سيئ أسوأ من عدم وجوده. التباين العالي بين النص الأبيض النقي والخلفية السوداء النقية يمكن أن يسبب تأثير الهالة، حيث يبدو النص ضبابيًا أو متوهجًا. المفتاح هو إيجاد التوازن الصحيح بين التباين والراحة.

نظرية الألوان للوضع الداكن

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

لون الخلفية

تجنب استخدام الأسود النقي (#000000) كخلفية. الأسود النقي يخلق تباينًا مفرطًا مع النص الأبيض، مما يسبب إجهاد العين. بدلاً من ذلك، استخدم رماديًا داكنًا مع لمسة لونية خفيفة تضيف عمقًا واهتمامًا بصريًا.

لون النص

وبالمثل، تجنب استخدام الأبيض النقي (#ffffff) لنص الجسم. استخدم درجات الأبيض المائل للكريمي التي تحافظ على قابلية القراءة مع تقليل الوهج. احتفظ بالأبيض النقي للعناوين والتأكيد.

• النص الأساسي: #e2e8f0 أو #f1f5f9، قراءة مريحة
• النص الثانوي: #94a3b8، للأوصاف والتسميات
• النص المعطل: #64748b، للعناصر غير النشطة

لون التمييز

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

تنفيذ CSS

أكثر نهج قابل للصيانة للوضع الداكن هو استخدام خصائص CSS المخصصة (المتغيرات) مع استعلام الوسائط prefers-color-scheme. هذا يسمح لك بتعريف الألوان مرة واحدة وتبديل السمات عن طريق تغيير قيم المتغيرات.

استخدام خصائص CSS المخصصة

:root {
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --text: #1e293b;
  --text-muted: #64748b;
  --primary: #3b82f6;
  --border: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --primary: #60a5fa;
    --border: #334155;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

استخدام JavaScript للتبديل اليدوي

بينما يتعامل prefers-color-scheme مع تفضيلات النظام، يحتاج المستخدمون أيضًا إلى تبديل يدوي. خزّن التفضيل في localStorage وطبقه عبر سمة data على العنصر الجذري.

function toggleTheme() {
  const current = document.documentElement.dataset.theme;
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.dataset.theme = next;
  localStorage.setItem('theme', next);
}

// On page load
const saved = localStorage.getItem('theme');
if (saved) {
  document.documentElement.dataset.theme = saved;
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.dataset.theme = 'dark';
}

ثم في CSS، استخدم محدد السمة مع نهج استعلام الوسائط:

[data-theme="dark"] {
  --bg: #0f172a;
  --bg-card: #1e293b;
  --text: #e2e8f0;
}

التعامل مع التسلسل الهرمي والعمق

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

• المستوى 0: الخلفية الأساسية (الأعمق)
• المستوى 1: البطاقات والحاويات (أفتح قليلاً)
• المستوى 2: العناصر العائمة مثل القوائم المنسدلة (أفتح)
• المستوى 3: النوافذ المنبثقة والحوارات (أفتح سطح مرتفع)

الصور والوسائط في الوضع الداكن

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

[data-theme="dark"] img {
  filter: brightness(0.9);
}

[data-theme="dark"] .logo-dark {
  display: inline-block;
}

[data-theme="dark"] .logo-light {
  display: none;
}

اعتبارات إمكانية الوصول

يجب أن يفي الوضع الداكن بنفس معايير إمكانية الوصول مثل الوضع الفاتح. تتطلب إرشادات WCAG 2.1 حدًا أدنى للتباين 4.5:1 للنص العادي و 3:1 للنص الكبير. اختبر سمة الوضع الداكن باستخدام أدوات فحص التباين لضمان الامتثال.

• لا تعتمد أبدًا على اللون وحده: استخدم الأيقونات أو الأنماط أو التسميات مع اللون لنقل المعلومات.
• اختبر مع قارئ الشاشة: تأكد من أن تبديل السمة قابل للوصول ويعلن عن حالته.
• احترم prefers-reduced-motion: عطّل أو قلل الرسوم المتحركة للمستخدمين الذين يفضلون تقليل الحركة.
• وفر مؤشرات تركيز كافية: يجب أن تكون حلقات التركيز مرئية في كلا السمتين. استخدم لون مخطط متباين.

أخطاء الوضع الداكن الشائعة

• استخدام خلفية سوداء نقية: ينتج تباينًا مفرطًا وتأثير هالة. استخدم رماديًا داكنًا بدلاً من ذلك.
• نسيان ضبط الظلال: الظلال الداكنة على الخلفيات الداكنة غير مرئية. استخدم ألوان سطح أفتح للإشارة إلى التسلسل الهرمي.
• تجاهل الصور: الصور الساطعة على الخلفيات الداكنة تخلق تنافرًا بصريًا. طبق مرشحات السطوع أو قدم متغيرات داكنة.
• ترميز الألوان بشكل ثابت: يجعل تبديل السمة مستحيلاً. استخدم دائمًا خصائص CSS المخصصة.
• عدم تخزين تفضيلات المستخدم: يشعر المستخدمون بالإحباط إذا تمت إعادة تعيين السمة عند التنقل. خزّن التفضيل في localStorage.
• وميض المحتوى غير المنسق (FOUC): استخدم برنامجًا نصيًا مضمنًا قبل CSS لتعيين السمة، ليصبح ساريًا قبل عرض الصفحة.