1

I am using Angular-material-6. I am using an angular-material stylesheet and my own custom less stylesheet as a master stylesheet. I have a select box in header which shows theme color name like Red, Green, Blue etc. Now my task is to change a less variable as per user choice theme.

for example, by default my application primary color is red and if a user changes it to blue from header select box then it will automatically change my primary variable color to red.

I tried simple way solution like CSS switching from index.html using javascript but I am not sure how to do it with less and less variables.

Thanks in advance.

Aditya Chitale
  • 15
  • 1
  • 7

2 Answers2

2

Less can compile at run-time and is one of the few CSS processors (If not the only one) that can do this and modify CSS vars programmatically at run time.

Check out this SO post: How to use less in Angular component without CLI

Justin F
  • 251
  • 5
  • 13
-1

Less is a CSS preprocessor which means that it produces CSS at compile-time, not runtime. Therefore you can't do what you are aiming to do.

You can have a look at css variables if you want to dynamically override it. You can also use a CSS in JS or make smart use of the CSS cascading model.

Swann
  • 2,413
  • 2
  • 20
  • 28