Dynamically changing less variables

I want to change a less variable on client side. Say I have a less file

@color1: #123456;
@color2: @color1 + #111111;

.title { color: @color1; }
.text { color: @color2; }

I want that user yo pick a color and change the value of @color1 and recompile css without reloading the page.

Basically I'm looking for a js function, something like this

less_again({color1: '#ff0000'}) 

Solution 1:

Marvin, I wrote a function that does exactly what you're looking for, last night.

I have created a fork on Github; https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc

Take a look at it. Since this is a recent addition, I'd like to hear your comments on the addition. This solution fits my needs perfectly and I think it will do the same for you.

Here is a basic sample;

Sample LESS:

@bgColor: black;
@textColor: yellow;
body {background: @bgColor; color: @textColor;}

From JS:

less.modifyVars({
  '@bgColor': 'blue',
  '@textColor': 'red'
});

Solution 2:

The creator of less.js added some features that should allow you to do something like this. Read the comments and the answers here: Load less.js rules dynamically