الآن دخلنا مرحلة تخصيص نظام الألوان بالكامل في Bootstrap 5.3
بمستوى احترافي وليس مجرد تعديل عشوائي 👏

أنت تريد:

• تغيير primary
• تغيير success
• تغيير danger
• إضافة ألوان جديدة
• جعل النظام يعمل مع light + dark
• يكون نظيف وقابل للتوسع

سنقسم الشرح إلى 3 مستويات:

🎯 المستوى 1: فهم كيف يعمل Bootstrap 5.3 داخليًا

Bootstrap 5.3 يعتمد على:

CSS Variables

CSS Variables

مثال:

--bs-primary
--bs-success
--bs-danger
--bs-body-bg
--bs-card-bg

--bs-primary
--bs-success
--bs-danger
--bs-body-bg
--bs-card-bg

كل مكونات Bootstrap (buttons, alerts, badges…) تعتمد عليها.

🔥 إذًا نحن لا نعدل الكلاسات
نعدل المتغيرات فقط.

🏗 الطريقة الصحيحة لتخصيص الألوان

أنشئ ملف:

📁 theme.css

🟢 أولاً: تخصيص الألوان الافتراضية

/* ===== LIGHT MODE ===== */
[data-bs-theme="light"] {  --bs-primary: #4f46e5;     /* بنفسجي */
  --bs-secondary: #64748b;   /* رمادي */
  --bs-success: #16a34a;     /* أخضر */
  --bs-danger: #dc2626;      /* أحمر */
  --bs-warning: #f59e0b;     /* برتقالي */
  --bs-info: #0ea5e9;        /* أزرق فاتح */}

/* ===== LIGHT MODE ===== */
[data-bs-theme="light"] {  --bs-primary: #4f46e5;     /* بنفسجي */
  --bs-secondary: #64748b;   /* رمادي */
  --bs-success: #16a34a;     /* أخضر */
  --bs-danger: #dc2626;      /* أحمر */
  --bs-warning: #f59e0b;     /* برتقالي */
  --bs-info: #0ea5e9;        /* أزرق فاتح */}

🔥 الآن:

<button class="btn btn-success">

<button class="btn btn-success">

سيستخدم اللون الجديد.

🟣 تخصيص الوضع الداكن

/* ===== DARK MODE ===== */
[data-bs-theme="dark"] {  --bs-primary: #818cf8;
  --bs-secondary: #94a3b8;
  --bs-success: #22c55e;
  --bs-danger: #ef4444;
  --bs-warning: #fbbf24;
  --bs-info: #38bdf8;  --bs-body-bg: #0f172a;
  --bs-body-color: #f1f5f9;
  --bs-card-bg: #1e293b;}

/* ===== DARK MODE ===== */
[data-bs-theme="dark"] {  --bs-primary: #818cf8;
  --bs-secondary: #94a3b8;
  --bs-success: #22c55e;
  --bs-danger: #ef4444;
  --bs-warning: #fbbf24;
  --bs-info: #38bdf8;  --bs-body-bg: #0f172a;
  --bs-body-color: #f1f5f9;
  --bs-card-bg: #1e293b;}

🔥 كل شيء سيتغير تلقائيًا.

🎯 المستوى 2: إضافة ألوان جديدة غير موجودة في Bootstrap

Bootstrap افتراضيًا لا يحتوي:

• brand
• purple
• soft
• neutral
• وغيرها

يمكنك إضافتها هكذا:

:root {
  --bs-brand: #8b5cf6;
  --bs-soft: #f1f5f9;
}

:root {
  --bs-brand: #8b5cf6;
  --bs-soft: #f1f5f9;
}

🟢 إنشاء كلاس جديد باستخدام اللون الجديد

.btn-brand {
  background-color: var(--bs-brand);
  color: white;
}.btn-brand:hover {
  opacity: 0.9;
}

.btn-brand {
  background-color: var(--bs-brand);
  color: white;
}.btn-brand:hover {
  opacity: 0.9;
}

🟢 أو استخدامه في الخلفيات

.bg-brand {
  background-color: var(--bs-brand);
}

🔥 الآن لديك ألوان إضافية.

🎯 المستوى 3: تخصيص النظام بالكامل (المستوى الاحترافي الحقيقي)

إذا أردت نظام ألوان كامل متكامل:

1️⃣ تعريف ألوانك الأساسية

:root {
  --color-primary-light: #4f46e5;
  --color-primary-dark: #818cf8;  --color-success-light: #16a34a;
  --color-success-dark: #22c55e;
}

2️⃣ ربطها بـ Bootstrap

[data-bs-theme="light"] {
  --bs-primary: var(--color-primary-light);
  --bs-success: var(--color-success-light);
}[data-bs-theme="dark"] {
  --bs-primary: var(--color-primary-dark);
  --bs-success: var(--color-success-dark);
}

🔥 الآن نظامك قابل للتعديل بسهولة من مكان واحد.

🎯 تخصيص درجات اللون (مهم جدًا)

Bootstrap يعتمد أيضًا على:

--bs-primary-rgb

لو أردت دعم الـ opacity الصحيح:

[data-bs-theme="light"] {
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
}

🔥 هذا يجعل:

bg-primary-subtle

يعمل بشكل صحيح.

🏗 مثال احترافي كامل لنظام ألوان متجر كتب

/* ===== LIGHT ===== */
[data-bs-theme="light"] {  --bs-primary: #2563eb;
  --bs-success: #16a34a;
  --bs-warning: #f59e0b;
  --bs-danger: #dc2626;  --bs-body-bg: #ffffff;
  --bs-card-bg: #f8fafc;
  --bs-border-color: #e5e7eb;
}/* ===== DARK ===== */
[data-bs-theme="dark"] {  --bs-primary: #3b82f6;
  --bs-success: #22c55e;
  --bs-warning: #fbbf24;
  --bs-danger: #ef4444;  --bs-body-bg: #0f172a;
  --bs-card-bg: #1e293b;
  --bs-border-color: #334155;
}

🧠 ماذا سيتغير تلقائيًا؟

• Buttons
• Alerts
• Cards
• Dropdown
• Navbar
• Borders
• Links
• Forms

🔥 بدون تعديل أي class.

🏆 الفرق بين الطريقتين

🎯 المستوى الأعلى جدًا (احترافي جدًا)

يمكنك إعادة بناء Bootstrap باستخدام SCSS:

$primary: #4f46e5;
$success: #16a34a;

ثم:

npm install sass

وتبني Bootstrap مخصص بالكامل.

لكن هذا مستوى أعلى.

🚀 الآن لديك 3 مستويات:

1️⃣ تعديل سريع عبر CSS Variables
2️⃣ إضافة ألوان جديدة مخصصة
3️⃣ بناء Bootstrap مخصص عبر SCSS

هل تريد أن ننتقل إلى المستوى الأعلى ونبني:

🔥 نظام ألوان احترافي لمتجر كتب متكامل (Brand Identity)
أو
🔥 إعادة بناء Bootstrap عبر SCSS باحتراف؟

نعم ابدا

ممتاز 🔥
سنبدأ الآن بالمستوى الاحترافي الحقيقي 👌

سنقوم بـ:

🎨 بناء نظام ألوان (Design System) لمتجر كتب
ثم إعادة ربطه بالكامل مع Bootstrap 5.3
ثم نجعله يعمل مع Light / Dark بشكل احترافي

لن نعدل Bootstrap عشوائيًا —
سننشئ Brand System منظم.

🧠 أولاً: نفكر كـ Designer وليس كمبرمج

متجر كتب يحتاج:

• ألوان هادئة
• ألوان قراءة مريحة
• Contrast ممتاز
• ألوان دافئة قليلاً
• تجربة مريحة للعين

🎯 سنبني 3 طبقات ألوان

1️⃣ Brand Colors
2️⃣ Semantic Colors
3️⃣ Surface & UI Colors

🏗 الخطوة 1: إنشاء ملف Design System

📁 theme.css

🟢 تعريف ألوان العلامة التجارية

:root {  /* Brand */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;  /* Success */
  --success-500: #16a34a;  /* Danger */
  --danger-500: #dc2626;  /* Warning */
  --warning-500: #f59e0b;}

🔥 هذه ألوانك الأساسية الخاصة بك.

🏗 الخطوة 2: ربطها بـ Bootstrap (Light Mode)

[data-bs-theme="light"] {  /* Bootstrap Core */
  --bs-primary: var(--brand-600);
  --bs-success: var(--success-500);
  --bs-danger: var(--danger-500);
  --bs-warning: var(--warning-500);  /* Body */
  --bs-body-bg: #ffffff;
  --bs-body-color: #1e293b;  /* Cards */
  --bs-card-bg: #f8fafc;  /* Borders */
  --bs-border-color: #e2e8f0;}

🔥 الآن كل أزرار primary أصبحت من brand.

🏗 الخطوة 3: Dark Mode احترافي مخصص

[data-bs-theme="dark"] {  --bs-primary: var(--brand-500);
  --bs-success: #22c55e;
  --bs-danger: #ef4444;
  --bs-warning: #fbbf24;  --bs-body-bg: #0f172a;
  --bs-body-color: #f1f5f9;  --bs-card-bg: #1e293b;
  --bs-border-color: #334155;}

🔥 Dark مريح وغير مزعج.

🎯 الآن Bootstrap بالكامل يستخدم ألوانك

<button class="btn btn-primary">شراء</button>
<div class="alert alert-success">تمت العملية</div>

كلها تستخدم نظامك.

🟣 إضافة ألوان جديدة مخصصة

Bootstrap لا يحتوي:

• neutral
• soft
• brand-outline

نضيفها:

:root {
  --neutral-100: #f1f5f9;
  --neutral-800: #1e293b;
}

إنشاء كلاس جديد

.btn-brand-outline {
  border: 1px solid var(--brand-600);
  color: var(--brand-600);
}.btn-brand-outline:hover {
  background-color: var(--brand-600);
  color: white;
}

🎯 تحسين RGB (مهم جدًا)

Bootstrap يعتمد أيضًا على:

--bs-primary-rgb

أضف هذا:

[data-bs-theme="light"] {
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 79, 70, 229;
}

حتى تعمل:

.bg-primary-subtle

بشكل صحيح.

🏗 تخصيص Navbar بشكل احترافي

[data-bs-theme="light"] .navbar {
  background-color: white !important;
  border-bottom: 1px solid var(--bs-border-color);
}[data-bs-theme="dark"] .navbar {
  background-color: #1e293b !important;
}

🟢 Transition ناعم

* {
  transition: background-color .25s ease,
              color .25s ease,
              border-color .25s ease;
}

🏆 الآن لديك نظام ألوان Production Ready

🚀 المستوى الأعلى الحقيقي (SCSS Custom Build)

إذا أردنا احتراف أكثر:

نقوم بتثبيت:

npm install sass

ثم:

📁 custom.scss

$primary: #4f46e5;
$success: #16a34a;
$danger: #dc2626;@import "bootstrap/scss/bootstrap";

ثم نستورد هذا الملف بدل CSS الجاهز.

🔥 هذا يعيد بناء Bootstrap بالكامل بألوانك.

🎯 الفرق بين CSS Variables و SCSS