Zum Hauptinhalt springen

Theming

Das Erscheinungsbild der brokerize UI-Komponenten (Elements) lässt sich umfassend an das eigene Design anpassen. So können Sie die Plattform nahtlos in Ihre bestehende Anwendung integrieren und ein konsistentes Nutzererlebnis schaffen.

Möglichkeiten der Anpassung​

Sie können zentrale Designelemente, die ein Branding ausmachen nach Ihren Wünschen verändern.

Dazu gehören Elemente wie:

  • Farben
  • Schriftarten und Abstände
  • Unterstützung von Light- und Dark-Mode
  • Einbindung eigenes Logos und Icons

Technische Umsetzung​

Die Anpassung erfolgt in der Regel über CSS-Variablen (Custom Properties), die von allen brokerize-Komponenten ausgewertet werden. Die wichtigsten Variablen sind:

:root {
	--zl-primary-color: #3870db;
	--zl-primary-bg-color: white;
	--zl-secondary-bg-color: var(--zl-color-gray-lighter);
	--zl-outline-color: var(--zl-color-primary-light);
	--zl-default-text-color: var(--zl-color-gray-darkest);
	--zl-success-color: #3db969;
	--zl-error-color: #ff3e3e;
	/* ...weitere Theme-Token */
}

Diese Variablen können Sie global in Ihrem Projekt setzen oder gezielt für einzelne Komponenten überschreiben. Eine vollständige Liste aller verfügbaren Theme-Token finden Sie in der Elements-Komponenten-Dokumentation.

Beispiel: Theme-Objekt in JavaScript​

Alternativ können Sie das Theme auch direkt als Objekt an die Komponenten übergeben:

const theme = {
    tokens: {
        'zl-primary-color': '#3870db',
        'zl-primary-bg-color': 'white',
        'zl-secondary-bg-color': 'var(--zl-color-gray-lighter)',
        // ...weitere Token
    },
    // ... weitere Felder
};
createBrokerList({ theme });

Integration und Best Practices​

Änderungen an den Theme-Variablen wirken sich automatisch auf alle eingebundenen brokerize-Komponenten aus.

So fügt sich die Plattform nahtlos in Ihr Design ein und bleibt flexibel für zukünftige Anpassungen.

Live Demo​

Unter https://app.brokerize.com/theming ist eine Live Demo zu finden, unter der man die Effekte der unterschiedlichen CSS Variablen in Echtzeit sehen kann.