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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

how to change default theme

Thread ID:





130628 May 23,2017 02:13 AM UTC May 24,2017 12:18 PM UTC ASP.NET Core 3
Tags: ColorPicker
Asked On May 23, 2017 02:13 AM UTC

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.

Prem Kumar Madhan Raj [Syncfusion]
Replied On 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  

Replied On 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 :) 



Prem Kumar Madhan Raj [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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