Theming and dark mode
In this tutorial we will learn how to create a famous dark mode in our MDBootstrap project and also how to create a custom theme with the colors we want (for example the colors of our brand).
Note: Theming and dark mode are a feature available in the paid part of MDB, called MDB Pro. If you want to learn more about what you get with MDB Pro, click the button below.MDB Pro
You can use this special promo code to get 15% discount for MDB Pro:
If you are not interested in MDB Pro, feel free to skip this lesson. It is not necessary to complete the tutorial, so in this situation click "Next" and proceed.
Since we have used the MDB Free version of the Vite starter in this tutorial so far, we now need to download it again, this time in the MDB Pro version.
Step 1 - launch the terminal
Launch the terminal (if you are using Windows, type "cmd" in the system search and run Command Line app / on MacOS, search for the "terminal" application).
Step 2 - log in to the MDB account in the terminal
To log in to MDB GO, in the terminal type the
mdb login command and press enter.
Then enter your username and password that you set when registering your MDB account.
Step 3 - in the terminal navigate to the path where you want to download MDB Pro
I want to download it on my desktop, so I am going to type in the terminal:
Step 4 - Initialize MDB Pro Vite starter
Enter the command below in the terminal, to download MDB PRO on your computer:
mdb frontend init mdb5-essential-standard-vite
When the download is completed, navigate to this newly downloaded folder in the terminal:
Step 5 - install MDB Pro
To install MDB PRO you need an Access Token, generated on your GitLab account.You should get access to it to your email address after purchasing MDB PRO.
If you don't have Access Token yet please follow the tutorial (I have marked exactly the part where it is shown how to generate a token)
If you already have access token, enter the command to the terminal as follows, replacing
ACCESS_TOKEN your token:
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential
MDB PRO will be installed on your computer, under the path where you initiated Vite Starter. It may take a while, depending on the speed of your internet.
When the installation is completed, enter the command below to the terminal to run Vite Starter.
The terminal will launch Live Server, where you will have a preview of your project. Go to the Localhost link given in the terminal.
Now let's add some sample code to the
index.html file to see if everything works as it should be. Replace the existing content with the following code:
<div class="container my-5"> <div class="row d-flex justify-content-center"> <div class="col-lg-6 col-md-10"> <div class="card"> <div class="card-body"> <h5 class="card-title">Theming test</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> </div> </div> </div> </div> </div>
After saving the file your browser should refresh automatically and you should see a simple card:
Step 6 - import MDB Pro source files
The first thing we have to do now is to import the right source files.Therefore, in the
/src/scss/styles.scss file, change the following import:
To this import:
Step 7 - create a new custom theme
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.
Below the import add the following code and specify the primary and secondary colors, by setting values to the
$my-theme-secondary variables. Of course, you can choose whatever color you want.
@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);
After saving the file you should see that the buttons in the card have changed the colors to the ones that we specified in the variables:
Step 8 - create a dark mode
It's possible to create a dark theme using
mdb-dark-theme function. You just need
secondary colors, all other parameters will be
@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);
After saving the file you should see the entire design changed to the dark mode:
And that's it for this lesson. Congratulation, you have finished the MDB Advanced Features tutorial! It wasn't that easy, so well done you 💪
If something doesn't work as expected or you have some question - do not hesitate to hit me up on the twitter 😉
Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.