Home
Documentation
Resources
Partners
Community

Resources

Check for updates on our solutions and system performance, or request technical support.

Partners

Discover our program for agencies or developers that offer integration services and sellers who want to hire them.

Community

Get the latest news, ask others for help and share your knowledge.

Set theme - General customizations - Mercado Pago Developers

Intelligent search powered by OpenAI 

Set theme

Client-Side

By default, the Checkout Bricks is instantiated/rendered with the default theme. However, it is possible to select another theme by setting the "theme" parameter when instantiating/rendering the Brick.

javascript

const bricks = mp.bricks({ theme: 'dark' });

If you set the theme on the instantiation of the Brick class, the theme change will be applied to all Bricks that can be instantiated. On the other hand, if the theme is set on render, changes to the theme will only be reflected in the Brick being created as the JavaScript shown below.

          
const settings = {
    ...,
    customization: {
        visual: {
            style: {
                theme: 'dark' | 'default' | 'bootstrap' | 'flat'
           }
        }
    }    
}

        
          
const customization = {
 visual: {
   style: {
     theme: 'dark' | 'default' | 'bootstrap' | 'flat'
   }
 }
};