logo标签列表

如何使用JavaScript/jQuery在Less CSS中更改主题颜色

javascriptjqueryhtmlcssless
7

我正在使用以下的 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以在单击时更改主题颜色。

制作3个不同的css文件，每个文件都是一个主题。然后使用jQuery加载正确的“主题样式表”（https://dev59.com/FGsz5IYBdhLWcg3whII8）。 - TryingToImprove
7个回答
5
你可以尝试使用less.js函数，例如：
less.refreshStyles()

或者

less.modifyVars()

您可以在这里了解更多信息：动态更改Less变量

使用 jQuery 和 modifyVars 在 .click 事件上进行类似以下的操作可能会起作用：

$('.theme_option').click(function(event){
    event.preventDefault();
    less.modifyVars({
        '@defaultThemeColor': $(this).attr('data-theme')
    });
});
1
如果您只想在单击li时更改背景颜色，请为每个li分配一个类，并在每个类上触发jQuery click事件，如下所示：
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")
 });
你误解了我的意思，这不是背景颜色，而是主题颜色。 - user1165077
那你应该把TryingToImprove在你的问题上的评论当作答案。 - prem
你是为每个主题都有单独的样式包还是只有背景颜色？ - prem
1
请注意，lesscss是一种必须编译的Css。这意味着您不能直接修改lesscss的行为，但可以使用编译后的css进行修改。浏览器无法理解lesscss，您需要记住这一点。
因此，我认为最好的方法是在要修改的对象上使用两个类，一个用于形状，另一个用于主题。通过使用jQuery修改主题类，您可以在两者之间切换。想象一下类似于以下内容： 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;
}

并且你的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"/>

希望它有所帮助。
1
作为 Prem 建议的一部分，最好为每个主题应用一个类。
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;
}

这样，要更改每个主题，您只需更改容器对象的类。假设容器对象是文档主体，则可以将主体的类更改为所需的主题。 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);
}
1

使用on-click事件来改变背景颜色

这是一个使用on change来改变背景颜色的示例，请查看[示例][http://jsfiddle.net/6YVes/]

1
0

按颜色创建类 将类存储到本地存储中 使用JavaScript函数进行更改

 <!DOCTYPE html>
 <html lang="en" class="theme_name_1">
 <head>
 <style>
.theme_name_1{
   color: #FFFF;
 }
.theme_name_2{
 color: #000;
}
</style>
 </head>
 <body>
 <button id="switch" onclick="changeTheme()">Switch</button>
 <script>
/* Script Save theme local storage to first load */
    if (localStorage.getItem('theme') === 'theme_name_2') {
       setTheme('theme_name_1');
    } else {
      setTheme('theme_name_2');
    }

    function setTheme(theme_name) {
        localStorage.setItem('theme', theme_name);
        document.documentElement.className = theme_name;
    }

/*Change theme button click */
    function changeTheme() {
        if (localStorage.getItem('theme') === 'theme_name_2') {
            setTheme('theme_name_1');
        } else {
            setTheme('theme_name_2');
        }
    }
 </script>
 </body>
 </html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接