Lesson 46 +10 XP

Dark Mode

Bootstrap 5 supports light and dark styling. You can make the whole page dark or apply dark styles to individual components.

Bootstrap checks the data-bs-theme attribute on the <html> element. Set it to dark to enable dark mode across the page:

<html lang="en" data-bs-theme="dark">

Set it to light (or remove it) for the light theme.

You can also set data-bs-theme="dark" on a specific component to style just that part:

<div class="card" data-bs-theme="dark">
  <div class="card-body">
    This card is dark even in a light page.
  </div>
</div>

In dark mode, semantic colors stay readable:

bg-primary, bg-danger, bg-warning, and other backgrounds keep working.
Text color utilities like text-light and text-white look good on dark backgrounds.
Use text-bg-* utility classes to ensure readable text on colored backgrounds:

<div class="text-bg-danger p-3">Danger in dark mode</div>

The text-bg-* classes pair a background color with a contrasting text color automatically.

You can make the theme follow the user's OS setting:

:root {
  color-scheme: light dark;
}

Then toggle data-bs-theme based on the prefers-color-scheme media query.