How to Enable Theme Customization Dynamically in ASP.NET MVC?

Introduction for Theme Customization in ASP.NET MVC:

In ASP.NET MVC Theme Customization Dynamically, the User can 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. The user can change the theme color using the LESS file and it will be reflected in the whole theme in ASP.NET MVC.

Here we are using a LESS file for theme customization in ASP.NET MVC.

Here we are using a 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 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 fewer files. It also supports CSS classes.

Tools & Packages Needed for setting up a theme in Microsoft .NET MVC:

1. Microsoft Visual Studio
2. NuGet Microsoft ASP.NET Web Optimization package
3. NuGet dotless package

Implementation in ASP.NET MVC:

We implemented Theme customization in ASP.NET MVC. There are some steps for implementation using LESS file theme customization.

We need to make one variable.less file which stores all variables that are used in the less file. There are two kinds of color light and dark. We can also use any one of them in the LESS file. There are many inbuilt functions for customization dynamically in .NET MVC.

For LESS File Implementation Example:

We have to declare the following variables.

@MainColor1 : #222a3c;
@MainColor2 : (lignten(@MainColor1,30%);

Need to add a custom.less file. we want the above variables in the custom.less file. but we need to import variables.less file on top.

@import “variables”;
.btn-custom1 {
background-color: @MainColor1;
border-color: @MainColor1;
}
.btn-custom2 {
background-color: @MainColor2;
border-color: @MainColor2;
}

Now By changing the variable value in the variables file. It will reflect changes in CSS files.

But For that, we have to compile LESS files. We can compile it using visual studio feature [Web Essentials](http://vswebessentials.com/).

It is not feasible for users to compile it every time in ASP.NET MVC.

There is a NuGet package called [dotless](https://www.nuget.org/packages/dotless/). It will compile all fewer files dynamically and reflect changes of the Theme. You need to install the dotless package of Nuget in your ASP.NET MVC application.

Create a LessTransform class in the App_Start directory of your application.

public class LessTransform : IBundleTransform
{
public void Process(BundleContext context, BundleResponse response)
{
response.Content = dotless.Core.Less.Parse(response.Content);
response.ContentType = “text/css”;
}
}

Now, Install the [Optimization package](https://www.nuget.org/packages/Microsoft.AspNet.Web.Optimization/) of NuGet for bundling and minifications of CSS and JS.

After installing the package there will be a file called BundleConfig.cs in the App_Start directory.

You need to create a bundle and add CSS, LESS file in BundleConfig like the following. You need to maintain sequence here.

Add variables.less at first, thereafter add a custom.less file in the minification.

	
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);
}
}

Now, add this bundle in the MVC view.

@Styles.Render(“~/Content/CustomTheme”)

Make sure that the debug tag is false in web.config file of your asp.net mvc application.

<compilation debug=”true”>

Now, To make this user-friendly we need to add a customization page in admin.

It will read variables from the LESS file. Users can update it from the customization page.

We need to update variables in the LESS file When a user clicks on the save button.

By changing the variables file it will automatically change the colors of the theme based on the variables.

Issues in this .NET approach:

• Sometimes we need to delete the 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.

Know more about ASP.NET MVC tips and tricks for your everyday problems faced as an ASP.NET MVC developer.

We have teams of ASP.NET MVC developers. We will be happy to help you!