prefers-color-scheme

Für SVGs und iframes ermöglicht prefers-color-scheme das Setzen eines CSS-Stils für das SVG oder iframe basierend auf dem color-scheme des Elternelements 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 "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, die sie referenziert, abgerufen werden. Um mehr über SVGs zu erfahren, sehen Sie sich die SVG-Dokumentation an, und für weitere Informationen über iframes finden Sie in der iframe-Dokumentation.

light

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

dark

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

Ein häufiger Gebrauch ist es, standardmäßig ein helles Farbschema zu verwenden und dann prefers-color-scheme: dark zu verwenden, um die Farben auf eine dunklere Variante zu überschreiben. Es ist auch möglich, dies umgekehrt zu tun.

Dieses Beispiel zeigt beide Optionen: Thema A verwendet helle Farben, kann jedoch auf dunkle Farben überschrieben werden. Thema B verwendet dunkle Farben, kann aber auf helle Farben überschrieben werden. Am Ende werden bei Unterstützung von prefers-color-scheme durch den Browser 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 zu einem dunklen Schema basierend auf der Media-Abfrage:

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

.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 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 zu einer dunkleren oder helleren Variante geändert. Die Umrandung eines Kästchens wird gestrichelt oder punktiert sein, wenn sie basierend auf den Einstellungen Ihres Browsers oder Betriebssystems geändert wurde.

Das folgende Beispiel zeigt, wie das prefers-color-scheme Media-Feature in einem eingebetteten Element verwendet wird, um ein Farbschema von einem Elternelement 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" /> 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 Theme-Umschalter des System-Betriebssystems umgeschaltet werden.

Der zweite und dritte Kreis erben das color-scheme vom einbettenden Element; die @media Abfrage ermöglicht das Setzen von Styles des SVG-Inhalts basierend auf dem color-scheme des Elternelements. In diesem Fall ist das color-scheme des Elternelements eine CSS-Eigenschaft eines <div>.

<div>
  <img />
</div>
<div class="light">
  <img />
</div>
<div class="dark">
  <img />
</div>

.light {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

// Embed an SVG for all <img> elements
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>
  `)}`;
}

• color-scheme Eigenschaft
• <meta name="color-scheme">
• Sec-CH-Prefers-Color-Scheme HTTP-Header Benutzer-Agent-Client-Hinweis
• Simulieren von prefers-color-scheme in Firefox
• Video: Dark Mode für Ihre Webseite programmieren
• Redesign Ihres Produkts und Ihrer Webseite für den Dunkelmodus
• Farbsc hemen ändern in Windows, macOS, Android, oder anderen Plattformen.