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

how to change default theme

hi, I need help on how to change the default theme in my main layout.
For example, the current defaut theme is Flat-Saffron, and I want to set Gradient-Azure as my default theme.

3 Replies

PK Prem Kumar Madhan Raj Syncfusion Team May 23, 2017 11:13 AM UTC

Hi Muhammad,   
Thanks for contacting Syncfusion support.   
We have analyzed the query to “Change the default theme in the mainlayout”. We can achieve this with the following two cases.   
Case1: Referring the CSS file (of required theme) initially in layout.cshtml page to render the Control.    
Please refer the below code snippet to refer the required CSS file in layout.cshtml page.   
    <environment names="Development">   
        <link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />   
        <script src="~/lib/jquery/dist/jquery.js"></script>   
Here, the control will be rendered with the initial referred theme as specified in layout.cshtml file.    
Case2:  Change the theme on Page load   
We can dynamically change the theme of the control on page load using a “id” to the CSS being referred initially and change it on page load by using the function shown below.   
Set id to the CSS reference.    
<environment names="Development">   
        <link rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" id="mycss" />   
        <script src="~/lib/jquery/dist/jquery.js"></script>   
Please refer the below script in you index.cshtml file to change the theme of the control on page load.   
        $(document).ready(function () {   
            $('#mycss[rel=stylesheet]').attr('rel='nofollow' href','http://cdn.syncfusion.com/');   
Prem Kumar.M  

AF afiqdoherty May 24, 2017 01:06 AM UTC

Thanks Prem for your respond,

I have used Case 1 to solve my problem and it works well :) 



PK Prem Kumar Madhan Raj Syncfusion Team May 24, 2017 12:18 PM UTC

Hi Muhammad, 
We are glad to hear that the issue has been fixed. 

Please let us know if you need further assistance.  


Prem Kumar.M 

Live Chat Icon For mobile
Up arrow icon