Plugin-Stylesheets müssen CSS- benutzerdefinierte Eigenschaften für Farben verwenden

In wenigen Tagen werde ich diesen PR in den Core mergen, der eine Änderung an der Kompilierung von Plugin-Stylesheets vornimmt. Die Änderung betrifft SCSS-Farbvariablen, die in Plugin-Stylesheets verwendet werden. Die Kurzfassung lautet: Sie müssen durch CSS-Eigeneigenschaften ersetzt werden. Die meisten Plugins wurden bereits aktualisiert, und in vielen Fällen ist dies eine einfache Änderung: Die SCSS-Variable muss durch eine CSS-Eigeneigenschaft ersetzt werden:

-   background-color: $primary-low;
+   background-color: var(--primary-low);

Der Leitfaden unter Update themes and plugins to support automatic dark mode enthält weitere Beispiele und zeigt zudem, wie komplexere Farbtransformationen zu handhaben sind. (Dieser Leitfaden sollte für Plugin-Autoren ausreichen, um sicherzustellen, dass ihre Styles korrekt funktionieren.)


Falls Sie sich fragen, warum wir diese Änderung vornehmen, lesen Sie weiter.

Bisher wurden Core- und Plugin-Stylesheets pro Theme kompiliert, um das Farbschema des Themas an allen Stellen einzubeziehen, an denen SCSS-Farbvariablen verwendet wurden. Das bedeutete, dass eine Website mit vielen Themes (oder eine Multisite-Umgebung) lange zum Vorkompilieren benötigte, da die Anzahl der Core- und Plugin-Stylesheets mit der Anzahl der aktiven Themes multipliziert werden musste, um alle erforderlichen Kombinationen abzudecken.

Seit August 2020 haben wir, um den automatischen Wechsel des dunklen Modus zu unterstützen, ein separates Stylesheet für Farbdefinitionen hinzugefügt, das die Farbvariablen als CSS-Eigeneigenschaften speichert. Diese Änderung ermöglichte es uns, Farbschemata dynamisch zu wechseln, abstrahierte Farben jedoch auch aus den meisten Stylesheets. Dank der Magie der CSS-Eigeneigenschaften können wir nun Farben überall (Core, Plugins, Themes) referenzieren, ohne jedes Theme beim Kompilieren des Stylesheets laden zu müssen.

In den letzten Monaten haben wir alle Plugins auf die Verwendung von CSS-Eigeneigenschaften umgestellt. Die überwiegende Mehrheit der Discourse-Plugins ist nun auf dem neuesten Stand, aber es gibt wahrscheinlich noch vereinzelte Plugins, die weiterhin SCSS-Variablen für Farben verwenden und aktualisiert werden müssen.

10 „Gefällt mir“

Danke für die klare Erklärung. Selbst ich verstehe es jetzt größtenteils!

Wird dies dazu führen, dass Upgrades und Neubuilds auf Seiten mit Theme-Komponenten, die sich nicht an diese Regeln halten, fehlschlagen? So wie es bei Failed to Bootstrap, due to discourse-alt-logo theme component aus einem anderen Grund geschehen ist?

Falls ja, gibt es eine Möglichkeit, die Fehlermeldung klarer zu gestalten (für Personen, die die Build-Logs nicht verstehen)? Und etwas wie „Entfernen Sie das Plugin X, bevor Sie ein Upgrade durchführen

2 „Gefällt mir“

Nein, dies führt nicht dazu, dass Neubuilds fehlschlagen. Es führt lediglich dazu, dass Farben bei Plugins, die nicht aktualisiert wurden, falsch angezeigt werden. Das sollte nur bei selbst erstellten Plugins vorkommen. Ich habe die meisten hier auf Meta veröffentlichten Plugins durchgegangen und sichergestellt, dass sie auf dem neuesten Stand sind.

Das von dir verlinkte Problem hat nichts mit dieser Änderung zu tun. Es handelt sich um eine Theme-Komponente, und wir blockieren derzeit Neubuilds, wenn eine für die automatische Aktualisierung markierte Theme-Komponente nicht automatisch aktualisiert werden kann.

4 „Gefällt mir“

Ah. Hurra. Entschuldigung dafür. Ich versuche noch, mir diese Teile zu erklären.

2 „Gefällt mir“

Okay, ich bin auf ein Problem im Dark Mode gestoßen. Welche Farbeinstellung muss ich für zitierten Text anpassen?

In öffentlichen Kategorien ist es in Ordnung, aber in PM-Blasen ist es unlesbar.

Ich habe ein paar Suchen durchgeführt, aber den richtigen Begriff nicht finden können.

Dies betrifft auch einen Link zu einem Thema.