Introduction for Theme Customization in ASP.NET MVC
In ASP.NET MVC Theme Customization Dynamically, User able to customize the theme on the website through custom theme’s settings from the admin panel to change the theme color, backgrounds, side panels, custom menus, portfolios and more functionality of the website using LESS file in ASP.NET MVC.
For example:
To set two types of colors, one is a light colored theme and another is a dark colored theme. User able to change theme color using LESS file and it will be reflected in the whole theme in ASP.NET MVC.
Here we are using LESS file for theme customization in ASP.NET MVC.
LESS is a dynamic cascading style sheet (CSS). It can be compiled and converted into CSS and run on the client side or server side.
It is basically used for theme customization which means one theme with various colors. LESS file supports variable declarations and uses that variable in CSS. We can also add CSS classes in less file. It also supports CSS classes.
Tools & Packages Needed for setting up a theme in Microsoft .NET MVC
- Microsoft Visual Studio
- NuGet Microsoft ASP.NET Web Optimization package
- NuGet dotless package
Implementation in ASP.NET MVC
We had implemented Theme customization in ASP.NET MVC. There are some steps for implementation using LESS file theme customization.
We need to make one variables.less file which stores all variables that are used in the lessfile. There are two kinds of color light and dark. We can also use any one of them in the LESSfile. There are many inbuilt functions for customization dynamically in .NET MVC.
For LESS File Implementation Example:
We have to declare the following variables.
[css]
@MainColor1 : #222a3c;
@MainColor2 : (lignten(@MainColor1,30%);[/css]
Need to add a custom.less file. we want above variables in the custom.less file. but we need to import variables.less file on top.
[css] @import “variables”; .btn-custom1 { background-color: @MainColor1; border-color: @MainColor1; } .btn-custom2 { background-color: @MainColor2; border-color: @MainColor2; }[/css]
Now By changing variables value in variables file. It will reflect changes in CSS files.
But For that, we have to compile LESS file. We can compile it using visual studio feature Web Essentials.
It is not feasible for users to compile it every time in ASP.NET MVC.
There is a NuGet package called dotless. It will compile all less files dynamically and reflect changes of Theme. You need to install dotless package of Nuget in your ASP.NET MVC application.
Create LessTransform class in App_Start directory of your application.
[csharp] public class LessTransform : IBundleTransform { public void Process(BundleContext context, BundleResponse response) { response.Content = dotless.Core.Less.Parse(response.Content); response.ContentType = “text/css”; } }[/csharp]
Now, Install Optimization package of NuGet for bundling and minifications of CSS and JS.
After installing package there will be a file called BundleConfig.cs in App_Start directory.
You need to create a bundle and add CSS, LESS file in BundleConfig like following. You need to maintain sequence here.
Add variables.less at first, thereafter add a custom.less file in the minification.
[csharp] public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { var lessBundleBranding = new Bundle(“~/Content/CustomTheme”).Include ( “~/Areas/Custom_Themes/css/variables.less”, “~/Areas/Custom_Themes/css/custom.less” ); lessBundleBranding.Transforms.Add(new LessTransform()); lessBundleBranding.Transforms.Add(new CssMinify()); bundles.Add(lessBundleBranding); } }[/csharp]
Now, add this bundle in MVC view.
[csharp] @Styles.Render(“~/Content/CustomTheme”)[/csharp]
Make sure that debug tag is false in web.config file of your asp.net mvc application.
[csharp] <compilation debug=”true”>[/csharp]
Now, To make this user-friendly we need to add customization page in admin.
It will read variables from LESS file. user can update it from customization page.
We need to update variables in LESS file When a user clicks on the save button.
By changing variables file it will automatically change colors of theme based on variables.
Issues in this approach
- Sometimes we need to delete cache to reflect changes in the .NET application.
- Make sure that there is no syntax error in any CSS or LESS file. It will create issues in ASP.NET MVC theme customization.