Set Less Variables from Package Settings


Is there any way to set less variables from the package settings.

My package file-icons doesn’t have any JS/Coffee at the moment and it would be really nice to let users change some of the variables.

Alternatively if users could set some variables in their user stylesheet and then have my package read those?



Well, as far as I understand it … you can’t read the variables that they set because the user’s styles.less is loaded separately from the stylesheets in packages, to my understanding.

One thing I haven’t tried though is mixins. I suppose it’ll suffer the same issue … but it’s worth a try.


@leedohm Is it possible to change/read the variables in the stylesheet of a package?


FYI I have this working in my theme by using a custom.less file which I write to using fs.writeSync every time the config is updated.

Here’s the package:

relevant snippet that generates my custom.less file:

and in LESS, because of lazy loading, you can import it like this:

So in syntax-variables.less I have something like this:

@mytheme-some-color: blue; 
@some-color: @mytheme-some-color;
@import "custom.less"; // content: @mytheme-some-color: red;

In the above, the value of @some-color is actually red thanks to lazy loading in LESS. If custom.less is blank, @some-color will be blue (your default color) and if a user has a custom setting set, then you write it to custom.less.

This post was also helpful: Settings view for a syntax theme package?

However my method doesn’t go around atom’s stylesheet manager by removing the default index.less file in the project root and applying the stylesheet in the package itself rather than atom handle it - this was ideal for me because otherwise UI themes couldn’t inherit the variables in my syntax theme. The method in the post is actually pre-processing the LESS into CSS, then applying the CSS which means the LESS is not available for UI themes to read because it’s already processed!