Bundle Transformer LESS Theme Bundles

View on GitHub

The LESS Theme Builder helpers for BundleTransformer are designed to allow you to easily add static and dynamic themes to your ASP.Net MVC projects.

Creating a ThemeBuilder

Theme builders are simple classes that inject LESS variables into the global variable property of the Bunlde Transformer LESS Translator.

By inheriting from the included class ThemeBuilder we can create a simple theme builder.

using System.Web.Optimization;

public class ExampleThemeBuilder : ThemeBuilder
    public override string GetThemeVariables(BundleContext context)
        return string.Format("themeColour={0}", "#999");

Static Usage

There is a helper method to allow static theme files to be added to the BundleCollection during the application start up cycle.

using System.Web.Optimization
public class BundleConfig
    public static void RegisterBundles(BundleCollection bundles)
        // Code simplified for brevity...
        bundles.AddThemeBundle("~/bundles/css", new string[] { "~/content/theme.less" }, new ExampleThemeBuilder());

Dynamic Usage

For situations when you need to generate themes dynamically, for example in multi-tenant mvc applications where the available themes are not known at compile time, we can include an action that returns a ThemeBundleResult as follows.

public class AssetsController : Controller
    private static readonly string[] ThemeFiles = {"~/Content/less/theme.less"};

    public ThemeBundleResult Theme(string id)
        // Validate theme id at this point.
        if (id != "theme")
            throw new ArgumentOutOfRangeException("id","Invalid theme");

        var themeVirtualPath = string.Format("~/bundles/css/{0}", id);

        return new ThemeBundleResult(themeVirtualPath, ThemeFiles, new ExampleThemeBuilder());