Bootstrap: الوضع الداكن

Q: كيف أجعل CSS المخصص الخاص بي يتبع السمة؟

استخدم متغيرات CSS: تجاوز متغيراتك المخصصة داخل المحدد [data-bs-theme="dark"] ، أو ارجع إلى متغيرات السمة في Bootstrap مثل var(--bs-body-bg) .

Q: هل يمكنني جعل أجزاء فقط من الصفحة تستخدم الوضع الداكن؟

نعم. يمكن تطبيق data-bs-theme="dark" على أي عنصر HTML، مما يؤثر فقط على محتواه الداخلي. أظهرت الاختبارات إمكانية مزج الوضع الداكن القطاعي مع الوضع الفاتح العام.

آخر تحديث: 2026-08-26

1. مقدمة الدرس

(1) المتطلبات السابقة

تدفق تخصيص Bootstrap Sass (الدرس 20)
أساسيات خصائص CSS المخصصة (متغيرات CSS)
أساسيات معالجة DOM بـ JavaScript

(2) 🎯 ما ستتعلّمه

تفعيل الوضع الداكن باستخدام سمة data-bs-theme
تنفيذ زر تبديل السمة + حفظ التفضيل في localStorage
اتباع تفضيل النظام prefers-color-scheme تلقائيًا
تخصيص متغيرات CSS للوضع الداكن
إتقان تقنيات تكييف الصور والمكونات في الوضع الداكن

(3) المشكلة

لوحة تحكم Charlie تحتاج إلى زر تبديل "وضع نهاري/ليلي". التنفيذ التقليدي يتطلب كتابة مجموعتين من الأنماط لكل مكوّن، مما يجعل تكلفة الصيانة عالية جدًا وعرضة لإغفال أنماط أثناء التبديل.

(4) الحل

يُدخل Bootstrap 5.3 دعمًا أصيلاً للوضع الداكن. باستخدام سمة data-bs-theme="dark"، يمكن للصفحة بأكملها أو مكونات فردية التبديل بين السمات الفاتحة/الداكنة، مع تكييف جميع أنماط المكونات تلقائيًا. يتحقق تبديل السمة العامة بتغيير سمة واحدة فقط.

(5) الفائدة

يحتاج Charlie فقط إلى إضافة زر تبديل. تغيير سمة data-bs-theme واحدة يُفعّل تبديل السمة العامة، وتتكيّف جميع أنماط المكونات تلقائيًا مع الوضع الداكن دون الحاجة لكتابة أي أنماط تجاوز داكنة يدويًا.

2. الوضع الداكن الأساسي

▶ مثال: عرض الوضع الداكن الأساسي

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <!-- قسم الوضع الفاتح -->
    <h5>Light Mode (default)</h5>
    <div class="card p-3 mb-3">
      <p>This card uses the default light theme.</p>
      <button class="btn btn-primary">Button</button>
    </div>

    <!-- قسم الوضع الداكن -->
    <div data-bs-theme="dark">
      <h5>Dark Mode</h5>
      <div class="card p-3 mb-3">
        <p>This card automatically adapts to dark theme.</p>
        <button class="btn btn-primary">Button</button>
        <div class="alert alert-warning mt-2">Alert also adapts.</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

3. ثلاثة نطاقات

النطاق	الصياغة	الوصف
عام	`<html data-bs-theme="dark">`	الصفحة بأكملها تصبح وضعًا داكنًا
قطاعي	`<div data-bs-theme="dark">`	المكونات داخل الحاوي المحدد تصبح داكنة
مكوّن	`<div class="card" data-bs-theme="dark">`	بطاقة واحدة تصبح داكنة

HTML

<!-- وضع داكن عام -->
<html data-bs-theme="dark">
  <!-- جميع المكونات تستخدم السمة الداكنة -->
</html>

▶ جرّب الكود

4. زر تبديل السمة

HTML

<button id="themeToggle" class="btn btn-outline-primary">
  <i class="bi bi-moon"></i> Dark Mode
</button>

<script>
  const toggle = document.getElementById('themeToggle')
  toggle.addEventListener('click', () => {
    const html = document.documentElement
    const current = html.getAttribute('data-bs-theme')
    const next = current === 'dark' ? 'light' : 'dark'
    html.setAttribute('data-bs-theme', next)
    toggle.innerHTML = next === 'dark'
      ? '<i class="bi bi-sun"></i> Light Mode'
      : '<i class="bi bi-moon"></i> Dark Mode'
  })
</script>

▶ جرّب الكود

(1) حفظ تفضيل المستخدم

HTML

<script>
  // التحقق من التفضيل المحفوظ عند التحميل
  const saved = localStorage.getItem('theme')
  if (saved) {
    document.documentElement.setAttribute('data-bs-theme', saved)
  }

  document.getElementById('themeToggle').addEventListener('click', () => {
    const html = document.documentElement
    const current = html.getAttribute('data-bs-theme') || 'light'
    const next = current === 'dark' ? 'light' : 'dark'
    html.setAttribute('data-bs-theme', next)
    localStorage.setItem('theme', next)
  })
</script>

▶ جرّب الكود

5. اتباع تفضيل النظام تلقائيًا

HTML

<script>
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
  const saved = localStorage.getItem('theme')

  if (saved) {
    document.documentElement.setAttribute('data-bs-theme', saved)
  } else if (prefersDark.matches) {
    document.documentElement.setAttribute('data-bs-theme', 'dark')
  }

  // الاستماع لتغيير سمة النظام
  prefersDark.addEventListener('change', (e) => {
    if (!localStorage.getItem('theme')) {
      document.documentElement.setAttribute('data-bs-theme', e.matches ? 'dark' : 'light')
    }
  })
</script>

▶ جرّب الكود

6. متغيرات CSS للوضع الداكن

يستخدم Bootstrap 5.3 خصائص CSS المخصصة لتبديل السمة. يمكنك تجاوز متغيرات الوضع الداكن مباشرة في CSS:

CSS

/* ألوان وضع داكن مخصصة */
[data-bs-theme="dark"] {
  --bs-body-bg: #1a1a2e;
  --bs-body-color: #e0e0e0;
  --bs-primary: #bb86fc;
  --bs-primary-rgb: 187, 134, 252;
  --bs-card-bg: #16213e;
  --bs-border-color: #2a2a4a;
}

▶ جرّب الكود

(1) طريقة Sass

SCSS

// scss/custom.scss
$enable-dark-mode: true;

// تجاوز ألوان الوضع الداكن
$dark-bg: #1a1a2e;
$dark-card-bg: #16213e;
$primary-dark: #bb86fc;

// استيراد Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

▶ جرّب الكود

7. تكييف صور الوضع الداكن

HTML

<style>
.dark-show { display: none; }
[data-bs-theme="dark"] .dark-show { display: block; }
[data-bs-theme="dark"] .dark-hide { display: none; }
</style>
<img src="logo-light.png" class="dark-hide" alt="Logo light">
<img src="logo-dark.png" class="dark-show" alt="Logo dark">

▶ جرّب الكود

8. أمثلة شاملة

▶ مثال: صفحة تبديل وضع داكن كاملة

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Toggle Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="bi bi-moon-stars me-2"></i>Theme Demo</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nav">
        <ul class="navbar-nav ms-auto align-items-center">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
          <li class="nav-item ms-2">
            <button id="themeToggle" class="btn btn-outline-primary btn-sm rounded-pill">
              <i class="bi bi-moon"></i> <span id="themeLabel">Dark</span>
            </button>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container py-5">
    <h1>Dark Mode Demo</h1>
    <p class="lead">Click the toggle button to switch between light and dark themes.</p>

    <div class="row g-4 mb-5">
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Card Component</h5>
          <p>Automatically adapts to theme.</p>
          <button class="btn btn-primary">Primary</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Alert Example</h5>
          <div class="alert alert-success mt-2">Success alert</div>
          <div class="alert alert-danger">Danger alert</div>
          <div class="alert alert-info">Info alert</div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Form Elements</h5>
          <input type="text" class="form-control mb-2" placeholder="Input field">
          <select class="form-select mb-2"><option>Option 1</option></select>
          <div class="form-check"><input class="form-check-input" type="checkbox" id="ck"><label class="form-check-label" for="ck">Check me</label></div>
        </div>
      </div>
    </div>

    <div class="card p-4">
      <h5>Table</h5>
      <table class="table">
        <thead><tr><th>Name</th><th>Role</th><th>Status</th></tr></thead>
        <tbody>
          <tr><td>Alice</td><td>Admin</td><td><span class="badge bg-success">Active</span></td></tr>
          <tr><td>Bob</td><td>Editor</td><td><span class="badge bg-warning">Pending</span></td></tr>
          <tr><td>Charlie</td><td>Viewer</td><td><span class="badge bg-secondary">Inactive</span></td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <script>
    const toggle = document.getElementById('themeToggle');
    const label = document.getElementById('themeLabel');
    const icon = toggle.querySelector('i');

    function setTheme(theme) {
      document.documentElement.setAttribute('data-bs-theme', theme);
      localStorage.setItem('theme', theme);
      const isDark = theme === 'dark';
      label.textContent = isDark ? 'Dark' : 'Light';
      icon.className = isDark ? 'bi bi-moon' : 'bi bi-sun';
    }

    const saved = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    setTheme(saved || (prefersDark.matches ? 'dark' : 'light'));

    toggle.addEventListener('click', () => {
      const current = document.documentElement.getAttribute('data-bs-theme');
      setTheme(current === 'dark' ? 'light' : 'dark');
    });
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ جرّب الكود

▶ مثال: وضع داكن Sass + متغيرات CSS

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode + Sass</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    :root {
      --brand-primary: #6f42c1;
      --brand-accent: #e83e8c;
    }
    [data-bs-theme="dark"] {
      --brand-primary: #bb86fc;
      --brand-accent: #ff4081;
      --custom-bg: #1a1a2e;
      --custom-card-bg: #16213e;
    }
    .custom-section {
      background: var(--custom-bg, #f8f9fa);
      padding: 2rem;
      border-radius: 0.5rem;
    }
    .custom-card-css {
      background: var(--custom-card-bg, #ffffff);
      border: 1px solid var(--bs-border-color, #dee2e6);
      border-radius: 0.5rem;
      padding: 1.5rem;
    }
    .brand-icon { color: var(--brand-primary); font-size: 2rem; }
  </style>
</head>
<body>
  <div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h5>Sass + CSS Variables</h5>
      <button class="btn btn-outline-primary btn-sm" onclick="document.documentElement.setAttribute('data-bs-theme', document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark')">
        <i class="bi bi-arrow-repeat"></i> Toggle Theme
      </button>
    </div>

    <div class="custom-section">
      <h5>Custom Section</h5>
      <p>Background uses <code>--custom-bg</code> CSS variable, changes with theme.</p>
    </div>

    <div class="row g-3 mt-3">
      <div class="col-md-4">
        <div class="custom-card-css">
          <i class="bi bi-palette brand-icon d-block mb-2"></i>
          <h6>Brand Color</h6>
          <p class="text-body-secondary small">Primary: <code>--brand-primary</code> changes per theme.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Bootstrap Card</h5>
          <p class="text-body-secondary">Native dark mode support.</p>
          <button class="btn btn-primary">Button</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="custom-card-css">
          <i class="bi bi-heart brand-icon d-block mb-2"></i>
          <h6>Accent Color</h6>
          <p class="text-body-secondary small">Accent: <code>--brand-accent</code> for highlights.</p>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ جرّب الكود

▶ مثال: تبديل صور الوضع الداكن

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Image Switch</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h5>Image Switch for Dark Mode</h5>
      <button class="btn btn-outline-primary btn-sm rounded-pill" onclick="toggleTheme()">
        <i class="bi bi-moon"></i> Toggle
      </button>
    </div>

    <div class="row g-4">
      <div class="col-md-6">
        <div class="card p-4">
          <h5>الطريقة 1: CSS مخصص لرؤية السمة</h5>
          <p class="text-body-secondary">Shows different image per theme.</p>
          <div class="text-center p-4 bg-light rounded-3">
            <i class="bi bi-sun-fill fs-1 text-warning dark-hide"></i>
            <i class="bi bi-moon-fill fs-1 text-primary dark-show"></i>
            <p class="mt-2 mb-0"><span class="dark-hide">☀️ Light Mode Image</span><span class="dark-show">🌙 Dark Mode Image</span></p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card p-4">
          <h5>Method 2: CSS Filter</h5>
          <p class="text-body-secondary">Invert colors for dark mode.</p>
          <div class="text-center p-4 bg-light rounded-3">
            <img src="https://via.placeholder.com/200x100/0d6efd/fff?text=Logo" class="img-fluid dark-invert" alt="Logo" style="max-width:200px;">
          </div>
          <style>
            [data-bs-theme="dark"] .dark-invert {
              filter: invert(0.85) hue-rotate(180deg);
            }
          </style>
        </div>
      </div>
    </div>

    <div class="card p-4 mt-3">
      <h5>Method 3: picture element</h5>
      <div class="text-center">
        <picture>
          <source srcset="https://via.placeholder.com/400x100/1a1a2e/bb86fc?text=Dark+Logo" media="(prefers-color-scheme: dark)" id="darkSource">
          <img src="https://via.placeholder.com/400x100/0d6efd/fff?text=Light+Logo" class="img-fluid rounded-3" alt="Responsive Logo" style="max-width:400px;">
        </picture>
      </div>
    </div>
  </div>

  <script>
    function toggleTheme() {
      const html = document.documentElement;
      const next = html.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
      html.setAttribute('data-bs-theme', next);
    }
  </script>
</body>
</html>

▶ جرّب الكود

▶ مثال: صفحة بوضع داكن جزئي

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Partial Dark Mode</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Sectional Dark Mode Demo</h5>
    <p class="text-body-secondary">Different sections of the same page use different themes.</p>

    <!-- بطاقة فاتحة -->
    <div class="row g-4">
      <div class="col-md-6">
        <div data-bs-theme="light">
          <div class="card p-4 border-0 shadow-sm">
            <h5>☀️ Light Section</h5>
            <p>This section stays light regardless of global theme.</p>
            <div class="d-flex gap-2">
              <button class="btn btn-primary">Primary</button>
              <button class="btn btn-outline-secondary">Secondary</button>
            </div>
            <div class="alert alert-info mt-3">Light mode alert</div>
            <table class="table table-striped mt-3">
              <thead><tr><th>Item</th><th>Value</th></tr></thead>
              <tbody><tr><td>Alpha</td><td>100</td></tr><tr><td>Beta</td><td>200</td></tr></tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- بطاقة داكنة -->
      <div class="col-md-6">
        <div data-bs-theme="dark">
          <div class="card p-4 border-0 shadow-sm">
            <h5>🌙 Dark Section</h5>
            <p>This section stays dark — useful for dashboards.</p>
            <div class="d-flex gap-2">
              <button class="btn btn-primary">Primary</button>
              <button class="btn btn-outline-secondary">Secondary</button>
            </div>
            <div class="alert alert-info mt-3">Dark mode alert</div>
            <table class="table table-striped mt-3">
              <thead><tr><th>Item</th><th>Value</th></tr></thead>
              <tbody><tr><td>Alpha</td><td>100</td></tr><tr><td>Beta</td><td>200</td></tr></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- بطاقات مختلطة: مكونات بسمات فردية -->
    <h5 class="mt-5">Component-Level Themes</h5>
    <div class="d-flex gap-3 flex-wrap">
      <div class="card p-3" data-bs-theme="light" style="width:200px;">
        <h6>Light Card</h6>
        <button class="btn btn-primary btn-sm">Button</button>
      </div>
      <div class="card p-3" data-bs-theme="dark" style="width:200px;">
        <h6>Dark Card</h6>
        <button class="btn btn-primary btn-sm">Button</button>
      </div>
      <div class="card p-3" style="width:200px;">
        <h6>📕 Follows Global</h6>
        <button class="btn btn-primary btn-sm">Button</button>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

(1) بنية نظام الوضع الداكن

graph TD
    subgraph "Theme Sources"
        A1[User Clicks Toggle Button]
        A2[System Preference matchMedia]
        A3[localStorage Storage]
    end

    subgraph "Theme Application"
        B[data-bs-theme attribute]
        C[CSS Variable Switch]
        D[Component Style Redraw]
    end

    subgraph "Theme Detection"
        E[window.matchMedia<br/>prefers-color-scheme]
        F[getAttribute<br/>data-bs-theme]
        G[localStorage.getItem]
    end

    A1 --> B
    A2 --> B
    A3 --> B
    B --> C
    C --> D

    E --> A2
    F --> A1
    G --> A3

(2) جدول متغيرات CSS للوضع الداكن

اسم المتغير	الافتراضي الفاتح	الافتراضي الداكن	الغرض
`--bs-body-bg`	`#fff`	`#212529`	لون خلفية الصفحة
`--bs-body-color`	`#212529`	`#dee2e6`	لون نص المتن
`--bs-card-bg`	`#fff`	`#2b3035`	لون خلفية البطاقة
`--bs-border-color`	`#dee2e6`	`#495057`	لون الحدود
`--bs-primary`	`#0d6efd`	`#6ea8fe`	اللون الأساسي للسمة
`--bs-secondary`	`#6c757d`	`#adb5bd`	اللون الثانوي
`--bs-navbar-color`	`rgba(0,0,0,0.55)`	`rgba(255,255,255,0.55)`	لون نص شريط التنقل

(3) جدول مقارنة طرق اكتشاف السمة

الطريقة	التنفيذ	المزايا	العيوب	السيناريو الموصى
تبديل يدوي للمستخدم	JS + `localStorage`	تحكم المستخدم، استمرار التفضيل	يتطلب عنصر UI إضافي	جميع التطبيقات
اتباع تلقائي للنظام	`matchMedia('prefers-color-scheme')`	تكيّف سلس، دعم المتصفحات الحديثة	لا يمكن التبديل دون اتصال	مواقع الأخبار، المدونات
تبديل تلقائي حسب الوقت	JS يتحقق من الوقت الحالي	داكن تلقائيًا ليلًا	قد لا يطابق تفضيل المستخدم	تطبيقات القراءة
معامل URL + Cookie	قراءة من الخادم	لا وميض محتوى عند التحميل الأول	تنفيذ معقد	الصفحات الحرجة لـ SEO

(4) جدول خاصية CSS `color-scheme`

قيمة الخاصية	التأثير	الوصف
`color-scheme: light`	المتصفح يستخدم شريط تمرير وعناصر تحكم فاتحة	القيمة الافتراضية
`color-scheme: dark`	المتصفح يستخدم شريط تمرير وعناصر تحكم داكنة	للاستخدام مع الوضع الداكن
`color-scheme: light dark`	المتصفح يختار تلقائيًا حسب تفضيل النظام	موصى به للإعداد العام
`color-scheme: normal`	لا يوجد مخطط محدد	المتصفح يقرر
`<meta name="color-scheme" content="light dark">`	يُعلن في رأس HTML	إعداد عام سريع بدون CSS

❓ أسئلة شائعة

س هل يعمل الوضع الداكن لجميع مكونات Bootstrap؟

ج نعم. جميع المكونات الرسمية لها أنماط داكنة جاهزة — البطاقات وشريط التنقل والنماذج والجداول والتنبيهات وModals إلخ. قد تتطلب الإضافات الخارجية تكييفًا خاصًا بها.

س كيف أجعل CSS المخصص الخاص بي يتبع السمة؟

ج استخدم متغيرات CSS: تجاوز متغيراتك المخصصة داخل المحدد [data-bs-theme="dark"]، أو ارجع إلى متغيرات السمة في Bootstrap مثل var(--bs-body-bg).

س هل يمكنني جعل أجزاء فقط من الصفحة تستخدم الوضع الداكن؟

ج نعم. يمكن تطبيق data-bs-theme="dark" على أي عنصر HTML، مما يؤثر فقط على محتواه الداخلي. أظهرت الاختبارات إمكانية مزج الوضع الداكن القطاعي مع الوضع الفاتح العام.

س هل يؤثر الوضع الداكن على أداء الصفحة؟

ج التأثير ضئيل. الوضع الداكن يُبدّل فقط قيم متغيرات CSS، ولا يتطلب طلبات HTTP إضافية أو إعادة رسم مكلفة. حفظ التفضيلات بـ localStorage عملية متزامنة. الملاحظة الوحيدة: عند استخدام matchMedia للاستماع لتغيير سمة النظام، يجب أن تظل دالة ال callback خفيفة وتتجنب الحسابات المعقدة.

س كيف أُكيّف مكتبات المكونات الخارجية (مثل منتقيات التاريخ، محررات النص الغني) للوضع الداكن؟

ج المكونات الخارجية عادةً لا تتضمن أنماطًا داكنة. ثلاثة حلول: (1) تجاوز متغيرات CSS الخاصة بها داخل [data-bs-theme="dark"]؛ (2) استخدام واجهة برمجة تطبيقات السمة المدمجة فيها (مثل theme: "dark" في Flatpickr)؛ (3) كتابة أنماط تجاوز داكنة يدويًا باستخدام متغيرات CSS الداكنة في Bootstrap كمرجع.

📖 ملخص

data-bs-theme="dark" يُفعّل الوضع الداكن، يُطبّق على html أو حاوي أو مكوّن
تبديل السمة: JS يُعدّل سمة data-bs-theme + localStorage يحفظ التفضيل
تفضيل النظام: matchMedia('prefers-color-scheme: dark') يتبع تلقائيًا
تجاوز متغيرات CSS: [data-bs-theme="dark"] { --bs-body-bg: ... }
الصور: CSS مخصص مع محددات [data-bs-theme] للتحكم في الرؤية تحت السمات المختلفة

📝 تمارين

⭐ أضف زر تبديل وضع داكن إلى موقع الشركة من الدرس 19. يجب أن يُبدّل الزر السمة العامة، مع حفظ التفضيل في localStorage.
⭐⭐ خصّص مجموعة متغيرات داكنة للعلامة التجارية: الخلفية #0d1117 (بأسلوب GitHub)، خلفية البطاقة #161b22، اللون الأساسي #58a6ff.
⭐⭐⭐ اعرض بطاقتين فاتحة وداكنة على نفس الصفحة (اضبط data-bs-theme لكل منهما)، وقارن الفروق في لون النص والخلفية والحدود والأزرار.

الدرس السابق: تخصيص Sass · الدرس التالي: تحسين الأداء والبناء والنشر

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن

Bootstrap: الوضع الداكن

1. مقدمة الدرس

(1) المتطلبات السابقة

(2) 🎯 ما ستتعلّمه

(3) المشكلة

(4) الحل

(5) الفائدة

2. الوضع الداكن الأساسي

▶ مثال: عرض الوضع الداكن الأساسي

3. ثلاثة نطاقات

4. زر تبديل السمة

(1) حفظ تفضيل المستخدم

5. اتباع تفضيل النظام تلقائيًا

6. متغيرات CSS للوضع الداكن

(1) طريقة Sass

7. تكييف صور الوضع الداكن

8. أمثلة شاملة

▶ مثال: صفحة تبديل وضع داكن كاملة

▶ مثال: وضع داكن Sass + متغيرات CSS

▶ مثال: تبديل صور الوضع الداكن

▶ مثال: صفحة بوضع داكن جزئي

(1) بنية نظام الوضع الداكن

(2) جدول متغيرات CSS للوضع الداكن

(3) جدول مقارنة طرق اكتشاف السمة

(4) جدول خاصية CSS color-scheme

❓ أسئلة شائعة

📖 ملخص

📝 تمارين

(4) جدول خاصية CSS `color-scheme`