Changing variable dynamically (at runtime) via LESS and CSS?

7
votes
@myThemeBackground = #ddd;  

div#box1 { background: @myThemeBackground; }

I'm using LESS in order to use variables for my css. It works fine, but I'm wondering if there's a way for me to change the "myThemeBackground" dynamically at runtime via javascript or something.

So say if the user chooses a custom color for the background I'd like the entire skin to change.

Note: this is for dynamically theming/skinning an application where the user chooses the color for the background for example and then the whole app changes (without a page refresh)

3
htmlcssless
How many colours were you targeting? A set of predefined colours or an unlimited choice of colours? – Alerty
Unlimited choice of colors that a user could select from a color picker. – Shai UI
note: this is an old question, css variables do this now. – Shai UI

3 Answers

14
votes

You can modify Less variables on the fly using the modifyVars method:

less.modifyVars({ myThemeBackground : '#000' });
1
votes

I usually grab the CSS generated by LESS and include that in a file to optimize the web page loading speed. In fact, I use LESS.app for Mac to generate my CSS.

To my knowledge, part of the solution would involve including less.js file to your page. This in turn means that generating the style of the page would be slow and the caching might cause you some trouble too...

I would humbly suggest generating multiple CSS stylesheets with LESS and include these files when needed with JavaScript.

0
votes

The only solution I can think of is to change the text you render with less.js, with:

less.refreshStyles()

Change the text in the file or in the less snippet of styling.

Read more about it here: Load less.js rules dynamically