7 
@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)

Improve this question
3
  • How many colours were you targeting? A set of predefined colours or an unlimited choice of colours? Commented Mar 30, 2012 at 16:46
  • Unlimited choice of colors that a user could select from a color picker. Commented Mar 30, 2012 at 16:48
  • note: this is an old question, css variables do this now. Commented Jan 24, 2020 at 21:22

3 Answers 3

Reset to default
14

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

less.modifyVars({ myThemeBackground : '#000' });
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This is not working for me with less-1.3.3.min.js. Nothing happens when I use modifyVars either like you've shown or by passing an argument like {'@myThemeBackground': '#000'}.
I have the same problem - is there any way to make less.modifyVars work in the current version 1.3.3?
What exactely doesn't work? Does the less global exist? The modifyVars method? Any error messages? 1.3.3 changelog doesn't mention any important changes.
1

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.

Improve this answer

7 Comments

+1 Very sound advice. In some situations you might consider generating more static files on the server at runtime. This allows for caching, faster rendering, and faster download.
Not sure if you understood my question. I'm looking for a way in runtime to change a Less variable and have it apply to my page. So If I set myThemeBackground to Blue then my page's background will dynamically have that color.
@foreyez I understood the question. I am working on solution right now.
thanks, I'm thinking if maybe there's a way to add the less variable in javascript and then do a less.refreshStyles() or something.. like you load the initial .less css file. and then in javascript you change one of the variables, and then you do a less.refreshStyles() somethign along those lines anyway..
I was looking into a server side solution that involves AJAX and node.js.
|
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.