We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How Metronic theme styles can be mapped to our Theme Studio generated files

Process to create Metronic theme from our Bootstrap theme using Theme Studio application

  1. Consider, let we need to create default Metronic theme using our bootstrap theme of Theme Studio application.



  1. First, open our online theme studio application http://js.syncfusion.com/themestudio/


  1. Select bootstrap theme in Theme Studio as show below




  1. Under the personalize option of Theme Studio, please apply below specified color values in the above bootstrap theme of Theme Studio.




Header Background


Header Border


Header font


Header icon




Content Background


Content Border


Content font




Default Background


Default Border


Default font


Default icon




Hover Background


Hover Border


Hover font


Hover Icon




Active Background


Active Border


Active font


Active icon



Or else, simply you can upload the below attached JSON file in Theme Studio in order to get the Metronic themes

Metronic JSON file


  1. In right side content panel, our components are rendered with default Metronic theme. So now you can check the customized color changes with the demo.


  1. Finally, you can download the created Metronic theme using download option of Theme Studio and can use the downloaded CSS in your application.


Notes: Please refer following link to check our online Theme Studio help document https://help.syncfusion.com/js/theme-studio


Article ID: Published Date: Last Revised Date: Platform: Control:
7766 06/14/2017 06/14/2017 JavaScript General
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon