CODEWITHSUNDEEP
jquerycssless
Ravi Shah
Ravi Shah

Reputation: 873

Pass dynamic variable from HTML to less.css file

I've just started using Less. I am now looking to change background color as per a value passed from the HTML file. For example in HTML file select blue color than all background set blue and if select yellow than all background set Yellow.

The mechanism is to change color for look and fill. User can change his theme as per his requirement. So when user changes the color all theme of site color should be changed. Below is how I was thinking of passing the selected color

In this snapshot Html Select blue Color

And this is how I expect the value to be assigned in the less.css file.

In this snapshot less file description

So, How can I achieve this scenario?

Upvotes: 4

Views: 3389

Answers (1)

Harry
Harry

Reputation: 89760

I would recommend you to do something like the following:

  • Give the user a pre-defined list of theme colors to choose from (a drop-down maybe). Don't allow for entering any color they wish to, that would be a pain.
  • When the select any color append, the color name to the body as a class using jQuery/JS.

  • In Less, write the below code, compile it statically and link the compiled CSS to your page.

    body { 
  background-color: red; /* default */
  &.red {background-color: red;} 
  &.green{background-color: green;} 
  &.blue{background-color: blue;}
}

window.onload = function() {
  document.querySelector('#color-chooser').addEventListener('change', function() {
    document.body.className = this.value;
  });
}
/* compiled CSS based on the Less code provided above */

body {
  background-color: red;
  /* default */
}
body.red {
  background-color: red;
}
body.green {
  background-color: green;
}
body.blue {
  background-color: blue;
}
<label>Select Background Color:</label>
<select id='color-chooser'>
  <option value='red'>Red</option>
  <option value='blue'>Blue</option>
  <option value='green'>Green (Hex)</option>
</select>

Alternately, if you insist on doing it dynamically via the front-end then you can use modifyVars option:

Note that I wouldn't recommend this option as the Less website itself states that it should be used only when there is no other choice.

HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet/less" type="text/css" href="styles.less" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
</head>
<body>
  <label>Select Background Color:</label>
  <select id='color-chooser'>
    <option value='red'>Red</option>
    <option value='blue'>Blue</option>
    <option value='#0F0'>Green (Hex)</option>
  </select>
  <script type="text/javascript" language="javascript">
    document.querySelector('#color-chooser').addEventListener('change', function(){
      less.modifyVars({ /* this sets the color to the variable */
        '@bgcolor': this.value
      });
    });
  </script>  
</body>
</html>

styles.less:

body {
  background-color: @bgcolor;
}
@bgcolor: red;

Plunker Demo (couldn't put this into a snippet)

Upvotes: 5

Related Questions