javascript - 如何使用 javascript/jquery 在 less css 中更改主题颜色

Question

我正在使用下面的 less 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 和 theme3 @lightGreen

请让我知道我的 javascript/jquery 应该如何在点击时更改主题颜色

Answer 1

您可以尝试使用 less.js 函数，例如:

less.refreshStyles()

或

less.modifyVars()

您可以在这里阅读更多相关信息:Dynamically changing less variables

在 .click 事件上使用 jQuery 和 modifyVars 可能会起作用:

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