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 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:

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

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

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

Skin toggler

It's possible to create a skin toggler. Create a dark theme inside your main scss file, but this time wrap @include rule with any custom class. Then add the button switch to toggle this class for the body element. 

        
            
            // DARK SKIN
            $my-theme-primary: #1266f1;
            $my-theme-secondary: #b23cfd;
            $my-dark-theme: mdb-dark-theme($my-theme-primary, $my-theme-secondary);

            .dark {
              @include mdb-theme($my-dark-theme);
            }
          
        
    
        
            
            <button class="btn btn-primary" (click)="toggleSkin()">Toggle skin</button>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              toggleSkin() {
                document.body.classList.toggle('dark');
              }
            }