How to change the theme color in less css using javascript/jquery

Question

am using the below less css to change different theme color

@lightRed:   #fdd;
@lightGreen: #dfd;
@lightBlue:  #ddf;

@defaultThemeColor:@lightBlue;

#header{
.wrapper();
width:@defaultWidth;
height:80px;
margin-bottom:20px;
background:@defaultThemeColor;
}

#menu{
background:@defaultThemeColor;
}

And html is as follows:

<div id="swatch">
<ul>
<li><a href="">theme1</a></li>
<li><a href="">theme2</a></li>
<li><a href="">theme3</a></li>
</ul>
</div>

when theme1 is clicked @lightRed theme should be loaded, for theme2 @lightBlue and for theme3 @lightGreen

Please let me know how should be my javascript/ jquery to change the theme color on click

Answer 1

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 jQuery and modifyVars on a .click event might work:

$('.theme_option').click(function(event){
    event.preventDefault();
    less.modifyVars({
        '@defaultThemeColor': $(this).attr('data-theme')
    });
});

Answer 2

using the on-click event to change the background color

this is example for changing the background color using on change..pls check it out [Example][http://jsfiddle.net/6YVes/]

Answer 3

If you just want to change the background color onclick li's, assign each li a class and trigger a jQuery click event on every class like below:

HTML:

<div id="swatch">
    <ul>
        <li><a class="red" href="">theme1</a></li>
        <li><a class="green" href="">theme2</a></li>
        <li><a class="blue" href="">theme3</a></li>
    </ul>
</div>

JS:

$('.red').click(function(){
   $(this).css('background-color',"red")
 });
$('.green').click(function(){
   $(this).css('background-color',"red")
 });
$('.blue').click(function(){
   $(this).css('background-color',"blue")
 });