如何使用javascript / jquery更少的css中的主题颜色 [英] How to change the theme color in less css using javascript/jquery

问题描述

我使用以下较少的css更改不同的主题颜色

  @lightRed：#fdd; 
 @lightGreen：#dfd; 
 @lightBlue：#ddf; 
 
 @defaultThemeColor：@lightBlue; 
 
 #header {
 .wrapper（）; 
 width：@defaultWidth; 
 height：80px; 
 margin-bottom：20px; 
 background：@defaultThemeColor; 
} 
 
 #menu {
 background：@defaultThemeColor; 
} 
  

而html如下：

 < div id =swatch> 
< ul> 
< li>< a href => theme1< / a>< / li> 
< li>< a href => theme2< / a>< / li> 
< li>< a href => theme3< / a>< / li> 
< / ul> 
< / div>当单击theme1时应加载@lightRed主题，对于theme2 @lightBlue和for theme3 @lightGreen  
    / p> 
 
 
请让我知道我的javascript / jquery应该如何更改主题颜色。
解决方案
您可以尝试使用less.js函数：
  less.refreshStyles  
或
  less.modifyVars（）
  
您可以在这里阅读更多：动态更改较少的变量 
 
 
 
    .click 事件可能会工作：
 
 
 <$>  p $ p>  $（'。theme_option'）click（function（event）{
 event.preventDefault（）; 
 less.modifyVars（{
'@ defaultThemeColor'：$（this）.attr（'data-theme'）
}）; 
}）; 
  




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

解决方案

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

这篇关于如何使用javascript / jquery更少的css中的主题颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！