Enable theme customization dynamically in ASP.Net MVC

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 files 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.

Hire Now!

Do You Need Help From Our Dedicated ASP Net MVC Developer?

Hire our best ASP Net MVC developer on hourly, Full-time, Part-time bases. We are ready to help you resolve the problems for ASP MVC web app development.
Hire Now!

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 those 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 declared following variables.

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

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.

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

Now By changing variables value in 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.

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.

 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  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 bundle and add css , less files in BundleConfig  like 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 MVC view.

@Styles.Render("~/Content/CustomTheme")

Make sure that 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 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 user click on 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 .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 every day problems faced as a ASP.NET MVC developer.

By | 2017-09-20T11:59:25+00:00 October 8th, 2016|Asp.Net, Asp.Net MVC, CSS, Theme Customization|