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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

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

Platform: jQuery |
Control: General
Tags: metronic

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.

Metro Studio



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


3)Select bootstrap theme in Theme Studio as show below

Theme Studio


Theme Studio



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


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


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

Theme Studio


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


You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

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

Live Chat Icon For mobile