How to use parameters in Twitter Bootstrap loaded dynamically from the database - css

Question

I have a website where I need multiple themes.
So www.mysite.com/Client1/ uses red buttons and www.mysite.com/Client2/ uses blue buttons.
The number of clients are dynamic stores in a DB, and the colors are also stored in the DB. Can be changed at anytime by the client.
Currently I am using Twitter Bootstrap LESS files and ASP MVC Optimization (bundle).
My App_Start BundleConfig looks like this:
var cssTransformer = new CssTransformer();
var stylesBundle = new StyleBundle("~/Content/bootstrap");
.Include("~/Content/less/bootstrap.less")
stylesBundle.Transforms.Add(cssTransformer);
bundles.Add(stylesBundle);
In variables.less
#btnPrimaryBackground: #linkColor;
The color of #btnPrimaryBackground should change when different urls are called.
How do I change the less variable to use a parameter from my another source (database or other)?

Answer 1

Since Web Optimization does not play nice with dynamic dontent, I decided to not use it.
Instead I have made am ASP MVC ActionResult for LESS, and reference that.
<link rel="stylesheet" type="text/css" href="#Url.Action("Styles", "Theme")">
My ASP MVC Controller looks like this:
public class ThemeController : Controller
{
public ActionResult Styles()
{
var parameters = new Dictionary<string, string>
{
{"themeColor1", "Get theme color 1 here"},
{"themeColor2", "Get theme color 2 here"}
};
var themeLessFilePath = Server.MapPath("~/Content/less/theme.less");
using (var stream = System.IO.File.OpenRead(themeLessFilePath))
{
return new DotLessResult(stream, parameters, true);
}
}
}
And the LESS ActionResult like this:
public class DotLessResult : ActionResult
{
public IDictionary<string, string> Parameters { get; set; }
public string Less { get; set; }
public bool Minify { get; set; }
public DotLessResult(string less, IDictionary<string, string> parameters = null, bool minify = false)
{
Less = less;
Parameters = parameters ?? new Dictionary<string, string>();
Minify = minify;
}
public DotLessResult(Stream stream, IDictionary<string, string> parameters = null, bool minify = false)
: this(new StreamReader(stream).ReadToEnd(), parameters, minify) { }
public override void ExecuteResult(ControllerContext context)
{
var output = Less;
//TODO: Not the way to do this!
foreach (var key in Parameters.Keys)
{
output = Regex.Replace(output, #"#" + key + #":\s*\S+;", "#" + key + ":" + Parameters[key] + ";");
}
var lessEngine = dotless.Core.LessWeb.GetEngine(new DotlessConfiguration { MinifyOutput = Minify, MapPathsToWeb = true, Web = true, CacheEnabled = false});
var css = lessEngine.TransformToCss(output, (string)null);
context.HttpContext.Response.ContentType = "text/css";
using (var writer = new StreamWriter(context.HttpContext.Response.OutputStream, Encoding.UTF8))
{
writer.Write(css);
writer.Flush();
}
}
}
Its NOT the best solution, but it works on my machine TM.
Dont forget to implement some kind of output caching as it will most like be hit alot, and not change very often.