prefers-color-scheme

Eingebettete Elemente

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" />) anstatt in HTML eingebettet. 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 erlaubt. Cross-Origin-Elemente sind Elemente, die von einem anderen Host als der Seite abgerufen werden, die sie referenziert. Um mehr über SVGs zu erfahren, siehe die SVG-Dokumentation und für weitere Informationen zu iframes, siehe die iframe-Dokumentation.

Syntax

light

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

dark

Gibt an, dass der Benutzer gemeldet hat, dass er ein Interface bevorzugt, das ein dunkles Thema hat.

Beispiele

Erkennen eines dunklen oder hellen Themas

Eine häufige Verwendung ist es, standardmäßig ein helles Farbschema zu verwenden und dann prefers-color-scheme: dark zu nutzen, um die Farben auf eine dunklere Variante zu überschreiben. Es ist auch möglich, es umgekehrt zu machen.

Dieses Beispiel zeigt beide Optionen: Thema A verwendet helle Farben, kann aber auf dunkle Farben überschrieben werden. Thema B verwendet dunkle Farben, kann aber auf helle 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 black;
  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-Abfrage:

.theme-a {
  background: #ddccaa;
  color: #773311;
}
@media (prefers-color-scheme: dark) {
  .theme-a.adaptive {
    background: #775533;
    color: #ddccbb;
    outline: 5px dashed black;
  }
}

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

.theme-b {
  background: #444477;
  color: #bbbbdd;
}
@media (prefers-color-scheme: light) {
  .theme-b.adaptive {
    background: #bbccdd;
    color: #333344;
    outline: 5px dotted black;
  }
}

Ergebnis

Die linken Kästchen zeigen Thema A und Thema B, wie sie ohne die prefers-color-scheme Media-Abfrage erscheinen würden. Die rechten Kästchen zeigen dieselben Themen, aber eines von ihnen wird basierend auf dem aktiven Farbschema des Benutzers in eine dunklere oder hellere Variante geändert. Der Umriss eines Kästchens wird gestrichelt oder gepunktet, wenn es basierend auf den Einstellungen Ihres Browsers oder Betriebssystems geändert wurde.

Geerbtes Farbschema in eingebetteten Elementen

Das folgende Beispiel zeigt, wie das prefers-color-scheme Media-Feature 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" /> erfolgen.

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

Der zweite und dritte Kreis erben das color-scheme vom einbettenden Element; die @media Abfrage ermöglicht das Festlegen von Stilen des SVG-Inhalts basierend auf dem color-scheme des übergeordneten Elements. In diesem Fall ist das übergeordnete Element, das eine color-scheme CSS-Eigenschaft hat, ein <div>.

<div>
  <img alt="circle" src="" />
</div>
<div class="light">
  <img alt="circle" src="" />
</div>
<div class="dark">
  <img alt="circle" src="" />
</div>

.light {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

// Embed an SVG for all <img> elements
for (const img of document.querySelectorAll("img")) {
  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>
  `)}`;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• 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: Programmierung eines Dunkelmodus für Ihre Website
• Neugestaltung Ihres Produkts und Ihrer Website für den Dunkelmodus
• Ändern von Farbschemata in Windows, macOS, Android oder anderen Plattformen.