Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Warning: Use of undefined constant MDB_PAYPAL_WEBHOOK_ID - assumed 'MDB_PAYPAL_WEBHOOK_ID' (this will throw an Error in a future version of PHP) in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/paypal/class-mdb-paypal-webhook.php on line 23

Notice: Undefined index: HTTP_REFERER in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Bootstrap 5 Theme - examples & tutorial

Theme MDB Pro component

Bootstrap 5 Theme

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


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.

Go to your project created with MDB Webpack Starter, open index.scss file located in src/scss/ folder and replace the code there with the following code:


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.


Ready-to-use dark skin

For your convenience, we added a ready-to-use dark skin to our UI KIT pro essential and pro advanced. Installation is very easy, because you just need to replace the current mdb.min.css stylesheet path with mdb.dark.min.css. The files are located in the css folder.