Bootstrap — حالت تیره (Dark Mode)

آخرین بروزرسانی: 1404/08/20

قبلی: ابزارها (Utilities) بعدی: فلکس (Flex)

حالت تیره (Dark Mode)

حالت تیره (Dark Mode) یعنی پس زمینه تیره و متن روشن. چشم کمتر خسته می شود. همچنین، باتری گوشی هم دیرتر خالی می شود. در بوت استرپ با یک ویژگی داده ای ساده فعال می شود.

فعال سازی سراسری صفحه

برای تیره کردن کل سایت، ویژگی data-bs-theme="dark" را روی تگ <html> بگذار.

<html data-bs-theme="dark">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <div class="container mt-5">
      <h1>My Page</h1>
      <p>Some lorem ipsum text.</p>
    </div>
  </body>
</html>

مشاهده در ادیتور

حالت تیره فقط برای یک جزء

اگر نمی خواهی کل صفحه تیره شود، همان ویژگی را روی همان جزء بگذار. این کار فقط همان بخش را تیره می کند.

جدول در حالت تیره

ویژگی را روی تگ جدول بگذار تا جدول تیره شود.

<table class="table" data-bs-theme="dark">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Ali</td>
      <td>95</td>
    </tr>
  </tbody>
</table>

مشاهده در ادیتور

منوی کشویی تیره

روی ریشه دراپ داون بگذار تا منو تیره شود.

<div class="dropdown" data-bs-theme="dark">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Menu</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</div>

مشاهده در ادیتور