How do CSS custom properties enhance theming and customization in Bootstrap 5?

CSS custom properties in Bootstrap 5 make theming a dream you tweak colors, spacing, or fonts once on :root and watch buttons, cards, everything update instantly, no Sass rebuilds needed for dark mode or brand swaps.​

Bootstrap 5 packs --bs-* variables right into the CSS for colors, radii, and breakpoints. Override them in :root or themed classes, and the magic cascades everywhere without touching source files. Switch themes dynamically with JS or CSS classes, perfect for user prefs or multi-site branding; debug by peeking in dev tools to see live values flow through components. Way faster than old Sass-only days, keeps your custom CSS lean and mean.

Code

/* Light theme (default) */
:root {
  --bs-primary: #0d6efd;
  --bs-body-bg: #fff;
}

/* Dark theme switch */
[data-theme="dark"] {
  color-scheme: dark;
  --bs-primary: #0dcaf0;
  --bs-body-bg: #212529;
  --bs-body-color: #fff;
}

/* JS toggle */
<script>
  document.documentElement.setAttribute('data-theme', 'dark');
</script>
      

Code

<button class="btn btn-primary">Updates live!</button>