Lege das Farbschema eines einzelnen Elements fest und steuere damit, wie der Browser Formularfelder, Scrollbalken und eingebettete Dokumente zeichnet.

Die CSS-Eigenschaft color-scheme teilt dem Browser mit, welche Farbschemata ein Element unterstützt. Bootstrap setzt sie bereits: Reboot vergibt light dark an :root, und jeder data-bs-theme-Wert legt ein Schema fest. Die Utilities brauchst du nur, wenn ein Element vom Rest der Seite abweichen soll.

• .color-scheme-light und .color-scheme-dark erzwingen ein Schema.
• .color-scheme-auto folgt der Systemeinstellung.
• Nützlich für Fremd-Embeds ohne Dark Mode.

Mehr zur Eigenschaft im MDN.

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

Hell und dunkel

Mit .color-scheme-light oder .color-scheme-dark legst du das Schema eines Elements fest; der Browser zeichnet dessen native Bestandteile passend dazu. Im Beispiel erhält ein Datumsfeld innerhalb eines dunklen Themes einen hellen Picker.

<div class="p-3 bg-body fg-body" data-bs-theme="dark">
    <label class="form-label" for="scheme-dark-date">Dunkler Picker (geerbt)</label>
    <input class="form-control mb-3" id="scheme-dark-date" type="date">
    <label class="form-label" for="scheme-light-date">Heller Picker</label>
    <input class="form-control color-scheme-light" id="scheme-light-date" type="date">
  </div>

Setze die Klasse direkt an das betroffene Element, nicht an einen Wrapper.

Systemeinstellung folgen

Mit .color-scheme-auto unterstützt ein Element beide Schemata. Der Browser folgt dann für dieses Element der Systemeinstellung – auch wenn data-bs-theme ein Theme erzwingt.

<iframe class="color-scheme-auto" src="..."></iframe>

Die Warnung oben gilt auch hier: Die Bootstrap-Farben in diesem Element folgen der Systemeinstellung und nicht mehr dem erzwungenen Theme.

Eingebettete Inhalte von Drittanbietern

Ein eingebettetes Dokument folgt der Systemeinstellung; das data-bs-theme-Attribut der Elternseite sieht es nicht. Reboot setzt deshalb color-scheme: light dark an jedes <iframe>, damit das Embed transparent bleibt. Details findest du unter Reboot.

Manche Fremd-Embeds haben keinen Dark Mode. Ist das System dunkel eingestellt, malt der Browser dahinter einen weißen Hintergrund. Setze in diesem Fall .color-scheme-light an genau dieses iframe, dann ist der Hintergrund wieder transparent.

<iframe class="color-scheme-light" src="..."></iframe>

Weitere Werte ergänzen

Bootstrap liefert drei Werte, die die oben beschriebenen Fälle abdecken. CSS kennt weitere wie normal oder only light. Sie fehlen bewusst, weil sie an einem <iframe> problematisch sind: Safari und Firefox übertragen sie auf das eingebettete Dokument und schalten dessen Dark Mode ab – und light erledigt dasselbe mit klarerem Namen.

Weitere Werte ergänzt du über die Utilities-API. Gib dabei die drei Standardwerte erneut an, weil deine Gruppe die von Bootstrap ersetzt:

// my-bootstrap.scss
@use "bootstrap/scss/bootstrap" with (
  $utilities: (
    "color-scheme": (
      property: color-scheme,
      class: color-scheme,
      values: (
        light: light,
        dark: dark,
        auto: light dark,
        normal: normal,
        only-light: only light
      )
    )
  )
);

So erhältst du zusätzlich .color-scheme-normal und .color-scheme-only-light. Den Sass-Quelltext der Utility findest du in der Originaldoku.