Category / Section
How to Customize Syncfusion ASP.NET Core theme via appsettings.json?
4 mins read
From below steps, we can customize the Syncfusion ASP.NET Core component's themes using the appsettings.json file by SASS variables.
2. Open Command Prompt from the application root directory and run the following command to install the @syncfusion/ej2 npm package.
npm i @syncfusion/ej2
3. Create a custom.scss file inside ~/wwwroot/css location and provide the variables to override, as shown below.
custom.css
$primary: pink !default;
$success: #0baa07 !default;
$warning: #dc0a0a !default;
@import 'ej2/button/fluent.scss'
5. Set up the configuration as below for AspNetCore.SassCompiler.
appsettings.json
{
//...
"SassCompiler":{
"SourceFolder": "wwwroot/css/custom.scss",
"TargetFolder": "wwwroot/css/custom.css",
"Arguments": "--style=expanded",
"IncludePaths": ["node_modules/@syncfusion"]
}
//...
}
6. Add the following configuration in Program.cs to include the Sass in your project.
//...
#if DEDUG
builder.Services.AddSassCompiler();
#endif builder.Services.AddRazorPages();
var app = builder.Build(); //...
7. To read the appsettings.json file, add variables to appsettings.json.
{
//...
"primary": "red",
"success": "yellow",
"warning": "pink",
//...
}8. Add below configuration in Pages/Index.cshtml.cs to read the values from the appsettings.json.
using Microsoft.AspNetCore.MVC;
using Microsoft.AspNetCore.MVC.RazorPages;
namespace Sample.Pages
{
public class IndexModel : PageModel
{
private IHostEnvironment env;
private readonly IConfiguration Configuration;
public IndexModel(IConfiguration configuration, IHostEnvironment hostingEnvironment)
{
env = hostingEnvironment;
Configuration = configuration;
}
public void OnGet()
{
var primaryValue = Configuration.GetValue<string>("primary");
var successValue = Configuration.GetValue<string>("success");
var warningValue = Configuration.GetValue<string>("warning");
string updated = @"$primary:" + primaryValue + " !default;\n$success:" + successValue + "!default;\n $warning:" + warningValue + " !default;\n@import 'ej2/button/fluent.scss';";
System.IO.File.WriteAllText(env.ContentRootPath+"\\wwwroot\\css\\custom.scss", updated);
}
}
}
Additional Details:
Refer to this for more details.
