Color-scheme-Meta-Tag und CSS-Eigenschaft erstellen

Wählen Sie hell, wenn die Seite nur eine helle Oberfläche unterstützt, dunkel bei ausschließlich dunkler Unterstützung oder beide, wenn sämtliche Komponenten für beide Darstellungen gestaltet wurden. Das Ergebnis ist deterministisch, normalisiert und kann in Vorlagen, Stylesheets, statischen Websites, Komponentenbibliotheken oder Build-Pipelines eingesetzt werden.

Deklarieren Sie nur tatsächlich unterstützte Schemata

Die Angabe color-scheme ist ein Versprechen über die Seite und kein automatischer Themenkonverter. Wählen Sie hell nur, wenn Bedienelemente, Hintergründe, Text, Rahmen, Bilder und Fokuszustände in einer hellen Darstellung funktionieren. Wählen Sie dunkel, wenn dieselben Bestandteile gezielt für eine dunkle Darstellung vorbereitet wurden. Verwenden Sie beide, wenn die gesamte Oberfläche mit beiden Schemata arbeitet. Der Generator bildet diese Wahl auf <code>light dark</code> ab und nennt hell als bevorzugte Variante zuerst. Genauigkeit ist wichtig, weil Browser diese Information für native Steuerelemente, Bildlaufleisten und den Dokumenthintergrund verwenden können. Eine übertriebene Deklaration kann unpassende Steuerelemente oder unlesbare Lichtblitze verursachen. Prüfen Sie deaktivierte Eingaben, automatisches Ausfüllen, Validierungsmeldungen, Textauswahl, Codeblöcke, Widgets und Symbole. Der beste Wert ist die engste wahrheitsgemäße Beschreibung der veröffentlichten Unterstützung. Das Werkzeug formatiert diese Beschreibung einheitlich; Gestaltung und Tests belegen, ob sie zutrifft.

Platzieren Sie das erzeugte HTML und CSS richtig

Fügen Sie das Meta-Element in den <code>&lt;head&gt;</code> des Dokuments ein, möglichst bevor der Browser wesentliche Teile der Oberfläche zeichnet. Das zurückgegebene Tag ist vollständig und eignet sich für statisches HTML, serverseitig gerenderte Layouts oder die Kopfkonfiguration eines Website-Generators. Setzen Sie die CSS-Deklaration in eine Regel, die den gewünschten Geltungsbereich abbildet. Für das ganze Dokument ist dies meist <code>:root</code>; eine Komponente kann die Eigenschaft an ihrer eigenen Wurzel setzen. Der Generator liefert die reine Deklaration ohne Selektor, damit sie mit normalem CSS, Präprozessoren, CSS-Modulen und Stilobjekten funktioniert. HTML- und CSS-Ausgabe verwenden denselben normalisierten Wert und verhindern widersprüchliche Angaben. Sie können beide gemeinsam als frühen Hinweis und expliziten Kaskadenwert nutzen oder nur die für Ihre Architektur benötigte Ausgabe integrieren. Prüfen Sie anschließend den gerenderten Quelltext und das kompilierte CSS, denn Frameworks, Head-Manager, Minifizierer oder doppelte Deklarationen können den tatsächlich beim Browser ankommenden Wert verändern.

Trennen Sie Unterstützung und Themenauswahl

Zwei Schemata zu unterstützen und das aktive Thema auszuwählen sind verwandte, aber unterschiedliche Aufgaben. <code>light dark</code> sagt aus, dass beide Darstellungen unterstützt werden; es erstellt keine Farbvariablen, keinen Umschalter, keine gespeicherte Präferenz und keine Media Query. Eine robuste Umsetzung definiert semantische Variablen für Flächen, Text, Rahmen und Akzente und ändert sie nach der Produktstrategie. Diese kann der Systemeinstellung folgen, eine Kontoeinstellung berücksichtigen, auf ein Dokumentattribut reagieren oder mehrere Ansätze verbinden. Erzeugen Sie die Deklaration erst, wenn alle visuellen Zustände fertig sind. Testen Sie helle und dunkle Systemeinstellungen, Tastaturbedienung, Zoom sowie hohen Kontrast und erzwungene Farben. Kontrollieren Sie Bilder, Iframes, externe Formulare, Syntaxhervorhebung und native Dialoge. Speichern Sie bei Automatisierung die Auswahl zusammen mit den erzeugten Zeichenfolgen. Falls ein Thema entfällt, erzeugen Sie beide Angaben aus der neuen Auswahl erneut, statt nur eine manuell zu ändern. Eine einzige Quelle verhindert Abweichungen zwischen Vorlagen, Paketen und Bereitstellungen.