prefers-color-scheme

Eingebettete Elemente

Für SVGs 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 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 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 weitere Informationen über iframes, siehe die iframe-Dokumentation.

Syntax

light

Zeigt an, dass ein Benutzer angegeben hat, dass sie eine Benutzeroberfläche bevorzugen, die ein helles Thema hat, oder keine aktive Präferenz ausgedrückt haben.

dark

Zeigt an, dass ein Benutzer angegeben hat, dass sie eine Benutzeroberfläche bevorzugen, die ein dunkles Thema hat.

Beispiele

Erkennen eines dunklen oder hellen Themas

Eine häufige Verwendung ist die Verwendung eines hellen Farbschemas standardmäßig und dann die Verwendung von prefers-color-scheme: dark, 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 jedoch auf dunkle Farben überschrieben werden. Thema B verwendet dunkle Farben, kann jedoch 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, wird jedoch basierend auf der Medienabfrage auf ein dunkles Schema umschalten:

.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, wird jedoch basierend auf der Medienabfrage auf ein helles Schema umschalten:

.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-Medienabfrage erscheinen würden. Die rechten Kästchen zeigen die gleichen 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 sein, wenn es basierend auf Ihren Browser- oder Betriebssystemeinstellungen geändert wurde.

Geerbtes Farbschema in eingebetteten Elementen

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 festzulegen. Dies würde normalerweise in HTML als <img src="circle.svg" alt="circle" /> erfolgen.

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

Die zweiten und dritten Kreise erben das color-scheme vom einbettenden Element; die @media-Abfrage ermöglicht 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 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 property
• <meta name="color-scheme">
• Sec-CH-Prefers-Color-Scheme HTTP-Header Benutzer-Agent-Client-Hint
• Simulieren von prefers-color-scheme in Firefox
• Video: Coding a Dark Mode for your Website
• Neugestaltung Ihres Produkts und Ihrer Website für den Dunkelmodus
• Ändern von Farbschemata in Windows, macOS, Android oder anderen Plattformen.