0Pricing
CSS Academy · Lektion

color-scheme-Eigenschaft

Verwenden Sie die color-scheme-Eigenschaft, um dem Browser mitzuteilen, welche Themes ein Element unterstützt.

color-scheme-Eigenschaft ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist color-scheme?

Die Eigenschaft color-scheme teilt dem Browser mit, welche Farbschemata ein Element oder die Seite unterstützt. Der Browser verwendet diese Information anschließend, um eigene UI-Elemente – etwa Bildlaufleisten, Formularelemente, Kontrollkästchen und Eingaberahmen – passend zum angeforderten Schema zu gestalten.

Werte von color-scheme

Zulässige Werte:

  • normal: Das Element verwendet den Standard des Dokuments
  • light: Das Element unterstützt nur das helle Farbschema
  • dark: Das Element unterstützt nur das dunkle Farbschema
  • light dark: Unterstützt beide Schemata; der Browser wählt anhand der Einstellung
  • dark light: Bevorzugt das dunkle Schema und verwendet als Fallback das helle

Browser-UI-Elemente

Der Browser gestaltet diese Elemente automatisch entsprechend dem color-scheme:

  • Bildlaufleisten
  • Eingabefelder, Textbereiche und Auswahllisten
  • Kontrollkästchen und Optionsfelder
  • Bereichsregler
  • Datum-/Uhrzeitauswahl

Auf dem html-Element festlegen

Wenn Sie color-scheme auf dem Wurzelelement festlegen, ändert sich die Darstellung der Systemoberfläche für die gesamte Seite:

<input type="checkbox" /> <select><option>A</option><option>B</option></select>

Entsprechendes Meta-Tag

Sie können color-scheme auch in HTML als Meta-Tag deklarieren, damit es früher angewendet wird (bevor CSS geladen wird):

<pre class="code-sample">&lt;meta name="color-scheme" content="light dark"&gt;</pre>

Dark Mode ohne benutzerdefinierte Farben

Ein minimaler Dark Mode: Setzen Sie color-scheme: dark, und lassen Sie den Browser Formularelemente und Bildlaufleisten automatisch behandeln:

<p>Native form controls and page background adapt to dark automatically.</p>
<input type="text" placeholder="Native input" />

Mit prefers-color-scheme kombinieren

Verwenden Sie prefers-color-scheme, um die Einstellung zu erkennen und sowohl Ihre benutzerdefinierten Tokens als auch die Eigenschaft color-scheme gemeinsam festzulegen:

<div class="demo">Themed via variables + color-scheme</div>

Bereichsbezogenes color-scheme

Wenden Sie color-scheme auf bestimmte Elemente an, um isolierte helle Bereiche auf einer dunklen Seite zu erstellen:

<div class="light-widget">Always-light widget<br/><input type="date" /></div>

Erzwungene Farben / Windows High Contrast

Die Media Query forced-colors erkennt den Modus „Hoher Kontrast“ von Windows. Verwenden Sie color-scheme und forced-colors gemeinsam, um eine umfassende Unterstützung der Barrierefreiheit zu gewährleisten.

<div class="card">Card respects forced-colors mode</div>

system-color-Schlüsselwörter

Wenn forced-colors aktiv ist, verwenden Sie CSS-Schlüsselwörter für Systemfarben, die auf die barrierefreie Farbpalette des Nutzers abgebildet werden:

<button>System-styled button</button>

Schnelltest

Welches CSS-Verhalten wird aktiviert, wenn Sie color-scheme: dark auf dem html-Element festlegen?

Zusammenfassung

color-scheme weist den Browser an, wie er seine eigenen UI-Steuerelemente für ein Element oder eine Seite gestalten soll. Verwenden Sie global color-scheme: light dark, um eine automatische Anpassung der nativen UI zu ermöglichen. Kombinieren Sie dies mit benutzerdefinierten CSS-Eigenschaften für eine vollständige Dark-Mode-Implementierung. Verwenden Sie das Meta-Tag, damit die Einstellung bereits vor dem Laden von CSS angewendet wird.

Häufig gestellte Fragen

Ist die Lektion „color-scheme-Eigenschaft“ kostenlos?

Ja — der vollständige Text von „color-scheme-Eigenschaft“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „color-scheme-Eigenschaft“?

Verwenden Sie die color-scheme-Eigenschaft, um dem Browser mitzuteilen, welche Themes ein Element unterstützt. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „color-scheme-Eigenschaft“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. prefers-color-scheme-Media-Query
  2. CSS-Variablen für Themes
  3. color-scheme-Eigenschaft
  4. Automatischer und manueller Dark-Mode-Umschalter
← Zurück zu CSS Academy