prefers-color-scheme

Für SVG und iframes ermöglicht prefers-color-scheme, einen CSS-Stil für das SVG oder iframe basierend auf dem color-scheme des übergeordneten Elements auf der Webseite festzulegen. SVGs müssen eingebettet verwendet werden (d.h. <img src="circle.svg" alt="circle" />) im Gegensatz zu inline in HTML. Ein Beispiel für die Verwendung von prefers-color-scheme in SVGs finden Sie im Abschnitt "Geerbtes Farbschema in eingebetteten Elementen".

Die Verwendung von prefers-color-scheme ist in cross-origin <svg> und <iframe> Elementen zulässig. Cross-origin Elemente sind Elemente, die von einem anderen Host abgerufen werden als der Seite, die sie referenziert. Um mehr über SVGs zu erfahren, siehe die SVG-Dokumentation und für weitere Informationen über iframes, siehe die iframe-Dokumentation.

light

Zeigt an, dass der Benutzer mitgeteilt hat, dass er eine Benutzeroberfläche mit einem hellen Thema bevorzugt oder keine aktive Präferenz ausgedrückt hat.

dark

Zeigt an, dass der Benutzer mitgeteilt hat, dass er eine Benutzeroberfläche mit einem dunklen Thema bevorzugt.

Eine häufige Verwendung ist die Nutzung eines hellen Farbschemas standardmäßig und dann prefers-color-scheme: dark, um die Farben auf eine dunklere Variante zu ändern. Es ist auch möglich, es umgekehrt zu machen.

Dieses Beispiel zeigt beide Optionen: Thema A verwendet helle Farben, kann aber auf dunkle Farben umgestellt werden. Thema B verwendet dunkle Farben, kann aber auf helle Farben umgestellt werden. Am Ende, wenn der Browser prefers-color-scheme unterstützt, werden beide Themen hell oder dunkel sein.

HTML

<div class="box theme-a">Theme A (initial)</div>
<div class="box theme-a adaptive">Theme A (changed if dark preferred)</div>
<br />

<div class="box theme-b">Theme B (initial)</div>
<div class="box theme-b adaptive">Theme B (changed if light preferred)</div>

CSS

div.box {
  display: inline-block;
  padding: 1em;
  margin: 6px;
  outline: 2px solid #000;
  width: 12em;
  height: 2em;
  vertical-align: middle;
}

Thema A (braun) verwendet standardmäßig ein helles Farbschema, wechselt aber zu einem dunklen Schema basierend auf der Media Query:

.theme-a {
  background: #dca;
  color: #731;
}
@media (prefers-color-scheme: dark) {
  .theme-a.adaptive {
    background: #753;
    color: #dcb;
    outline: 5px dashed #000;
  }
}

Thema B (blau) verwendet standardmäßig ein dunkles Farbschema, wechselt aber zu einem hellen Schema basierend auf der Media Query:

.theme-b {
  background: #447;
  color: #bbd;
}
@media (prefers-color-scheme: light) {
  .theme-b.adaptive {
    background: #bcd;
    color: #334;
    outline: 5px dotted #000;
  }
}

Ergebnis

Die linken Boxen zeigen Thema A und Thema B, wie sie ohne die prefers-color-scheme Media Query erscheinen würden. Die rechten Boxen zeigen die gleichen Themen, aber eines von ihnen wird basierend auf dem aktiven Farbschema des Nutzers in eine dunklere oder hellere Variante geändert. Der Umriss einer der Boxen wird gestrichelt oder gepunktet sein, wenn er basierend auf den Einstellungen Ihres Browsers oder Betriebssystems geändert wurde.

Das folgende Beispiel zeigt, wie die prefers-color-scheme Media-Funktion in einem eingebetteten Element verwendet wird, um ein Farbschema von einem übergeordneten Element zu erben. Ein Skript wird verwendet, um die Quelle der <img> Elemente und ihre alt Attribute festzulegen. Dies würde normalerweise in HTML als <img src="circle.svg" alt="circle" /> gemacht werden.

Sie sollten drei Kreise sehen, mit einem, der in einer anderen Farbe gezeichnet ist. Der erste Kreis erbt das color-scheme vom Betriebssystem und kann über den Themenwechsler des Betriebssystems umgeschaltet werden.

Der zweite und dritte Kreis erben das color-scheme vom einbettenden Element; die @media Abfrage erlaubt es, die Stile des SVG-Inhalts basierend auf dem color-scheme des übergeordneten Elements festzulegen. In diesem Fall ist das übergeordnete Element mit einer color-scheme CSS-Eigenschaft ein <div>.

<div>
  <img />
</div>

<div style="color-scheme: light">
  <img />
</div>
<div style="color-scheme: dark">
  <img />
</div>

<!-- Embed an SVG for all <img> elements -->
<script>
  for (let img of document.querySelectorAll("img")) {
    img.alt = "circle";
    img.src =
      "data:image/svg+xml;base64," +
      window.btoa(`
      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <style>
          :root { color: blue }
          @media (prefers-color-scheme: dark) {
            :root { color: purple }
          }
        </style>
        <circle fill="currentColor" cx="16" cy="16" r="16"/>
      </svg>
    `);
  }
</script>

• color-scheme Eigenschaft
• <meta name="color-scheme">
• Sec-CH-Prefers-Color-Scheme HTTP Header User Agent Client Hint
• Simulieren von prefers-color-scheme in Firefox
• Video: Eine Dunkelmodus für Ihre Website programmieren
• Neugestaltung Ihres Produkts und Ihrer Website für den Dunkelmodus
• Farbsc Themen ändern in Windows, macOS, Android, oder anderen Plattformen.