Theme

Angular Bootstrap 5 Theme

Theming system enables you to customize the appearance of all MDB components.

Appearance customization options enable you to create skins for your Angular Bootstrap 5 project. Use predefined dark theme, light theme or create custom themes.

See an example of a dark-theme created using our theme system.


Create a new theme

Creating a theme requires recompiling the scss styles, for this purpose we recommend using MDB Webpack Starter

Creating a new theme requires that you define primary and secondary colors for your application. We prepared functions and mixins that will help you to create a ready to use theme using these colors.

Open styles.scss file and add the following code after MDB styles imports:


Light theme

It's possible to create a light theme using mdb-light-theme function. You just need to define primary and secondary colors, all other parameters will be adjusted automatically.


Dark theme

It's possible to create a dark theme using mdb-dark-theme function. You just need to define primary and secondary colors, all other parameters will be adjusted automatically.