Kombiniere eine der drei Theme-Utilities mit den Theme-Farbklassen und setze so color und background-color als fertiges Paar an jedes Element – genau wie bei Komponenten-Varianten.

Du wählst mit .theme-{farbe} die Farbe und mit einer Stil-Klasse die Kombination aus Vorder- und Hintergrund. Optional ergänzt .theme-border eine passende Rahmenfarbe. Wie Theme-Farben grundsätzlich funktionieren, steht unter Theme im Bereich Anpassen.

• .theme-contrast: kräftiger Hintergrund, maximaler Kontrast.
• .theme-subtle: dezenter Hintergrund, passt sich dem Farbmodus an.
• .theme-muted: gedämpfter Hintergrund mit betonter Schrift.
• .theme-border: passende Rahmenfarbe.
• .theme-reset: setzt geerbtes Theme zurück.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Contrast

.theme-contrast kombiniert das bg-Token der Theme-Farbe mit der contrast-Textfarbe und sorgt so für beste Lesbarkeit. Ideal für stark betonte Elemente mit vollem Hintergrund.

<div class="p-2 theme-primary theme-contrast">.theme-primary .theme-contrast</div>
<div class="p-2 theme-accent theme-contrast">.theme-accent .theme-contrast</div>
<div class="p-2 theme-success theme-contrast">.theme-success .theme-contrast</div>
<div class="p-2 theme-danger theme-contrast">.theme-danger .theme-contrast</div>
<div class="p-2 theme-warning theme-contrast">.theme-warning .theme-contrast</div>
<div class="p-2 theme-info theme-contrast">.theme-info .theme-contrast</div>
<div class="p-2 theme-inverse theme-contrast">.theme-inverse .theme-contrast</div>
<div class="p-2 theme-secondary theme-contrast">.theme-secondary .theme-contrast</div>

Verschachtelte Links übernehmen die Kontrast-Vordergrundfarbe und bleiben auf dem vollen Hintergrund lesbar:

<div class="p-3 theme-primary theme-contrast">Theme Primary mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-accent theme-contrast">Theme Accent mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-success theme-contrast">Theme Success mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-danger theme-contrast">Theme Danger mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-warning theme-contrast">Theme Warning mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-info theme-contrast">Theme Info mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-inverse theme-contrast">Theme Inverse mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-secondary theme-contrast">Theme Secondary mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>

Subtle

.theme-subtle kombiniert das bg-subtle-Token mit der text-Farbe – kontrastärmer und zurückhaltender. Die Kombination passt sich automatisch dem aktuellen Farbmodus an.

<div class="p-2 theme-primary theme-subtle">.theme-primary .theme-subtle</div>
<div class="p-2 theme-accent theme-subtle">.theme-accent .theme-subtle</div>
<div class="p-2 theme-success theme-subtle">.theme-success .theme-subtle</div>
<div class="p-2 theme-danger theme-subtle">.theme-danger .theme-subtle</div>
<div class="p-2 theme-warning theme-subtle">.theme-warning .theme-subtle</div>
<div class="p-2 theme-info theme-subtle">.theme-info .theme-subtle</div>
<div class="p-2 theme-inverse theme-subtle">.theme-inverse .theme-subtle</div>
<div class="p-2 theme-secondary theme-subtle">.theme-secondary .theme-subtle</div>

Mit Rahmen:

<div class="p-2 theme-primary theme-subtle theme-border">.theme-primary .theme-subtle .theme-border</div>
<div class="p-2 theme-accent theme-subtle theme-border">.theme-accent .theme-subtle .theme-border</div>
<div class="p-2 theme-success theme-subtle theme-border">.theme-success .theme-subtle .theme-border</div>
<div class="p-2 theme-danger theme-subtle theme-border">.theme-danger .theme-subtle .theme-border</div>
<div class="p-2 theme-warning theme-subtle theme-border">.theme-warning .theme-subtle .theme-border</div>
<div class="p-2 theme-info theme-subtle theme-border">.theme-info .theme-subtle .theme-border</div>
<div class="p-2 theme-inverse theme-subtle theme-border">.theme-inverse .theme-subtle .theme-border</div>
<div class="p-2 theme-secondary theme-subtle theme-border">.theme-secondary .theme-subtle .theme-border</div>

Verschachtelte Links übernehmen die Subtle-Vordergrundfarbe:

<div class="p-3 theme-primary theme-subtle">Theme Primary mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-accent theme-subtle">Theme Accent mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-success theme-subtle">Theme Success mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-danger theme-subtle">Theme Danger mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-warning theme-subtle">Theme Warning mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-info theme-subtle">Theme Info mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-inverse theme-subtle">Theme Inverse mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-secondary theme-subtle">Theme Secondary mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>

Muted

.theme-muted kombiniert das bg-muted-Token mit der text-emphasis-Farbe für einen gedämpften Look. Wie Subtle passt es sich automatisch dem Farbmodus an.

<div class="p-2 theme-primary theme-muted">.theme-primary .theme-muted</div>
<div class="p-2 theme-accent theme-muted">.theme-accent .theme-muted</div>
<div class="p-2 theme-success theme-muted">.theme-success .theme-muted</div>
<div class="p-2 theme-danger theme-muted">.theme-danger .theme-muted</div>
<div class="p-2 theme-warning theme-muted">.theme-warning .theme-muted</div>
<div class="p-2 theme-info theme-muted">.theme-info .theme-muted</div>
<div class="p-2 theme-inverse theme-muted">.theme-inverse .theme-muted</div>
<div class="p-2 theme-secondary theme-muted">.theme-secondary .theme-muted</div>

Mit Rahmen:

<div class="p-2 theme-primary theme-muted theme-border">.theme-primary .theme-muted .theme-border</div>
<div class="p-2 theme-accent theme-muted theme-border">.theme-accent .theme-muted .theme-border</div>
<div class="p-2 theme-success theme-muted theme-border">.theme-success .theme-muted .theme-border</div>
<div class="p-2 theme-danger theme-muted theme-border">.theme-danger .theme-muted .theme-border</div>
<div class="p-2 theme-warning theme-muted theme-border">.theme-warning .theme-muted .theme-border</div>
<div class="p-2 theme-info theme-muted theme-border">.theme-info .theme-muted .theme-border</div>
<div class="p-2 theme-inverse theme-muted theme-border">.theme-inverse .theme-muted .theme-border</div>
<div class="p-2 theme-secondary theme-muted theme-border">.theme-secondary .theme-muted .theme-border</div>

Verschachtelte Links übernehmen die Muted-Vordergrundfarbe:

<div class="p-3 theme-primary theme-muted">Theme Primary mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-accent theme-muted">Theme Accent mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-success theme-muted">Theme Success mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-danger theme-muted">Theme Danger mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-warning theme-muted">Theme Warning mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-info theme-muted">Theme Info mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-inverse theme-muted">Theme Inverse mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>
<div class="p-3 theme-secondary theme-muted">Theme Secondary mit einem <a class="underline-50 hover:underline-100" href="#">verschachtelten Link</a>.</div>

Vergleich

Alle drei Stile je Theme-Farbe nebeneinander, jeweils mit Link:

<div class="d-flex gap-2 mb-2">
    <div class="theme-primary theme-contrast p-3 flex-fill text-center rounded">Primary mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-primary theme-subtle p-3 flex-fill text-center rounded">Primary mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-primary theme-muted p-3 flex-fill text-center rounded">Primary mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
  </div>
<div class="d-flex gap-2 mb-2">
    <div class="theme-accent theme-contrast p-3 flex-fill text-center rounded">Accent mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-accent theme-subtle p-3 flex-fill text-center rounded">Accent mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-accent theme-muted p-3 flex-fill text-center rounded">Accent mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
  </div>
<div class="d-flex gap-2 mb-2">
    <div class="theme-success theme-contrast p-3 flex-fill text-center rounded">Success mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-success theme-subtle p-3 flex-fill text-center rounded">Success mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-success theme-muted p-3 flex-fill text-center rounded">Success mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
  </div>
<div class="d-flex gap-2 mb-2">
    <div class="theme-danger theme-contrast p-3 flex-fill text-center rounded">Danger mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-danger theme-subtle p-3 flex-fill text-center rounded">Danger mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-danger theme-muted p-3 flex-fill text-center rounded">Danger mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
  </div>
<div class="d-flex gap-2 mb-2">
    <div class="theme-warning theme-contrast p-3 flex-fill text-center rounded">Warning mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-warning theme-subtle p-3 flex-fill text-center rounded">Warning mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-warning theme-muted p-3 flex-fill text-center rounded">Warning mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
  </div>
<div class="d-flex gap-2 mb-2">
    <div class="theme-info theme-contrast p-3 flex-fill text-center rounded">Info mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-info theme-subtle p-3 flex-fill text-center rounded">Info mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-info theme-muted p-3 flex-fill text-center rounded">Info mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
  </div>
<div class="d-flex gap-2 mb-2">
    <div class="theme-inverse theme-contrast p-3 flex-fill text-center rounded">Inverse mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-inverse theme-subtle p-3 flex-fill text-center rounded">Inverse mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-inverse theme-muted p-3 flex-fill text-center rounded">Inverse mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
  </div>
<div class="d-flex gap-2 mb-2">
    <div class="theme-secondary theme-contrast p-3 flex-fill text-center rounded">Secondary mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-secondary theme-subtle p-3 flex-fill text-center rounded">Secondary mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
    <div class="theme-secondary theme-muted p-3 flex-fill text-center rounded">Secondary mit <a class="underline-50 hover:underline-100" href="#">Link</a></div>
  </div>

Mit Komponenten

Die Theme-Utilities spielen gut mit Komponenten zusammen, die Theming unterstützen. Setze die Theme-Farbe an einen Container und die Stil-Klassen an die einzelnen Elemente.

<div class="theme-primary">
    <div class="d-flex gap-2 mb-3">
      <span class="badge theme-contrast">Contrast-Badge</span>
      <span class="badge theme-subtle">Subtle-Badge</span>
      <span class="badge theme-muted">Muted-Badge</span>
    </div>
  </div>
  <div class="theme-danger">
    <div class="d-flex gap-2 mb-3">
      <span class="badge theme-contrast">Contrast-Badge</span>
      <span class="badge theme-subtle">Subtle-Badge</span>
      <span class="badge theme-muted">Muted-Badge</span>
    </div>
  </div>

Du kannst Theme-Farben im selben Container auch mischen, indem du verschiedene .theme-{farbe}-Klassen an die Kindelemente setzt:

<div class="d-flex gap-2">
    <div class="theme-success theme-contrast p-3 rounded">Erfolg</div>
    <div class="theme-warning theme-contrast p-3 rounded">Warnung</div>
    <div class="theme-danger theme-contrast p-3 rounded">Gefahr</div>
  </div>

Reset

Mit .theme-reset verwirft ein verschachtelter Teilbaum das geerbte Theme und kehrt zu den Standardwerten der Komponente zurück. Details unter Theme-Utility-Klassen.

<div class="theme-primary p-3 rounded">
    <span class="badge theme-contrast">Primary-Badge</span>
    <span class="badge theme-reset">Standard-Badge</span>
  </div>

Erzeugtes CSS

Die Stil-Klassen erzeugen folgendes CSS:

.theme-contrast {
  --theme-fg: var(--theme-contrast);
  --theme-fg-emphasis: var(--theme-contrast);
  background-color: var(--theme-bg);
  color: var(--theme-contrast);
}

.theme-subtle {
  background-color: var(--theme-bg-subtle);
  color: var(--theme-fg);
}

.theme-muted {
  --theme-fg: var(--theme-fg-emphasis);
  background-color: var(--theme-bg-muted);
  color: var(--theme-fg-emphasis);
}

Die Sass-Definition in der Utilities-API findest du in der Originaldoku.