Skip to main content

Theming

The appearance of brokerize UI components (Elements) can be extensively customized to match your own design. This way you can seamlessly integrate the platform into your existing application and create a consistent user experience.

Customization Options​

You can change central design elements that make up a branding according to your wishes.

These include elements such as:

  • Colors
  • Fonts and spacing
  • Support for light and dark mode
  • Integration of your own logos and icons

Technical Implementation​

The customization is usually done via CSS variables (Custom Properties) that are evaluated by all brokerize components. The most important variables are:

: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;
	/* ...more theme tokens */
}

You can set these variables globally in your project or override them specifically for individual components. A complete list of all available theme tokens can be found in the Elements components documentation.

Example: Theme Object in JavaScript​

Alternatively, you can also pass the theme directly as an object to the components:

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

Integration and Best Practices​

Changes to the theme variables automatically affect all integrated brokerize components.

This way the platform fits seamlessly into your design and remains flexible for future customizations.

Live Demo​

A live demo can be found at https://app.brokerize.com/theming, where you can see the effects of the different CSS variables in real time.