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

问题

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

回答1:

you could try using less.js functions like:

less.refreshStyles()

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')
    });
});

回答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/]

回答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")
 });

回答4:

Note that lesscss is a Css that must be compilerd. That means you can not modify directly the behaviour of your lesscss but you can with css compiled. Browsers do no understand lesscss you have to keep it in mind.

So, I think the best way to do this is using two classes on the object you want to modify, one with the shape and another with the theme. In this way you can switch from one to anothr by modifying using jQuery the theme class. Imagine something like:

lesscss:

.theme-1 {
    //Here goes your theme colors
}
.theme-2 {
    //Here goes more theme colors and rules
}
#header {
    .wrapper();
    width:@defaultWidth;
    height:80px;
    margin-bottom:20px;
    background:@defaultThemeColor;
}

And your html:

<div id="header" class="theme-1"/>
<button onclick="$('.theme-1').removeClass('theme-1').addClass('theme-2');" name="Change to theme 2"/>
<button onclick="$('.theme-2').removeClass('theme-2').addClass('theme-1');" name="Change to theme 1"/>

Hope it helps.

回答5:

As prem suggested, it would be best to apply a class to each theme

CSS:

/* -- [ light blue theme (default) ] ---------- */

#header, #header.lightblue {
    background: #ddf;
    height: 80px;
    margin-bottom: 20px;
    width: 300px;
}
#menu, #menu.lightblue {
    background: #ddf;
}

/* -- [ light red theme ] ---------- */

#header.lightred {
    background: #fdd;
    height: 95px;
    margin-bottom: 10px;
    width: 400px;
}
#menu.lightred {
    background: #fdd;
}

/* -- [ light green theme ] ---------- */

#header.lightgreen {
    background: #dfd;
    height: 72px;
    margin-bottom: 15px;
    width: 290px;
}
#menu.lightgreen {
    background: #dfd;
}

This way, to change each theme, you just have to change the class of the container object. Say the container object is the document body, then the body's class be changed to the desired theme.

HTML:

<div id="swatch">
    <ul>
        <li><a class="theme_option" data-theme="red" href="#">theme1</a></li>
        <li><a class="theme_option" data-theme="green" href="#">theme2</a></li>
        <li><a class="theme_option" data-theme="blue" href="#">theme3</a></li>
    </ul>
</div>

JavaScript (jQuery):

jQuery('a.theme_option').click(function(e){
    e.preventDefault();
    var theme_class = jQuery(this).attr('data-theme');
    jQuery(body).attr('class', theme_class);
}