Kommen Sie zur Helldark () Seite

gleichzeitig sowohl helle als auch dunkle Modi erstellen, mag entmutigend erscheinen. Verwalten von @media Abfragen basierend auf prefers-color-scheme, der von den Einstellungen der Betriebssysteme unter Berücksichtigung der Benutzerüberschreibungen und der Erstellung von kontrastierenden Farbpaletten für die Barrierefreiheit fördern die Komplexität. Aber das moderne CSS vereinfacht dies erheblich.

native HTML -Farbschemata nutzen

HTML bietet sowohl ein Standard-Black-on-White als auch ein weiß-auf-schwarzer Thema (obwohl sie oft durch CSS-Zurücksetzungen versteckt sind). Das Thema White-on-Black bietet eine hervorragende Grundlage für den Dunklen Modus und minimiert den Bedarf an manuellen Anpassungen an Elementen wie Eingängen und Schaltflächen.

Automatisches Farbschema über Betriebssystemeinstellungen

Ohne @media Abfragen ermöglicht die Einklang color-scheme: light dark; im Stammelement das automatische Schalter basierend auf den OS -Einstellungen des Benutzers. Browser respektieren die "hell", "dunkle" oder "automatische" Farbschema des Betriebssystems. Dies kann auch über ein HTML <meta> -Tag: <meta content="light dark" name="color-scheme"> erreicht werden. Beide Methoden erzielen das gleiche Ergebnis: Sowohl helle als auch dunkle Schemata zur Verfügung stellen und das entsprechende anwenden.

Sie können die Eigenschaft <meta> Tag oder CSS mit JavaScript steuern. Das Anwenden von color-scheme auf einzelne Elemente ist ebenfalls möglich, erfordert jedoch eine explizite Deklaration von color und background-color Eigenschaften, um Erbschaftsprobleme zu vermeiden.

Standardtext- und Hintergrund -Farbvariablen

Die Standard "Schwarz" und "Weiß" in diesen Themen sind oft leicht unschwärmend und cremes und verbessert den Kontrast. Diese Farben sind als <system-color></system-color> Variablen zugänglich: Canvas (Hintergrund) und CanvasText (Text). Diese Variablen passen sich automatisch mit der Änderung color-scheme an und verhalten sich ähnlich wie currentColor, aber CanvasText bleibt als Standardtextfarbe festgelegt.

Die folgenden Beispiele zeigen die Auswirkungen der Änderung der color-scheme Eigenschaft:

Es gibt zahlreiche andere <system-color></system-color> Variablen (insgesamt 19). MDN bietet eine vollständige Liste. In ihrem Rendering und ihrer Unterstützung existieren jedoch Browser- und OS -Inkonsistenzen. Egor Kloos 'system.css Framework verfolgt den aktuellen Status dieser Variablen.

Farben für beide Modi

deklarieren

Bei einem automatischen hellen/dunklen Schalter wird die optimale Methode zum Deklarieren von Farben entscheidend. Hier sind drei Ansätze, die am wenigsten bis zum effektivsten eingestuft werden:

3. Opazitätsbasierter Ansatz:

Mithilfe der Farbdeckkraft (z. B. rgb(128 0 0 / 0.5)) ermöglicht die Canvas Farbe durch, ist jedoch weniger effektiv für Text und führt zu gedämpften Farben.

2. color-mix() Funktion:

Die Funktion color-mix() ermöglicht das Mischen von Farben mit angegebenen Proportionen (z. B. color-mix(in oklab, Canvas 75%, RebeccaPurple)). Dies ist nützlich, um die Konsistenz der Farbtöne und die Sättigung über die Modi hinweg aufrechtzuerhalten. Oklab- und Oklch -Farbräume bieten eine bessere wahrgenommene Leichtigkeit und Sättigungskontrolle im Vergleich zu HSL.

1. light-dark() Funktion:

Die light-dark() -Funktion (z. B. light-dark(lavender, saddlebrown)) bietet die genaueste Steuerung und ermöglicht völlig unterschiedliche Farben in hellen und dunklen Modi. Es kann auch color-mix() enthalten. Die Browserunterstützung ist hoch, aber ein Fallback könnte erforderlich sein.

Vorteile von color-scheme und light-dark() über @media Abfragen

color-scheme bietet mehrere Vorteile gegenüber @media prefers-color-scheme:

• bietet mühelos einen grundlegenden dunklen Modus.
• verarbeitet os-Präferenzbasis nativ.
• erlaubt JavaScript-basiertes Umschalten und respektieren Sie deklarierte Farben.

Implementieren Sie Hell-, Dunkel- und Auto -Modus -Steuerelemente

Anbieten hell, dunkler und automatischer Modi bietet Flexibilität. Der automatische Modus stellt die OS -Einstellung standardmäßig ein, während Benutzer manuell wechseln können. Dies beseitigt die Notwendigkeit komplexer Erkennungslogik und Ereignishörer.

CSS-basierte Farbschema-Einstellung

reine CSS-Einstellung ist mithilfe der Pseudo-Selektor- und Funkeingänge oder :has() -Elemente möglich. Dies ist jedoch auf Änderungen pro Seiten beschränkt und erfordert <select></select> Unterstützung. :has()

JavaScript-basierte Farbschema-Einstellung

JavaScript ist nützlich für anhaltende Einstellungen und Benutzerinteraktionen. Das

-Tag oder <meta> kann verwendet werden, um die html.style.setProperty() zu manipulieren. Funktionen verbessern die Wiederverwendbarkeit der Code. color-scheme

Erinnern Sie die Benutzereinstellungen

Die Webspeicher -API (LocalStorage oder SessionStorage) ermöglicht das Speichern von Benutzerpräferenzen für zukünftige Besuche.

bleibt über Sitzungen hinweg bestehen, während localStorage im Browserverschluss gelöscht wird. Die Auswahl hängt vom Benutzerverhalten und der Überlegungen zur Einhaltung von DSGVO ab. sessionStorage

Überlegungen zur Zugänglichkeit

Die Bereitstellung von hellen und dunklen Modi verbessert die Zugänglichkeit. Erwägen Sie, Kontrasteinstellungen (mit

und prefers-contrast) zur weiteren Anpassung hinzuzufügen. Verwenden Sie ARIA -Attribute (z. B. filter: contrast()) sparsam für die Kompatibilität für erweiterte Bildschirmleser. aria-pressed

Abschließend vereinfacht das moderne CSS die Schaffung heller und dunkler Modi. Nehmen Sie die Flexibilität und Benutzerauswahl an, die von

, color-scheme und Benutzerpräferenzspeicher angeboten werden. light-dark()

Das obige ist der detaillierte Inhalt vonKommen Sie zur Helldark () Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!