Bootstrap Dark Mode

Bootstrap 5 Dark Mode free template

Responsive Dark Mode theme built with Bootstrap 5 with Dark Mode toggle button that switches between dark and light themes.

Dark Mode toggle/switch button

To create a dark mode toggle button add dark mode styles to your main scss file. Use the @include rule for any customized class. After that create a toggle button for switching those classes within the entire body.

Learn more how to create your own theming systems and advanced configurations in our theming docs.

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

        // 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 data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" id="skinToggler">Toggle skin</button>
        
        
    

        
            
        const skinToggler = document.getElementById('skinToggler');

        const toggleSkin = () => {
        document.body.classList.toggle('dark');
        }

        skinToggler.addEventListener('click', toggleSkin);
        
        
    

Dark mode support

MDB5 Free supports a ready-to-use dark mode. Using the dark mode is very simple, just replace the current path to the mdb.min.css stylesheet with the mdb.dark.min.css file. The file can be found in the css folder.

        
            
        <link rel="stylesheet" href="css/mdb.dark.min.css" />
        
        
    

Related resources