إزاي تعمل ثيم Dark/Light احترافي باستخدام Bootstrap 5.3 و CSS Variables

أكيد مريت بالموقف ده: بتبدأ مشروع جديد، وبتستخدم بوتستراب (Bootstrap 5) عشان تخلص بسرعة، وفجأة العميل أو مديرك يطلب منك "الوضع الليلي" (Dark Mode). بتبدأ تقلب في الـ CSS وتعمل Classes كتيرة وتغير ألوان يدوياً وتلاقي الكود بقى "سباغيتي" (Spaghetti Code) ومحدش عارف يقرأه. النهاردة هعرفك إزاي تستغل قوة الـ CSS Variables في نسخة 5.3+ عشان تعمل نظام ألوان مرن، خفيف، ومحترف بأقل مجهود.

ليه نعتمد على الـ CSS Variables في Bootstrap؟

زمان كنا بنعتمد على الـ Sass Variables بس، ودي كانت مشكلتها إنها بتتحول لقيم ثابتة (Hardcoded) بمجرد ما المتصفح يقرأ الكود. لكن مع CSS Custom Properties، الموضوع اختلف تماماً. المتصفح دلوقتي بيقدر يغير القيمة في "الرن تايم" (Runtime) بمجرد ما نغير الـ Attribute بتاع الـ Root، وده اللي بيخلي الـ Dark/Light Mode يشتغل بسلاسة ومن غير ما تضطر تعمل Compile لملفات الـ Sass كل شوية.

الخطوة الأولى: تهيئة الـ Sass لتخصيص الألوان

عشان نتحكم في ألوان المشروع، لازم نعدل ملف الـ _variables.scss بتاع بوتستراب. بدال ما نعتمد على الألوان الافتراضية، هنعمل تعريف للـ Color Palette الخاص بينا. افتح ملف الـ Sass الخاص بيك وأضف التعديلات دي:

$primary: #0d6efd;
$body-bg: var(--bs-body-bg);
$body-color: var(--bs-body-color);

// تعريف ألوان الثيمات
:root {
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #212529;
  --bs-body-color: #f8f9fa;
}

الخطوة الثانية: تخصيص الـ Utility Classes

بوتستراب بيوفر لنا Utility API جبارة. بدل ما تكتب CSS مخصص لكل عنصر، ممكن تضيف الـ Utilities الخاصة بيك في الـ _utilities.scss. تخيل إنك عايز تعمل "لون خلفية مخصص" (Custom Background Color) بيتغير أوتوماتيك مع الثيم، هتعمل كدة:

$utilities: map-merge(
  $utilities,
  (
    "background-color": map-merge(
      map-get($utilities, "background-color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "background-color"), "values"),
          ("brand-gradient": linear-gradient(45deg, var(--bs-primary), #6610f2)),
        )
      )
    )
  )
);

الخطوة الثالثة: تطبيق الـ Dark Mode تلقائياً

بوتستراب 5.3 قدم خاصية الـ Color Modes. كل اللي عليك تعمله عشان تفعل الوضع الليلي هو إنك تضيف data-bs-theme="dark" على تاج الـ html أو الـ body. وعشان تخليها "تلقائية" (Auto)، ممكن تستخدم كود جافا سكريبت بسيط يقرأ تفضيلات المتصفح:

const toggleDarkMode = () => {
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.documentElement.setAttribute('data-bs-theme', isDark ? 'dark' : 'light');
};

// تنفيذ عند تحميل الصفحة
toggleDarkMode();

نصيحة من أخ لمبرمج

يا صديقي، الفرق بين المبرمج المبتدئ والمحترف هو "نظافة الكود" (Code Cleanliness). ما تحاولش تعمل كل حاجة بإيدك من الصفر، اتعلم إزاي تـ "Extend" أو توسع الإمكانيات اللي الفريم وورك (Framework) بيقدمها لك. لما تستخدم الـ CSS Variables، أنت مش بس بتوفر وقت، أنت بتبني مشروع سهل التعديل عليه مستقبلاً. جرب تفصل ألوانك في ملف _colors.scss منفصل، وحافظ على الـ _variables.scss بتاعك منظم، وهتلاقي الشغل بقى أمتع بكتير.