Bootstrap 5: Темный режим

Оглавление

    Показать оглавление

Темный режим

По умолчанию страницы начальной загрузки имеют белый (светлый) цвет фона.

Если вы хотите изменить цвет всей страницы на более темный, вы можете добавить data-bs-theme="dark" в <html>:

Пример по умолчанию

My Page

Some lorem ipsum text.

Попробуйте сами →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>My Page</h1>
  <p>Lorem ipsum text.</p>
  <div class="card">
    <div class="card-body">A card.</div>
  </div>
  <p>Some buttons:</p>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
</div>

</body>
</html>

Пример темного режима

My Page

Some lorem ipsum text.

Попробуйте сами →

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>My Page</h1>
  <p>Lorem ipsum text.</p>
  <div class="card">
    <div class="card-body">A card.</div>
  </div>
  <p>Some buttons:</p>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
</div>

</body>
</html>

Темный режим для компонентов

Если вы не хотите, чтобы вся страница имела более темный цвет, а только отдельные компоненты, вы можете добавить атрибут data-bs-theme="dark" в указанный компонент.

Например, добавьте к таблице темный режим:

Пример

Пример

<table class="table" data-bs-theme="dark">

Попробуйте сами →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Dark Mode Table</h2>
  <table class="table" data-bs-theme="dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Или, например, добавьте темный режим в выпадающее меню:

Пример

Пример

     <div class="dropdown" data-bs-theme="dark">

Попробуйте сами →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Dark Mode Dropdown</h2>
  <p>Click on the dropdown menu to see the effect.</p>
  <div class="dropdown" data-bs-theme="dark">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
      <li><a class="dropdown-item" href="#">Link 3</a></li>
    </ul>
  </div>
</div>

</body>
</html>