come cambiare il colore del tema in meno css utilizzando JavaScript/jQuery

Question

sto usando il seguito meno css per cambiare colore diverso tema

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

@defaultThemeColor:@lightBlue; 

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

#menu{ 
background:@defaultThemeColor; 
} 

e HTML è la seguente:

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

quando theme1 è il tema @lightRed cliccato dovrebbe essere caricato, per theme2 @lightBlue e per theme3 @lightGreen

Per favore fatemi sapere come dovrebbe essere il mio javascript/jquery per cambiare il colore del tema su click

Answer 1

utilizzando l'evento on-clic per cambiare il colore di sfondo

questo è ad esempio per cambiare il colore di sfondo utilizzando il change..pls il check-out [Esempio] [http://jsfiddle.net/6YVes/ ]

Answer 2

Se si desidera solo per cambiare il colore di sfondo onclick Li, Li assegnare ad ogni classe e innescare un evento click su jQuery ogni classe come di seguito:

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

Answer 3

Si noti che lesscss è un Css che deve essere compilato. Ciò significa che non puoi modificare direttamente il comportamento del tuo lesscss ma puoi farlo con css compilato. I browser non capiscono lesscss devi tenerlo a mente.

Quindi, penso che il modo migliore per farlo consiste nell'utilizzare due classi sull'oggetto che si desidera modificare, uno con la forma e l'altro con il tema. In questo modo puoi passare da uno a un altro modificando usando jQuery la classe del tema. Immaginate qualcosa di simile:

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

E tuo 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"/> 

Speranza che aiuta.

Answer 4

Come prem suggerito, sarebbe meglio applicare una classe per ogni tema

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

In questo modo, di cambiare ogni tema, devi solo cambiare la classe di l'oggetto contenitore. Supponiamo che l'oggetto contenitore sia il corpo del documento, quindi la classe del corpo venga modificata nel tema desiderato.

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

Answer 5

le variabili in CSS è un progetto ora!

http://www.w3.org/TR/css-variables/

Answer 6

si potrebbe provare a utilizzare le funzioni di less.js come:

less.refreshStyles() 

o

less.modifyVars() 

si può forse leggere alcuni di più su questo qui: Dynamically changing less variables

Qualcosa in questo senso con jQuery e modifyVars su un evento .click potrebbero funzionare:

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