🙏 Help: Custom (Farb-)Anpassungen

[dmbln34]

Summary

Hallo,

mich würde interessieren, ob es eine Möglichkeit gibt, Text in den KoliBri-Komponenten, die mal auf einem dunklem Grund sitzen, eine andere color zu verpassen, bspw. eine weiße Schriftfarbe, wenn eine KolHeading auf einem dunklen Hintergrund sitzt.
Wie ist das beste Vorgehen hierfür mit dieser Bibliothek?

Additional information

No response

Example

No response

[deleonio]

Hallo @dmbln34,

vielen Dank für Deine Frage.

Die Philosophie der KoliBri-Componenten ist, dass alles durch das individuelle Theme definiert wird. Das heißt, dass Vorder- und Hintergrundfarben bei jeder Komponente fest definiert und im Theme (CSS) hinterlegt ist.

Wie meist in den Designsystemen festgelegt, sollte eine bestimmte Komponente z.B. auch nur in einer fest vorgesehenen Kontext verwendet werden. Meistens ist dort der Hintergrund immer der gleiche.

Sollte das mal nicht der Fall sein, wie beispielsweise bei Hover-Effekten in Tabellen-Zeilen, dann gibt es dafür CSS-Tricks:

• die Farben in der betreffenden Komponente, werden im Theme mittels CSS-Properties definiert
• der Fallback ist dann die reguläre Farbdefinition
• nun kann man von außen an der Komponente situationsabhängig das CSS-Property setzen und doch Einfluss auf das CSS innerhalb der Komponent nehmen

Beispiel: Im Theme wird für die kol-heading die Schrift- und Hintergrundfarbe mittels CSS-Properties definiert:

<kol-heading style="--my-new-background-color: #663;--my-new-font-color: #fff" ...></kol-heading>