Theming

Theming

Boobstrap themes have four independent axes: color mode, palette, corner shape, and scrollbar presentation. Combine their data attributes on <html> for an application-wide theme or on a component boundary for a scoped preview.

Compose a theme

Try every supported combination below. The preview applies the same public attributes and semantic tokens that your application will use.

<html
  data-bs-theme="dark"
  data-bs-palette="rose"
  data-bs-radius="normal"
>

<html data-bs-scrollbars="native">
  ...browser-native scrollbars throughout the document...
</html>

<section data-bs-scrollbars="native">
  ...browser-native scrollbars in this subtree...
  <div class="bs-scrollbar">...one themed exception...</div>
</section>

Complete color token reference

The tables below are generated from the compiled framework stylesheet used by this site. They list the complete brand ramp and every --bs-color-* token for all five palettes in both modes, including exact hex and alpha-channel values.

Set a document default

Place all three attributes on the same theme boundary. Omitting an attribute uses its default, but explicit values make application intent easier to audit.

<html data-bs-theme="light" data-bs-palette="teal" data-bs-radius="square">
  <body>...</body>
</html>

Scope a themed region

Attributes may live on any ancestor, so previews, dashboards, or embedded product areas can use their own combination without changing the surrounding page.

<section data-bs-theme="dark" data-bs-palette="violet" data-bs-radius="rounded">
  <article class="bs-card bs-card-body">...</article>
</section>

Customize semantic tokens

Override tokens after importing Boobstrap. Define the complete primary state set—including readable foreground and focus treatment—so buttons, forms, alerts, tabs, and badges stay visually coherent.

[data-product-theme] {
  --bs-color-primary: #6d4aff;
  --bs-color-primary-hover: #8568ff;
  --bs-color-primary-active: #5638d6;
  --bs-color-primary-contrast: #ffffff;
  --bs-color-focus-ring: rgb(109 74 255 / 30%);
  --bs-radius-md: 0.5rem;
}

Scope a complete theme to one region

All three attributes inherit through a subtree, which is useful for embedded products, dashboards, and previews with a distinct visual identity.

<div class="bs-card" data-bs-theme="light" data-bs-palette="teal" data-bs-radius="square">
  <div class="bs-card-body">
    <span class="bs-badge bs-badge-primary">Light · Teal · Square</span>
    <h3 class="bs-card-title bs-mt-4">Scoped independently</h3>
    <p class="bs-card-text bs-mb-4">The surrounding page keeps its own mode, palette, and corners.</p>
    <button class="bs-btn bs-btn-primary bs-btn-sm" type="button">Continue</button>
  </div>
</div>

Persist a mode preference

Mode can change without disturbing the selected palette or corner profile. Apply a stored preference before paint when possible to avoid a visual flash.

const root = document.documentElement;
const toggle = document.querySelector("[data-theme-toggle]");

toggle.addEventListener("click", () => {
  const next = root.dataset.bsTheme === "light" ? "dark" : "light";
  root.dataset.bsTheme = next;
  localStorage.setItem("theme", next);
});