Dynamically changing less variables in .net

Question

problem : i have to allow users to have different colors for buttons , icons , text color as per their preference using spectrum.js

i have tried to solve this using dotless for that i created a file .less and added all values. now issue is that i have to get values from databased based on loggedInuser and have to dynamically change

@back-color: blue;
@font-color: red;

to different values and this has to be done run time not compile time. i know it will cost me some delay but i dont know how to solve it other wise.

i have been thinking of different solution rather to have a less file why not on saving time i create a css file save in database and when user gets logged in create a css file and inject in to header

<link href="~/Content/dynamic.css" rel="stylesheet" />

can some one help me or any suggestion regarding this??

any help will be appreciated

Answer 1

Option 1 Implement special handler for resource, that represent css customized by user. This handler must:

1. Make lookup (by userId) to cache where already rendered less (i.e. css) is stored;
2. If cache has entry for requested user, then write css to response and finish handling of this request;
3. If cache has no entry for requested user, then render less for this user, store it in cache and go to step 2.

You also should remove/update cache entry when user changes his color theme. You can implement cache as you wish: in memory, inside database or inside static files that named (for example) like %userId%.css.

Option 2 Instead of render less on server side (and consume server resources) you can render less on client dynamically. Exmaple: http://jsbin.com/wiqosutexe/5/edit?html,js,output

1. Include lessjs http://lesscss.org/#download-options;
2. Provide less template to client script (get with ajax, include in script itself or somehow else);
3. Use user preferences to make substitutions to less template.
4. Render template and insert results (plain css) into dynamically created style tag.