Bootstrap 5: Dark Mode

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Σκοτεινή λειτουργία

Από προεπιλογή, οι σελίδες bootstrap έχουν λευκό (ανοιχτό) χρώμα φόντου.

Εάν θέλετε να αλλάξετε ολόκληρη τη σελίδα σε πιο σκούρο χρώμα, μπορείτε να προσθέσετε 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>

Παράδειγμα Dark Mode

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>