تابز مدیا | آموزش قدم به قدم برنامه نویسی

Dark Mode

📌 Dark Mode یا حالت تاریک، طراحی مدرن و محبوب برای وب‌سایت‌هاست که چشم کاربران را کمتر خسته می‌کند و ظاهر جذابی به سایت می‌دهد.
بوت‌استرپ ۵ با کلاس‌های آماده و ترکیب با Utilities این کار را ساده کرده است.

✅ فعال کردن Dark Mode برای کل صفحه


<body class="bg-dark text-light">
  <div class="container py-5">
    <h1>حالت تاریک بوت‌استرپ</h1>
    <p>این متن در حالت تاریک نمایش داده می‌شود.</p>
    <button class="btn btn-primary">دکمه نمونه</button>
  </div>
</body>

bg-dark → پس‌زمینه تاریک
text-light → متن روشن
با ترکیب کلاس‌های Utilities می‌توان رنگ عناصر را به راحتی تنظیم کرد.

✅ Dark Mode برای Card یا کامپوننت خاص


<div class="card bg-dark text-white mb-3" style="max-width: 18rem;">
  <div class="card-header">هدر کارت</div>
  <div class="card-body">
    <h5 class="card-title">عنوان کارت</h5>
    <p class="card-text">متن داخل کارت در حالت تاریک</p>
  </div>
</div>

bg-dark + text-white → کارت تاریک با متن روشن

✅ Dark Mode در Navbar


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#">خانه</a></li>
        <li class="nav-item"><a class="nav-link" href="#">ویژگی‌ها</a></li>
        <li class="nav-item"><a class="nav-link" href="#">قیمت</a></li>
      </ul>
    </div>
  </div>
</nav>

کلاس navbar-dark → متن و آیکون‌ها روشن
کلاس bg-dark → پس‌زمینه تاریک

✅ Dark Mode در Table


<table class="table table-dark table-striped">
  <thead>
    <tr>
      <th>نام</th>
      <th>سن</th>
      <th>شغل</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>سیاوش</td>
      <td>۲۵</td>
      <td>توسعه‌دهنده</td>
    </tr>
    <tr>
      <td>سارا</td>
      <td>۳۰</td>
      <td>طراح</td>
    </tr>
  </tbody>
</table>

table-dark → جدول تاریک
table-striped → خط‌های راه‌راه برای خوانایی بهتر

✅ Dark Mode با Cards، Alerts، Buttons

Button: btn btn-primary در حالت Dark Mode خودش مناسب است
Alert: alert alert-dark → هشدار در حالت تاریک
Card: ترکیب bg-dark text-white

✅ نکات مهم

Dark Mode در بوت‌استرپ با ترکیب Utilities و کلاس‌های آماده انجام می‌شود.
می‌توان کل سایت یا کامپوننت خاص را تاریک کرد.
در پروژه‌های ریسپانسیو، می‌توان تم تاریک و روشن را با جاوااسکریپت یا CSS تغییر داد.