دروس تعليمية

تطبيق الوضع الداكن: دليل المطوّر الشامل

قراءة 4 دقيقة

انتقل الوضع الداكن من تفضيل نادر إلى ميزة متوقعة. يمكن للمستخدمين على كل منصة — macOS وWindows وAndroid وiOS — تعيين مظهر داكن على مستوى النظام، ويتوقعون أن تحترم المواقع والتطبيقات هذا الإعداد. يتطلب تطبيق الوضع الداكن بشكل صحيح أكثر من مجرد تبديل الأبيض بالأسود: بل يستلزم نهجاً منهجياً للألوان والتباين وتحكم المستخدم. يستعرض هذا الدليل العملية الكاملة، من بنية CSS إلى آلية تبديل JavaScript إلى الاختبار الشامل لكلا الثيم.

خصائص CSS المخصصة للثيمات

أكثر الطرق قابلية للصيانة للتعامل مع الوضع الداكن في CSS هي الخصائص المخصصة (تُعرف أيضاً بمتغيرات CSS). بدلاً من تشتيت قيم الألوان في جميع أنحاء الأوراق الأنماط، تعرّف كل لون كمتغير على :root ثم تُعيد تعريف تلك المتغيرات للوضع الداكن. تشير أنماط المكونات فقط إلى المتغيرات — وليس إلى أكواد hex المباشرة.

تعريف لوحتَي اللونين الفاتح والداكن

ابدأ بلوحة ألوان الوضع الفاتح كإعداد افتراضي:

:root {
  /* الخلفيات */
  --color-bg-base:      #FFFFFF;
  --color-bg-elevated:  #F8F9FA;
  --color-bg-overlay:   #F1F3F5;

  /* النصوص */
  --color-text-primary:   #1A1A2E;
  --color-text-secondary: #4A4A6A;
  --color-text-muted:     #6C757D;

  /* الحدود */
  --color-border:         #DEE2E6;
  --color-border-strong:  #ADB5BD;

  /* العلامة التجارية / اللون المميز */
  --color-accent:         #3B82F6;
  --color-accent-hover:   #2563EB;

  /* التغذية الراجعة */
  --color-success:  #22C55E;
  --color-warning:  #F59E0B;
  --color-danger:   #EF4444;
}

ثم عرّف التعديلات للوضع الداكن في كتلة منفصلة. الفكرة الأساسية هي أنك لا تعكس الألوان فحسب — بل تختار لوحة ألوان مختلفة مصمَّمة خصيصاً للسطح الداكن:

[data-theme="dark"] {
  /* الخلفيات */
  --color-bg-base:      #0F0F17;
  --color-bg-elevated:  #1A1A2E;
  --color-bg-overlay:   #252540;

  /* النصوص */
  --color-text-primary:   #E8E8F0;
  --color-text-secondary: #A8A8C0;
  --color-text-muted:     #6A6A88;

  /* الحدود */
  --color-border:         #2E2E4A;
  --color-border-strong:  #4A4A6A;

  /* العلامة التجارية / اللون المميز — أفتح قليلاً لتحسين القراءة على الخلفية الداكنة */
  --color-accent:         #60A5FA;
  --color-accent-hover:   #93C5FD;

  /* التغذية الراجعة — تشبع أقل لتجنب القسوة */
  --color-success:  #4ADE80;
  --color-warning:  #FCD34D;
  --color-danger:   #F87171;
}

لاحظ أن اللون المميز #3B82F6 في الوضع الفاتح يصبح #60A5FA في الوضع الداكن. الصبغة هي نفسها لكن السطوع يزداد — وهذا ضروري لأن سياق التباين قد انعكس. يُتيح منشئ التدرجات استكشاف النطاق الكامل 50–950 لأي لون.

استخدام المتغيرات في المكونات

بعد إنشاء لوحة الألوان، يشير كل مكوّن إلى المتغيرات بدلاً من القيم المباشرة:

.card {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.btn-primary {
  background-color: var(--color-accent);
  color: #FFFFFF;
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
}

عند وجود سمة [data-theme="dark"] على عنصر <html>، تتحدث جميع المتغيرات في آنٍ واحد، ويتغير مظهر كل مكوّن يشير إليها — دون الحاجة إلى أي CSS إضافي.

استعلام الوسائط prefers-color-scheme

قبل أن يتفاعل المستخدم مع أي مفتاح تبديل، يمكنك احترام تفضيل نظام التشغيل باستخدام استعلام الوسائط prefers-color-scheme. يُفعَّل هذا الاستعلام عندما يكون نظام التشغيل مضبوطاً على المظهر الداكن.

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-base:      #0F0F17;
    --color-bg-elevated:  #1A1A2E;
    --color-bg-overlay:   #252540;
    --color-text-primary:   #E8E8F0;
    --color-text-secondary: #A8A8C0;
    --color-text-muted:     #6A6A88;
    --color-border:         #2E2E4A;
    --color-border-strong:  #4A4A6A;
    --color-accent:         #60A5FA;
    --color-accent-hover:   #93C5FD;
    --color-success:  #4ADE80;
    --color-warning:  #FCD34D;
    --color-danger:   #F87171;
  }
}

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

دمج النهجين

النمط الموصى به يستخدم استعلام الوسائط كإعداد افتراضي وسمة data-theme كتجاوز صريح:

/* 1. الوضع الفاتح الافتراضي */
:root {
  --color-bg-base: #FFFFFF;
  /* ... */
}

/* 2. تجاوز الوضع الداكن لنظام التشغيل (عند عدم وجود تفضيل صريح) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-base: #0F0F17;
    /* ... */
  }
}

/* 3. الوضع الداكن الصريح (المستخدم بدّل عبر JS) */
[data-theme="dark"] {
  --color-bg-base: #0F0F17;
  /* ... */
}

آلية التبديل باستخدام JavaScript

يؤدي مفتاح التبديل المُنفَّذ بشكل جيد ثلاثة أشياء: يغيّر المظهر الحالي فوراً، ويحفظ التفضيل في localStorage، ويقرأ التفضيل المحفوظ عند تحميل الصفحة قبل أول رسم.

قراءة التفضيل عند التحميل

يجب تشغيل هذا السكريبت في <head> — قبل رسم الصفحة — لمنع وميض الثيم الخاطئ:

<head>
  <script>
    (function() {
      const stored = localStorage.getItem('theme');
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      const theme = stored ?? (prefersDark ? 'dark' : 'light');
      document.documentElement.setAttribute('data-theme', theme);
    })();
  </script>
</head>

دالة التبديل

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

document.getElementById('theme-toggle').addEventListener('click', toggleTheme);

استراتيجيات تكييف الألوان

اختيار ألوان الوضع الداكن ليس بسيطاً كعكس لوحة الألوان الفاتحة.

تقليل التباين، لا مجرد عكسه

النص الأبيض الخالص على خلفية سوداء خالصة (#FFFFFF على #000000) هو أقصى تباين تقنياً — 21:1 — لكنه مُرهِق معرفياً للقراءة الممتدة. قلّل كلا الطرفين: استخدم أبيض مائل #E8E8F0 للنص الأساسي وأزرق داكن جداً #0F0F17 لخلفية الصفحة.

استخدم فاحص التباين للتحقق من أن كل مجموعة نص/خلفية في الثيم الداكن تستوفي على الأقل WCAG AA.

الطبقات والارتفاع على الأسطح الداكنة

في الوضع الفاتح، يُعبَّر عن الارتفاع عادةً بالظلال. في الوضع الداكن، تصبح الظلال غير مرئية. يتمثل النهج الأكثر فاعلية في: الأسطح الأفتح تبدو أعلى:

--color-bg-base:     #0F0F17;
--color-bg-elevated: #1A1A2E;
--color-bg-overlay:  #252540;
--color-bg-tooltip:  #2E2E4A;

تخفيف تشبع ألوان الوضع الداكن قليلاً

الألوان شديدة التشبع تبدو قاسية ومتوهجة كالنيون على الخلفيات الداكنة. عند تكييف ألوان علامتك التجارية للوضع الداكن، قلّل التشبع بنسبة 10–20% مع زيادة السطوع.

الصور والوسائط

/* تقليل حدة الصور في الوضع الداكن */
[data-theme="dark"] img:not([src*=".svg"]) {
  filter: brightness(0.9) contrast(1.05);
}

اختبار كلا الوضعين

محاكاة DevTools في المتصفح

يوفر كل من Chrome وFirefox محاكاة الوضع الداكن في DevTools دون تغيير إعدادات نظام التشغيل.

اختبار التباين الآلي

دمج تدقيق التباين الآلي في سير عمل التطوير. يُتيح فاحص التباين التحقق الفوري من أي زوج من اللونين.

قائمة المشكلات الشائعة

  • قيم hex مُشفَّرة بشكل ثابت في CSS المكوّن بدلاً من المتغيرات
  • أيقونات SVG بـ fill="#000000" ثابت — غيّرها إلى fill="currentColor"
  • مكونات طرف ثالث لا تحترم data-theme
  • عدم تعيين خاصية color-scheme — أضف color-scheme: light dark إلى :root
<meta name="color-scheme" content="light dark">

:root {
  color-scheme: light dark;
}

النقاط الرئيسية

  • عرّف جميع الألوان كخصائص CSS مخصصة على :root وتجاوزها للوضع الداكن باستخدام [data-theme="dark"].
  • استخدم prefers-color-scheme: dark كإعداد افتراضي تلقائي، وأضف طبقة تبديل JavaScript مع حفظ localStorage لمن يريد التجاوز.
  • شغّل سكريبت منع الوميض في <head> قبل تحميل CSS.
  • ألوان الوضع الداكن ليست انعكاساً لألوان الوضع الفاتح — قلّل التباين الحاد، واستخدم خلفيات أفتح للتعبير عن الارتفاع.
  • تحقق من كل زوج نص/خلفية باستخدام فاحص التباين وابحث عن التدرج المناسب باستخدام منشئ التدرجات.
  • أضف color-scheme: light dark وعلامة <meta> المقابلة.

الألوان ذات الصلة

black

#000000

blue

#0000FF

green

#008000

navy

#000080

white

#FFFFFF

العلامات التجارية ذات الصلة

Meta

Helping people connect

1 لون

Drop

3 ألوان

Hex

8 ألوان

Must

2 لونان

Open

2 لونان

Reflect

2 لونان

الأدوات ذات الصلة

فاحص التباين

تحقق من نسب تباين الألوان وفقًا لإرشادات WCAG 2.1. اختبر التوافق مع مستويي AA وAAA للنص العادي والنص الكبير.

فتح الأداة

مولّد الظلال

أنشئ مقاييس تدرجات بأسلوب Tailwind CSS (50-950) من أي لون أساسي لأنظمة التصميم.

فتح الأداة