Theming with CSS Variables

Sass 22,539 values are frozen into the CSS file. For anything that must change in the browser, such as a user-selected theme or one special card, override Bootstrap 2,007 's --bs-* custom properties. Global tokens live on :root and the dark set under [data-bs-theme=dark] (Colors and Dark Mode). You can invent your own mode: a [data-bs-theme="ocean"] rule that redefines the same tokens restyles any element carrying that attribute, and its descendants.

Light, dark and a custom ocean color mode from one stylesheetHTMLLive

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<style>
  [data-bs-theme="ocean"] {
    --bs-body-bg: #e3f2fd; --bs-body-color: #0d3c61; --bs-border-color: #90caf9;
    --bs-primary-rgb: 239, 108, 0;      /* .text-primary, .bg-primary ... */
    --bs-link-color-rgb: 106, 27, 154;  /* links read the -rgb token */
  }
  [data-bs-theme="ocean"] .btn-primary { --bs-btn-bg: #0277bd; --bs-btn-border-color: #0277bd; }
</style>
<div class="row row-cols-3 g-3 p-3">
  <div class="col" data-bs-theme="light"><div class="card card-body">
    <p class="text-primary fw-bold">Light</p><a href="#">A link</a>
    <button class="btn btn-primary mt-2">Button</button></div></div>
  <div class="col" data-bs-theme="dark"><div class="card card-body">
    <p class="text-primary fw-bold">Dark</p><a href="#">A link</a>
    <button class="btn btn-primary mt-2">Button</button></div></div>
  <div class="col" data-bs-theme="ocean"><div class="card card-body">
    <p class="text-primary fw-bold">Ocean</p><a href="#">A link</a>
    <button class="btn btn-primary mt-2">Button</button></div></div>
</div>

Browser output of 54

The comments mark two traps. Utilities and links read the -rgb twin of a color, as in rgba(var(--bs-primary-rgb), var(--bs-text-opacity)), so setting --bs-primary alone changes almost nothing. And component variants such as .btn-primary are compiled with literal values (--bs-btn-bg: #0d6efd), so they ignore global tokens; override their local --bs-btn-* variables or change $primary in Sass. For a dark mode that simply follows the operating system, set $color-mode-type: media-query in Sass: the color-mode(dark) mixin then emits @media (prefers-color-scheme: dark) instead of attribute selectors.

MENU