Ein trockener Ansatz für Farbthemen in CSS

Kürzlich fragte Florens Verschelde, wie man Dark -Modus -Stile in Klassen- und Medienabfragen definiert und gleichzeitig eine wiederholte Deklaration der benutzerdefinierten CSS -Eigenschaften vermeidet. Ich habe dieses Problem auch in der Vergangenheit gestoßen, habe aber keine geeignete Lösung gefunden.

Unser Ziel ist es, die neu definierende - und damit wiederholende - schützende Eigenschaften beim Umschalten des hellen und dunklen Modus zu vermeiden. Dies ist das Ziel der programmierenden Trockenprogrammierung (nicht wiederholen Sie sich), aber das typische Muster des Schaltens von Themen ist normalerweise wie folgt:

 <code>:root { --background: #fff; --text-color: #0f1031; /* etc. */ } @media (prefers-color-scheme: dark) { :root { --background: #0f1031; --text-color: #fff; /* etc. */ } }</code>

Verstehst du was ich meine? Natürlich mag es in diesem kurzen Beispiel nicht wichtig erscheint, aber stellen Sie sich vor, Sie beschäftigen sich gleichzeitig mit Dutzenden von benutzerdefinierten Eigenschaften - es ist eine Menge Wiederholung!

Dann erinnerte ich mich an den Trick der Verwendung von --var: ; Und obwohl ich zuerst nicht daran gedacht habe, fand ich einen Weg, um es zum Laufen zu bringen: anstatt var(--light-value, var(--dark-value)) oder ähnliche verschachtelte Kombinationen zu verwenden, verwenden Sie sie nebeneinander!

Natürlich muss es jemanden geben, der dies vor mir entdeckt hat, aber ich habe noch nicht gehört, dass (oder besser gesagt, missbrauchte) CSS -benutzerdefinierte Eigenschaften verwendet wurden, um dies zu erreichen. Ohne weiteres ist dies die Idee:

 <code>--color: var(--light, orchid) var(--dark, rebeccapurple);</code>

Wenn der --light auf initial festgelegt wird, wird der Fallback -Wert (Orchidee) verwendet, was bedeutet, dass --dark auf ein Speicherzeichen festgelegt werden sollte (dies ist ein gültiger Wert), wodurch der endgültige berechnete Wert so aussieht:

 <code>--color: orchid ; /* 注意额外的空格*/</code>

Wenn --light auf den Raum gesetzt ist und --dark auf die initial eingestellt ist, erhalten wir einen berechneten Wert als:

 <code>--color: rebeccapurple; /* 同样，注意空格*/</code>

Nun, das ist in Ordnung, aber wir müssen --light und --dark -benutzerdefinierte Eigenschaften auf der Grundlage des Kontextes definieren. Benutzer können Systemeinstellungen (hell oder dunkel) festlegen oder bestimmte UI -Elemente verwenden, um das Thema der Website zu wechseln. Genau wie beim Beispiel Florens werden wir diese drei Fälle definieren und Lea's vorgeschlagene Konstanten "und" aus "für einige kleine Lesbarkeitsverbesserungen verwenden, um auf einen Blick klar zu machen:

 <code>:root { /* 感谢Lea Verou！*/ --ON: initial; --OFF: ; } /* 默认情况下，浅色主题处于启用状态*/ .theme-default, .theme-light { --light: var(--ON); --dark: var(--OFF); } /* 默认情况下，暗色主题处于禁用状态*/ .theme-dark { --light: var(--OFF); --dark: var(--ON); } /* 如果用户偏好暗色，那么他们将获得暗色主题*/ @media (prefers-color-scheme: dark) { .theme-default { --light: var(--OFF); --dark: var(--ON); } }</code>

Wir können dann alle Themenvariablen ohne Duplizierung in einer Deklaration festlegen. In diesem Beispiel wird theme-* auf html Element eingestellt, sodass wir verwenden können :root als Selektor, genau wie es viele Menschen gerne tun, aber wenn die kaskadierenden Eigenschaften benutzerdefinierter Eigenschaften sinnvoller sind, können Sie sie auch auf den body setzen.

 <code>:root { --text: var(--light, black) var(--dark, white); --bg: var(--light, orchid) var(--dark, rebeccapurple); }</code>

Um sie zu verwenden, verwenden wir var() und eingebaute Fallback, weil wir vorsichtig sein möchten:

 <code>body { color: var(--text, navy); background-color: var(--bg, lightgray); }</code>

Hoffentlich haben Sie die Vorteile hier gesehen. Anstatt eine große Anzahl von benutzerdefinierten Eigenschaften zu definieren und zu wechseln, verarbeiten wir zwei Eigenschaften und setzen alle anderen Eigenschaften nur einmal auf :root . Dies ist eine enorme Verbesserung, von wo wir angefangen haben.

Implementieren Sie mehr Trockencode mit Preprozessor

Wenn ich mir die folgende Codezeile außerhalb des Kontextes ansehen würde, wäre ich definitiv verwirrt, weil die Farbe ein einzelner Wert ist, nicht zwei!

 <code>--text: var(--light, black) var(--dark, white);</code>

Deshalb bin ich lieber ein wenig abstrakt. Wir können eine Funktion mit unserem bevorzugten Präprozessor (SASS in meinem Fall) einrichten. Wenn wir den Code mit --light und --dark -Werten behalten, müssen wir nur die tatsächliche benutzerdefinierte Attributerklärung ändern. Erstellen wir eine light-dark Funktion, die uns die CSS-Syntax zurückgibt:

 @Function hell-dark ($ hell, $ dark) {
  @Return var (-light, #{$ hell}) var (-dunkel, #{$ dark});
}

Wir werden es so verwenden:

 :Wurzel {
   --Text: #{helldark (schwarz, weiß)};
   --bg: #{hell-dark (orchid, rebeccapurple)};
   -Accent: #{hell-dark ( #6d386b, #b399cc)};
}

Sie werden feststellen, dass es einen Interpolationsabscheider #{ … } um den Funktionsaufruf gibt. Ohne diese gibt SASS den Code so aus, wie es ist (genau wie eine normale CSS -Funktion). Sie können verschiedene Implementierungen ausprobieren, aber die Syntaxkomplexität hängt von Ihren Vorlieben ab.

Wie sieht dies nach einer trockeneren Code -Basis aus?

Mehr als ein Thema? Kein Problem!

Sie können dies mit mehr als zwei Modi tun. Je mehr Themen Sie hinzufügen, desto komplexer wird es zu verwalten, aber der Schlüssel ist, dass dies möglich ist! Wir fügen eine weitere Gruppe von Ein- oder Aus -Variablen -Themen hinzu und stellen eine zusätzliche Variable in der Werteliste fest.

 <code>.theme-pride { --light: var(--OFF); --dark: var(--OFF); --pride: var(--ON); } :root { --text: var(--light, black) var(--dark, white) var(--pride, #ff8c00) ; /* 换行符是完全有效的*/ /* 其他要声明的变量… */ }</code>

Ist das eine Fähigkeit? Ja, absolut. Ist dies ein guter Anwendungsfall für potenzielle, nicht existierende CSS-Booleschen? Ok, das ist ein Traum.

Und du? Haben Sie dieses Problem anders gelöst? Bitte teilen Sie die Kommentare mit!

Das obige ist der detaillierte Inhalt vonEin trockener Ansatz für Farbthemen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!