تبديل الوضع الليلي والنهاري (Dark Mode / Light Mode) بالشكل الصحيح

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

ليه المشكلة دي بتتكرر بالذات في الوضع الليلي؟

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

الطريقة الخطأ الشائعة (وهي سبب المشكلة)

كتير من المشاريع بتبدأ صح، بمتغيرات ألوان مركزية، لكن بعد كده بتلاقي كود زي ده اتكتب في مكون جديد:

css

.settings-card {
  background-color: #ffffff;
  color: #1a1a1a;
}

اللون هنا مكتوب مباشرة (hardcoded)، يعني مهما بدّلت الوضع من نهاري لليلي، العنصر ده مش هيسمع التغيير أصلاً، لأنه مش مرتبط بأي متغير بيتغيّر.

علامة التعرف على المشكلة دي في مشروعك: لو دورت في كل ملفات CSS/Style بتاعتك على قيم زي #fff, #000, white, black, rgb(...) مكتوبة مباشرة جوه خصائص background أو color، ودي مش موجودة في ملف الثيم المركزي، يبقى لقيت مصدر المشكلة.

الحل الصحيح: مصدر واحد للألوان، والباقي بيقرأ منه بس

الخطوة الأولى: عرّف كل الألوان كمتغيرات CSS في مكان واحد

css

:root {
  --bg-primary: #ffffff;
  --text-primary: #1a1a1a;
  --card-bg: #f5f5f5;
  --border-color: #e0e0e0;
}

[data-theme="dark"] {
  --bg-primary: #121212;
  --text-primary: #f0f0f0;
  --card-bg: #1e1e1e;
  --border-color: #333333;
}

الخطوة الثانية: أي عنصر في التطبيق يقرأ من المتغيرات دي بس، ومينفعش يكتب لون مباشر أبداً

css

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

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

الخطوة الثالثة: التبديل الفعلي بين الوضعين (مثال بـ JavaScript)

javascript

function setTheme(mode) {
  document.documentElement.setAttribute('data-theme', mode);
  localStorage.setItem('theme', mode); // حفظ اختيار المستخدم
}

// عند فتح التطبيق: قراءة الاختيار المحفوظ
const savedTheme = localStorage.getItem('theme') || 'light';
setTheme(savedTheme);

الخطوة الرابعة (مهمة): امنع المشكلة من الرجوع تاني

الحل التقني وحده مش كفاية، لازم إجراء وقائي:

استخدم أداة Lint (زي Stylelint) وضيف قاعدة تمنع كتابة ألوان hex مباشرة خارج ملف الثيم.
اعمل مراجعة سريعة (Code Review) لأي Pull Request بيضيف شاشة جديدة، وركّز بالذات على وجود ألوان مكتوبة يدوياً.

لو التطبيق موبايل أصلي (Android Native / Kotlin)

نفس المبدأ بالظبط، لكن الأداة مختلفة. أندرويد بيوفر نظام "Resource Qualifiers" جاهز لكده:

ملف res/values/colors.xml للألوان النهارية.
ملف res/values-night/colors.xml بنفس أسماء المتغيرات لكن بقيم الوضع الليلي.

xml

<!-- res/values/colors.xml -->
<color name="background_primary">#FFFFFF</color>

<!-- res/values-night/colors.xml -->
<color name="background_primary">#121212</color>

طالما كل الـ Layouts بتستخدم @color/background_primary بدل ما تكتب لون مباشر، النظام هيبدّل تلقائياً حسب وضع الجهاز من غير أي كود إضافي.

خطوات اختبار التغيير قبل ما تعتبره مكتمل

افتح كل شاشة في التطبيق (مش الشاشات الرئيسية بس) وبدّل الوضع وانت واقف فيها.
جرّب حالة "اتباع إعدادات النظام" (System Default) لو التطبيق بيدعمها، وشوف هل التبديل التلقائي بيشتغل صح.
دوّر كود المشروع كله على قيم ألوان مباشرة (regex بسيط زي #[0-9a-fA-F]{3,6} خارج ملفات الثيم) للتأكد إنك مسكت كل الحالات مش الظاهرة بس.

الخلاصة

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

منصـة عمـاد الرقـمية