Examples

One stylesheet, every component

Every component reads its look through the same chain; see Theming for the full mechanics:

var(--component-token, var(--theme-token, <bootstrap-default>))

Nothing below is component-specific. It is the entire --theme-* contract for one real custom theme (the dark example shown throughout these docs), declared once, in one file. Drop it into a theme's :root and every component that isn't already showing its own --<component>-* override reskins at once: no template override, no per-component patch, no touching the theme's own Sass $variables either, since those govern Bootstrap's compile-time structure (breakpoints, spacer scale), not the look this file controls.

/* global.scss: the whole dark theme, nothing else needed */
:root {
  /* Colour */
  --theme-color-primary: #ffb443;
  --theme-color-primary-ink: #050505;
  --theme-color-secondary: #b8b8b8;
  --theme-color-ink: #f5f5f5;
  --theme-color-ink-muted: #b8b8b8;
  --theme-color-surface: #050505;
  --theme-color-surface-subtle: #0a0a0a;
  --theme-color-surface-inverse: #f5f5f5;
  --theme-color-border: #222;
  --theme-color-border-strong: #333;

  /* Type */
  --theme-font-heading: Manrope, system-ui, -apple-system, Segoe UI, roboto, Helvetica Neue, arial, sans-serif;
  --theme-font-body: Manrope, system-ui, -apple-system, Segoe UI, roboto, Helvetica Neue, arial, sans-serif;
  --theme-font-mono: JetBrains Mono, sfmono-regular, menlo, monaco, consolas, Liberation Mono, Courier New, monospace;
  --theme-font-size-sm: 0.8125rem;
  --theme-font-size-base: clamp(1rem, 0.96rem + 0.14vw, 1.0625rem);
  --theme-font-size-lg: clamp(1.0625rem, 0.99rem + 0.26vw, 1.1875rem);
  --theme-font-size-h6: 0.9375rem;
  --theme-font-size-h5: 1.0625rem;
  --theme-font-size-h4: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --theme-font-size-h3: clamp(1.375rem, 1.24rem + 0.58vw, 1.75rem);
  --theme-font-size-h2: clamp(1.875rem, 1.46rem + 1.72vw, 3rem);
  --theme-font-size-h1: clamp(2.375rem, 1.62rem + 3.1vw, 4.25rem);
  --theme-font-size-display: clamp(2.75rem, 1.55rem + 4.9vw, 6rem);
  --theme-leading-tight: 1.04;
  --theme-leading-heading: 1.2;
  --theme-leading-normal: 1.55;
  --theme-leading-relaxed: 1.72;
  --theme-tracking-tight: -0.03em;
  --theme-tracking-eyebrow: 0.14em;
  --theme-heading-weight: 800;
  --theme-eyebrow-case: uppercase;
  --theme-measure: 44rem;

  /* Space */
  --theme-spacer: 1rem;
  --theme-spacer-1: 0.25rem;
  --theme-spacer-2: 0.5rem;
  --theme-spacer-3: 1rem;
  --theme-spacer-4: 1.5rem;
  --theme-spacer-5: 3rem;
  --theme-space-section: clamp(3.5rem, 7vw, 7rem);
  --theme-space-gutter: 0rem;

  /* Shape */
  --theme-radius: 0.25rem;
  --theme-radius-lg: 0.375rem;
  --theme-radius-pill: 0.25rem;

  /* Elevation */
  --theme-shadow-sm: none;
  --theme-shadow-md: none;
  --theme-shadow-sm-2: var(--theme-shadow-sm);

  /* Motion */
  --theme-duration: 220ms;
  --theme-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Declared by the bridge: bootstrap_components + carousel extension points */
  --theme-color-focus: var(--theme-color-primary);
  --theme-touch-target-min: 44px;
  --theme-close-btn-padding: 0.875em;
  --theme-accordion-btn-hover-bg: var(--theme-color-surface-subtle);
  --theme-accordion-btn-hover-color: var(--theme-color-primary);
  --theme-accordion-btn-icon-color: currentcolor;
  --theme-accordion-btn-hover-icon-color: var(--theme-accordion-btn-hover-color);
  --theme-accordion-btn-active-icon-color: currentcolor;
  --theme-carousel-caption-scrim: linear-gradient(to top, rgb(6 18 24 / 92%) 0%, rgb(6 18 24 / 74%) 35%, rgb(6 18 24 / 32%) 68%, rgb(6 18 24 / 0%) 100%);
  --theme-carousel-caption-color-dark: #fff;
  --theme-carousel-control-color: #fff;
  --theme-carousel-control-color-dark: #fff;
  --theme-carousel-control-opacity: 0.8;
  --theme-carousel-control-opacity-active: 1;
  --theme-carousel-control-icon-size: 16px;
  --theme-carousel-control-width: 5rem;
  --theme-carousel-indicator-padding-block: 16px;
  --theme-carousel-indicator-padding-inline: 6px;
}

Every value here is documented

This is the Dark column of the Token reference, copied out as one file instead of split across six tables. Cross-check any single value there; use this page to see the whole thing at once.

What that one file produces

No template changed, no component CSS was touched, no --<component>-* override was written: each live demo below opens on the stylesheet above and nothing else. Switch the theme to Bootstrap theme to see the same markup without it.

Hero Banner

Full-bleed image, Manrope heading at weight 800 with tight tracking, and the CTA's corners from --theme-radius.

Statistic

Amber icon, light numerals on the dark surface, uppercase tracked label.

CTA Icon Item

Flat card on the dark surface, amber icon and cue link, amber rule on hover.

Tabs

Amber active indicator, Manrope labels.

Ten different block types, one accent colour, one type ramp, one spacing scale, one radius decision: set once each, read everywhere.

Building your own

1. Copy the block above into your theme's global.scss (or straight into a compiled stylesheet; it's plain CSS custom properties, no Sass required).
2. Replace every value. Declare the whole contract, not just the accent; see Theming § The minimum a custom theme declares for why a partial contract reads as "Bootstrap with a tint" rather than a design.
3. Check $spacers and $grid-breakpoints in your theme's own Sass against Theming § Two things Canvas requires: neither is part of this token layer, and both are silent when wrong.