Bootstrap Dark Mode Colors

Bootstrap 5.3 introduced native dark mode support via a data-bs-theme attribute. Add data-bs-theme="dark" to the <html> element or any container to switch the color scheme.

How It Works

Bootstrap defines CSS custom properties (variables) for each color in both light and dark palettes. When data-bs-theme="dark" is active, the dark-palette variables override the defaults. Components and utilities automatically adapt.

Example

<!-- Global dark mode -->
<html data-bs-theme="dark">

<!-- Scoped dark section -->
<section data-bs-theme="dark" class="p-5">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Dark Card</h5>
      <p class="card-text">Automatically dark-themed.</p>
    </div>
  </div>
</section>

<!-- Toggle with JavaScript -->
<button onclick="document.documentElement.setAttribute('data-bs-theme',
  document.documentElement.getAttribute('data-bs-theme')=='dark'?'light':'dark')">
  Toggle
</button>

HTML

Full Editor

Pro Tip

Persist the user's theme preference in localStorage and apply data-bs-theme before the page renders to prevent a flash of the wrong theme.

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned