DocumentationAll ComponentsContact usChangelog
IntroductionAccessBug Reports and Feature RequestsContactInstallationAngularReactUsagePortalsData FormatsMobile and TouchFormsDepth levels and stacking contextsTool IntegrationHow to use SkeletonsMicrofrontends

Themes and Customization

ThemesCSS custom propertiesBuild Time ThemingFontsTool Support

Migrationguide

V2 to V3V1 to V2DeprecationsDeprecations V3 to V4Deprecations V2 to V3Deprecations V1 to V2

Known Issues and Workarounds

Combobox initially open menu width not alignedSetting tabindex on disabled componentsTemplating into default SlotsTruncation limitation in title stackPopover position in small iframesStorybook problemsBrowser bugsFlex layout subsampling issueDead Keys in NumberInputsInteractive icon hitarea

Themes

ZUi Web is build with theming and customization in mind. At the moment we provide themes for light and dark but in the future there might be additional themes available. The light and dark theme is also available with the ZBDS colors (use zbds-light or zbds-dark) which were introduced with the new "Beyond for Products" design.

Starting with ZUi v3.2, there is no different anymore between light and zbds-light / dark and zbds-dark. They both look the same and are using the same color variables.

For now, we keep both variations for compatibility reasons. However, in the long run, we will likely remove the zbds versions of the themes and only support light and dark at some point in the future. Please use only the light and dark themes.

For the basic setup, see Installation. Or if you want to update Zui to V3 read the Migrationguide

Switching the Application Theme

To set a theme for the application, you have to use the <zui-theme-provider> component:

// somewhere at the top of your component tree
<zui-theme-provider theme="zbds-light">
   ...
</zui-theme-provider>

Changing its theme attribute will change the themes of all descending ZUi components, regardless whether they are in nested ShadowDOM or not. Switching themes can be enabled, by implementing logic, that changes this theme attribute at runtime.

Nesting zui-theme-provider components is also possible and you can still explicitly set themes on components. Explicitly set themes always win over the zui-theme-provider. If a component does not find a parent zui-theme-provider in the DOM, its theme will default to light.

Changing the Theme for individual components

All ZUi Web components provide the attribute "theme" that can be used to override the application default theme per component. This way it's possible to have one individual component with the theme="dark" while all other components are using the light theme:

<zui-button theme="dark" emphasis="primary-highlight">A dark Button</zui-button>

Known limitations

When you disable Build Time Theming the theming is not supported if you host your component in a ShadowDOM.