How to change the theme color in less css using javascript/jquery

Question

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

Make 3 different css-files, each of the themes. Then load the correct "theme-sheet" with jQuery (stackoverflow.com/questions/7846980/…) — TryingToImprove
– TryingToImprove, Commented Apr 15, 2013 at 6:48

Community · Accepted Answer · 2017-05-23 11:59:18Z

5

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

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Apr 15, 2013 at 18:08

Martin Turjak

21.3k5 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Max25 · Accepted Answer · 2013-04-15 06:59:45Z

1

using the on-click event to change the background color

this is example for changing the background color using on change..pls check it out [Example][http://jsfiddle.net/6YVes/]

answered Apr 15, 2013 at 6:59

Max25

5972 gold badges5 silver badges16 bronze badges

Comments

prem · Accepted Answer · 2013-04-15 07:05:27Z

1

If you just want to change the background color onclick li's, assign each li a class and trigger a jQuery click event on every class like below:

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

answered Apr 15, 2013 at 7:05

prem

3133 silver badges11 bronze badges

3 Comments

user1165077 Over a year ago

you didn't get me, this is not background color, it;s theme color

prem Over a year ago

Then probably u should take TryingToImprove's comment on your question as answer

prem Over a year ago

are you having separate bundle of styles for each theme or just background-color?

droidpl · Accepted Answer · 2013-04-15 07:28:10Z

Note that lesscss is a Css that must be compilerd. That means you can not modify directly the behaviour of your lesscss but you can with css compiled. Browsers do no understand lesscss you have to keep it in mind.

So, I think the best way to do this is using two classes on the object you want to modify, one with the shape and another with the theme. In this way you can switch from one to anothr by modifying using jQuery the theme class. Imagine something like:

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

And your 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"/>

Hope it helps.

strakez · Accepted Answer · 2013-04-15 07:31:35Z

As prem suggested, it would be best to apply a class to each theme

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

This way, to change each theme, you just have to change the class of the container object. Say the container object is the document body, then the body's class be changed to the desired theme.

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

Tiny Jiang · Accepted Answer · 2013-04-15 07:34:57Z

1

the variables in css is a draft now!

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

answered Apr 15, 2013 at 7:34

Tiny Jiang

483 bronze badges

Comments

SMJ-DevOps · Accepted Answer · 2020-10-06 05:55:58Z

Create classes by each color Store class into local storage change it using javascript function

 <!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>

Collectives™ on Stack Overflow

How to change the theme color in less css using javascript/jquery

7 Answers 7

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related