title: How to change the theme color in less css using javascript/jquery
body: <p>am using the below less css to change different theme color</p>
  
  <pre><code>@lightRed:   #fdd;
  @lightGreen: #dfd;
  @lightBlue:  #ddf;
  
  @defaultThemeColor:@lightBlue;
  
  #header{
  .wrapper();
  width:@defaultWidth;
  height:80px;
  margin-bottom:20px;
  background:@defaultThemeColor;
  }
  
  #menu{
  background:@defaultThemeColor;
  }
  </code></pre>
  
  <p>And html is as follows:</p>
  
  <pre><code>&lt;div id="swatch"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href=""&gt;theme1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;theme2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;theme3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>when theme1 is clicked @lightRed theme should be loaded, for theme2 @lightBlue and for theme3 @lightGreen</p>
  
  <p>Please let me know how should be my javascript/ jquery to change the theme color on click </p>