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:
@import '~mdb-ui-kit/src/scss/mdb.pro.scss';
$my-theme-primary: #9c27b0; // theme primary color, change this value to customize theme
$my-theme-secondary: #69f0ae; // theme secondary color, change this value to customize theme
$my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new theme using primary and secondary colors
// include theme styles
@include mdb-theme($my-theme);
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.
@import '~mdb-ui-kit/src/scss/mdb.pro.scss';
$my-theme-primary: #9c27b0; // theme primary color, change this value to customize theme
$my-theme-secondary: #69f0ae; // theme secondary color, change this value to customize theme
$my-light-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new light theme using primary and secondary colors
// include theme styles
@include mdb-theme($my-light-theme);
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.
@import '~mdb-ui-kit/src/scss/mdb.pro.scss';
$my-theme-primary: #9c27b0; // theme primary color, change this value to customize theme
$my-theme-secondary: #69f0ae; // theme secondary color, change this value to customize theme
$my-dark-theme: mdb-dark-theme($my-theme-primary, $my-theme-secondary); // create the new dark theme using primary and secondary colors
// include theme styles
@include mdb-theme($my-dark-theme);
