If your LESS stylesheet is being rendered in the browser (and not sent as server CSS), you can change the variables in runtime . The file will not be uploaded again, but it will be recompiled.

Your Less style sheet should be loading in your browser, so you should have something like:

<link rel="stylesheet/less" type="text/css" href="estilo.less" />

After loading the stylesheet, you must load less.js :

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>

(you can also download from link )

With this you can use the global object less which allows you to get various information from the style sheet, and change variables. This object and its components are not very well documented, but you can find out a lot through introspection in the JavaScript console.

One of the documented features is the change of variables, which you can perform through the modifyVars() function that receives a map of variables that must be changed:

less.modifyVars({
  '@fundo': '#eee',
  '@texto': 'rgb(255, 135, 176)'
});

See more about this here

There's a lot more you can do with less in your browser, but a lot is not documented so it might change in the future. You can extract data from a Less style sheet that is in your domain (regardless of whether it is being used on your page) with less.Parser , which you can create as:

var parser = new(less.Parser);

And then render using parse() :

parser.parse("@v1: 5pt; @v2: 10pt; h1 {font-size: @v1}", function (e, tree) { ... });

For example, the script below extracts all variables from folha-de-estilo.less and lists within a <ul id="varlist"></id> block that you have on the page.

$( document ).ready(function() {
    var parser = new(less.Parser);
    $.get( "/styles/less/folha-de-estilo.less", function( data ) {
        parser.parse(data, function (e, tree) {
            var variables = tree.variables();
            console.log(variables)
            for (i in variables) {
                var name = variables[i].name;
                var value = variables[i].value.toCSS(); // FALHA se variavel contiver expressao
                $("#varlist").append("<li>"+name + ":" + value+"</li>");
            }
        });
    });
});

Only works for Less variables that have CSS values inside (can not have expressions). This can be useful for leveraging values used in scripts.

You can not change a LESS variable with JavaScript. Before being interpreted by the browser, LESS is compiled as CSS (which does not support variables), and references to the variable are replaced by their value.

What you can do for js is to change the values one by one.

You can also try to create a mixin to get what you need. If in case of color palette questions I advise you to use the very functions of the LESS.

As @bfavaretto said, you can not change the LESS variable using js, however taking a little work you can change the properties for static values that would be, for example, through a function:

function alteraTema(fundo,texto){
    $('.wrapper').css('background-color',fundo);
    $('nav a:hover').css('color',texto);
    $('nav a').css('color',texto);
    $('.active a, .well, .active:after, .navbar-toggle').css('color', texto);
    $('.well').css({
        'background-color':fundo
        ,'border-color':fundo
    });
}

And you can just use alteraTema('#fff','#ccc'); for example and would be altering your theme as desired.

Example running on JSFiddle