We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Themes

By default, Zap supports two themes: dark and light. You can also create your own theme. When you do, make sure the name is unique, ensuring it differs from both 'dark' and 'light'. You can also apply global styles for each type of component by passing a Zap configuration to the provideZapOption provider. Here's how you can do it.

Default theme

Import ZapConfig and pass the theme you want to use. By default it's set to dark

app.config.ts

Custom theme

Create your own theme using the ZapTheme interface. Once created, add the theme to the themeLibrary. To use this theme, pass its key from the themeLibrary to the theme property, as shown on the right.

app.config.ts

Multi theme setup

You can manage dynamic themes using the ZapThemer service. Simply inject the service and call the setTheme method. If your theme is dynamic, ensure that the theme provided in ZapConfig via provideZapOption is always up to date. For example, if you're storing the theme in local storage, you can pass it like this: theme: localStorage.getItem('project-theme');

app.component.ts

Multi theme setup with custom themes

If you want to switch between two or more custom themes or one custom theme with one library theme, make sure you pass all the custom themes you want to use via themeLibrary in the provideZapOption provider.

Global styles

You can provide global styles for each type of component. Additionally, you can pass a global configuration, such as shape, which will be applied to all components. This global configuration can be overridden by individual component configurations. You can also provide global styles such as scrollbarColor. You can pass different color for different theme.

app.config.ts

Component styles

You can provide various component-level styles, including shape, size, color, font sizes, font weights, and letter spacing. If you have multi theme setup, you can also provide theme specific colors. Check component documentations for more details on each component.

app.config.ts