Einbinden externer Bootstrap 5 Themes

[Steffen Wellegehausen]

Moin,

beim Versuch unser Bootstrap-5-Theme einzubinden, sind wir auf einige Probleme gestoßen. Uns ist aufgefallen, dass die Styles aus dem Theme nach dem einbinden nur sehr inkonsistent auf das Masterportal angewandt werden. Beispielsweise wurden unsere definierten Primary-, Secondary-, Info-, etc. Farben nicht übernommen.

Als wir das Problem genauer untersucht haben, ist uns aufgefallen, dass Bootstrap-Variablen und -Klassen über die Masterportal-Komponenten hinweg derzeit sehr inkonsistent oder teilweise gar nicht genutzt werden. An mehreren Stellen werden eigene Styles definiert, statt sich aus den Bootstrap-Variablen und -Klassen zu bedienen, so dass das einbinden eines Themes fast keine Auswirkungen hat.

Beispielsweise verwendet der aktive Navigations-Menüpunkt (z.B. ein Tool unter "Werkzeuge") die background-color "accent_active", die in der variables.scss-Datei definiert ist. Das Verwenden davon ist wiederum hier definiert: modules/tools/style.scss. "accent_active" ist keine Bootstrap-5 Variable und wird auch nicht aus einer abgeleitet, daher hat ein externes Theme keine Auswirkungen darauf. Zudem wird zwar eine Variable namens accent_hover definiert, jedoch wird diese nicht beim Hovern über diesen Navigations-Menüpunkt verwendet. Stattdessen wird ein Mixin namens primary_action_hover als neue background-color beim Hovern verwendet, welches die primary-color benutzt.

Das Bootstrap-Theme, vorliegend als .css-Datei, haben wir über einen import Befehl in der css/style.css eingebunden. Derzeit scheint es nicht möglich externe Bootstrap-Themes wirkungsvoll einzubinden. Wird an diesem Problem derzeit noch gearbeitet bzw. ist es bereits bekannt? Und ist unser Vorgehen mit dem Einbinden eines externen Themes überhaupt korrekt?

[Klara Böcker]

Moin Herr Wellegehausen,

momentan arbeite ich an Bootstrap 5 und der Nutzung von Variablen. In der aktuellen Version sollte die Variable $primary eigentlich überall da eingesetzt werden, wo bei uns das $dark_blue verwendet wird. Welche Version nutzen Sie momentan?
\$secondary wird tatsächlich bisher noch nicht flächendeckend eingesetzt. Dafür nutzen wir noch das $light_grey vermehrt.
Generell muss ich dazu sagen, arbeite ich gerade daran, dass generell Variablen in unserem Code verwendet wird und die Nutzung auch einheitlicher wird. Von daher ist dieser Hinweis nützlich.
Können sie mir Ihre Theme Datei zur Verfügung stellen, damit ich den Use Case auch testen kann? Bisher habe ich nur gedacht, dass Personen selbst im Code die Inhalte der Variables.scss überschreiben/ändern indem man die Variablenwerte anpasst.
VG Klara

[Steffen Wellegehausen]

Hallo Klara,

wir können uns gerne zu dem Thema nochmal austauschen, vielleicht ist das auch einfacher, um das Problem zu beschreiben und das Theme nochmal anzuschauen, das wir benutzen. Ich hatte jetzt auf die Schnelle noch keine Kontaktadresse gefunden, aber sonst könntest du uns unter [e-mail] kurz kontaktieren, dann können wir ggfs. auf dem kurzen Dienstweg einen Termin ausmachen. Es gab von unserer Seite auch Interesse sich in die Bootstrap Umstellung unterstützend einzubringen, wenn das gewünscht ist.

Beste Grüße,

Steffen Wellegehausen, Team WaaS