تغيير خلفية العنصر بناء ع الوضع الليل ي

نعم ✅ وبطريقة احترافية جدًا مع Bootstrap 5.3 👌🔥
لأننا نستخدم:

data-bs-theme="light"
data-bs-theme="dark"

يمكنك تغيير خلفية أي عنصر بناءً على الوضع بسهولة عبر CSS.

🎯 الطريقة الصحيحة (المعتمدة رسميًا)

Bootstrap يغير الثيم عبر:

<html data-bs-theme="dark">

إذن يمكننا استهدافه هكذا 👇

🟢 الطريقة 1: استهداف مباشر حسب الثيم

مثال: تغيير خلفية كارد

/* Light */
[data-bs-theme="light"] .book-card {
  background-color: #ffffff;
}/* Dark */
[data-bs-theme="dark"] .book-card {
  background-color: #1e293b;
}

🔥 الآن .book-card يتغير تلقائيًا عند تبديل الثيم.

🟢 الطريقة 2: استخدام CSS Variables (الأفضل)

بدل تكرار الكود، نعرّف متغير:

/* Light */
[data-bs-theme="light"] {
  --card-custom-bg: #ffffff;
}/* Dark */
[data-bs-theme="dark"] {
  --card-custom-bg: #1e293b;
}

ثم:

.book-card {
  background-color: var(--card-custom-bg);
}

🔥 هذه الطريقة أنظف وقابلة للتوسع.

🟢 الطريقة 3: تغيير خلفية قسم كامل

مثلاً Hero Section:

[data-bs-theme="light"] .hero {
  background: linear-gradient(to right, #eef2ff, #ffffff);
}[data-bs-theme="dark"] .hero {
  background: linear-gradient(to right, #0f172a, #1e293b);
}

🟢 الطريقة 4: تغيير صورة خلفية حسب الوضع

[data-bs-theme="light"] .hero {
  background-image: url("/light-bg.jpg");
}[data-bs-theme="dark"] .hero {
  background-image: url("/dark-bg.jpg");
}

🔥 يستخدمها كثير من المواقع الاحترافية.

🟢 الطريقة 5: تغيير Navbar بالكامل

[data-bs-theme="light"] .navbar {
  background-color: white !important;
}[data-bs-theme="dark"] .navbar {
  background-color: #1e293b !important;
}

🎯 مثال عملي داخل React

<div className="book-card p-3 rounded shadow">
  محتوى الكتاب
</div>

ثم في CSS:

.book-card {
  transition: background-color 0.3s ease;
}

🔥 سيصبح التبديل ناعمًا.

🧠 لماذا هذه الطريقة احترافية؟

السببلماذا
تعتمد على data-bs-themeمتوافقة مع Bootstrap
لا تحتاج JS إضافينظيفة
لا re-renderأداء أفضل
تعمل عالميًاسهلة الصيانة

🏆 خلاصة احترافية

إذا أردت أفضل تنظيم:

1️⃣ عرّف ألوانك كـ CSS Variables
2️⃣ اربطها بالـ theme
3️⃣ استخدم المتغير داخل الكلاسات