7

我正在使用以下较少的 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 应该如何在点击时更改主题颜色

4

7 回答 7

5

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

less.refreshStyles()

或者

less.modifyVars()

你可以在这里阅读更多内容：Dynamicly changed less variables

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

$('.theme_option').click(function(event){
    event.preventDefault();
    less.modifyVars({
        '@defaultThemeColor': $(this).attr('data-theme')
    });
});
于 2013-04-15T18:08:03.863 回答
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);
}
于 2013-04-15T07:31:35.670 回答
1

使用点击事件改变背景颜色

这是使用 on change 更改背景颜色的示例。请检查一下 [示例][http://jsfiddle.net/6YVes/]

于 2013-04-15T06:59:45.243 回答
1

如果您只想更改 onclick 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")
 });
于 2013-04-15T07:05:27.170 回答
1

请注意，lesscss 是必须编译的 Css。这意味着您不能直接修改 lesscss 的行为，但可以使用 css 编译。浏览器不了解lesscss，您必须牢记这一点。

所以，我认为最好的方法是在要修改的对象上使用两个类，一个带有形状，另一个带有主题。通过这种方式，您可以通过使用 jQuery 修改主题类来从一个切换到另一个。想象一下：

少CSS：

.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"/>

希望能帮助到你。

于 2013-04-15T07:28:10.013 回答
1

css 中的变量现在是草稿！

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

于 2013-04-15T07:34:57.383 回答
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>
于 2020-10-06T05:55:58.817 回答