diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/library-unpkg-theme-scss.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/library-unpkg-theme-scss.png new file mode 100644 index 0000000000..26adc14996 Binary files /dev/null and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/library-unpkg-theme-scss.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/themes-libman-compile.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/themes-libman-compile.png new file mode 100644 index 0000000000..6def501761 Binary files /dev/null and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/themes-libman-compile.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/vs_extension.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/vs_extension.png new file mode 100644 index 0000000000..37f26f98f8 Binary files /dev/null and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/vs_extension.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/web_compiler.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/web_compiler.png new file mode 100644 index 0000000000..bb40aecc0a Binary files /dev/null and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/web_compiler.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/theme.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/theme.md index 6a441924e7..06b0324c01 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/theme.md +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/theme.md @@ -710,11 +710,11 @@ LibMan offers the following advantages,  -3.you can refer the combined control styles by using `@syncfusion/ej2@{{ site.ej2version }}` in the library textbox. +3.You can refer the combined control styles by using `@syncfusion/ej2@{{ site.ej2version }}` in the library textbox.  -4.you can able to choose specific files or include all library files like below. +4.You can able to choose specific files or include all library files like below. For example, Choose specific files and the bootstrap5 theme is selected in the dialog. @@ -765,6 +765,87 @@ N> If you use individual control styles, you should install their dependent cont 8.Run the application and see the bootstrap5 themes downloaded from LibMan were applied. +You can also choose `SCSS` file and customize theme variables using the [Web Compiler 2022+](https://marketplace.visualstudio.com/items?itemName=Failwyn.WebCompiler64) by following steps. + + + +1.Now, use a specific target location and click the install button to get the `libman.json` with the following content. + +{% tabs %} +{% highlight cshtml tabtitle="libman.json" %} + +{ + "version": "1.0", + "defaultProvider": "unpkg", + "libraries": [ + { + "library": "@syncfusion/ej2@{{ site.ej2version }}", + "destination": "wwwroot/lib/syncfusion/ej2/", + "files": [ + "base/bootstrap5.scss" + ] + } + ] +} + +{% endhighlight %} +{% endtabs %} + +2.Open Command Prompt from the application root directory and run the following command to install the Syncfusion `node_modules` in this application. + +{% tabs %} +{% highlight c# tabtitle="CMD" %} + +npm install @syncfusion/ej2 + +{% endhighlight %} +{% endtabs %} + +3.Open Visual Studio 2022 and click the Extensions in the toolbar. + + + +4.Search the `Web Compiler 2022+` in search box and download the extension. + + + +5.Right-click the `SCSS` file and click the Web Compiler to compile the file. + + + +6.The `compilerconfig.json` file is created by default. Then, provide the location of the compiled CSS file and include a path as shown in the following code snippet. + +{% tabs %} +{% highlight c# tabtitle="compilerconfig.json" %} + +[ + { + "inputFile": "wwwroot/lib/syncfusion/ej2/base/bootstrap5.scss", + "outputFile": "wwwroot/lib/syncfusion/ej2/base/bootstrap5.css", + "options": { + "includePath": "node_modules/@syncfusion" + } + } +] + +{% endhighlight %} +{% endtabs %} + +7.You can refer to the theme sheet which was downloaded from the client-side library in the `
` element of the **~/Pages/Shared/_Layout.cshtml** file. + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + + ... + + + +{% endhighlight %} +{% endtabs %} + +8.Run the application and see the bootstrap5 themes downloaded from LibMan were applied. + N> [View sample in GitHub](https://github.com/SyncfusionExamples/asp-net-core-libman) ## Change theme dynamically