How to change less parameters and compile css dynamically in the browser?

Question

I am trying to implement a basic theme roller functionality using LESS CSS. Suppose I have the following Less Code, which compiles to a .css file included in the page:

@main-background-color: #809BB8;

body
{
    background-color: @main-background-color;
}

I would like to change the @main-background-color dynamically with javascript based on an user action (Color Picker) and compile the LESS code dynamically and refresh the styles of the page so that the user changes are reflected immediately in the browser. Is this possible at all? Please advise!

Thanks

Martin Turjak Martin Turjak · Accepted Answer · 2013-10-07T14:14:31

you could try using less.js functions like:

less.refreshStyles()

or

less.modifyVars()

you can maybe read some more on this here: Dynamically changing less variables

Something along this lines with JavaScript and modifyVars might work:

    var $picked-color = "#809BB8";
    less.modifyVars({
        '@main-background-color': $picked-color
    });

How to change less parameters and compile css dynamically in the browser?

1 Answers