Question

使用以下较少的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')
    });
});

Answer 2

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

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

Answer 3

如果您只想更改背景颜色onclick li's，请为每个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")
 });

Answer 4

请注意，lesscss是一个必须是compilerd的Css。这意味着你不能直接修改你的lesscss的行为，但你可以编译css。浏览器不明白你必须牢记它。

所以，我认为最好的方法是在你想要修改的对象上使用两个类，一个用于形状，另一个用于主题。通过这种方式，您可以通过使用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"/>

希望它有所帮助。

Answer 5

正如前提所说，最好将一个类应用于每个主题

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

Answer 6

css中的变量现在就是草稿了！

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

Answer 7

按每种颜色创建类将类存储到本地存储中使用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>

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

7 个答案: