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).

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:

        
            
  
      cd desktop
  
      
        
    

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:

        
            
    
        cd mdb5-essential-standard-vite
    
        
        
    

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.

        
            
    
        npm start
    
        
        
    

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:

        
            
    
        @import 'mdb-ui-kit/css/mdb.min.css';
    
        
        
    

To this import:

        
            
    
        @import 'mdb-ui-kit/src/scss/mdb.pro.scss';
    
        
        
    

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-primary and $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 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);
    
        
        
    

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 😉