prefers-color-scheme

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

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

light

Gibt an, dass der Benutzer ein Interface bevorzugt, das ein helles Thema verwendet, oder keine aktive Präferenz ausgedrückt hat.

dark

Gibt an, dass der Benutzer ein Interface bevorzugt, das ein dunkles Thema verwendet.

Eine häufige Nutzung besteht darin, ein helles Farbschema standardmäßig zu verwenden und dann prefers-color-scheme: dark zu nutzen, um die Farben in 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 zu dunklen Farben überschrieben werden. Thema B verwendet dunkle Farben, kann aber zu hellen Farben überschrieben 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 jedoch basierend auf der Medienabfrage zu einem dunklen Schema:

.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 jedoch basierend auf der Medienabfrage zu einem hellen Schema:

.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 Medienabfrage erscheinen würden. Die rechten Boxen zeigen die gleichen Themen, aber eines von ihnen wird basierend auf dem aktiven Farbschema des Benutzers zu einer dunkleren oder helleren Variante geändert. Der Umriss einer Box wird gestrichelt oder gepunktet sein, wenn er basierend auf den Einstellungen Ihres Browsers oder Betriebssystems geändert wurde.

Das folgende Beispiel zeigt, wie das prefers-color-scheme Medienmerkmal 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 deren alt Attribute zu setzen. Normalerweise würde dies in HTML als <img src="circle.svg" alt="circle" /> gemacht werden.

Sie sollten drei Kreise sehen, wobei einer in einer anderen Farbe gezeichnet ist. Der erste Kreis erbt das color-scheme vom Betriebssystem und kann mit dem Thema-Umschalter des System-Betriebssystems umgeschaltet werden.

Der zweite und dritte Kreis erbt das color-scheme vom Einbettungselement; die @media Abfrage ermöglicht das Setzen von Stilen des SVG-Inhalts basierend auf dem color-scheme des übergeordneten Elements. 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: Erstellung eines Dunkelmodus für Ihre Website
• Redesign Ihres Produkts und Ihrer Website für den Dunkelmodus
• Ändern von Farbschemata in Windows, macOS, Android, oder anderen Plattformen.