Bootstrap 5 Dark Mode

Dark Mode

By default, bootstrap pages have a white (light) background color.

If you want to change the whole page to a darker color, you can add data-bs-theme="dark" to the <html> element:

Dark Mode For Components

If you don't want the whole page to have a darker color, but only specific components, you can add the data-bs-theme="dark" attribute to the specified component.

Dark Mode Table

Firstname	Lastname	Email
Ram	Kumar	ram@example.com
Mahi	mittal	mahi@example.com
Dolly	Kumari	dolly@example.com

Dark Mode Dropdown

Click on the dropdown menu to see the effect.

Example

 <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>