Settings view for a syntax theme package?



I would like to add a settings view for my neon-syntax theme so users can control some aspects of it like the opacity, blur radius, saturation and maybe even the individual colours with a nice preview element if possible. I’m not sure how to read config items into the theme’s LESS though. Is this possible? Or would I have to do it as coffee/JS and inject the generated CSS into the Shadow DOM and forgo the LESS altogether?



While writing my own syntax theme I struggled with the same problem for some time. I wanted to set a less variable based on a config setting. After I dug through Atom’s source I found the code responsible for loading the less schemes. The fallback ui-variables and syntax-variables are loaded by prepending a stylesheet if necessary:

Since this is essentially what we would like to do, I solved the problem by stealing borrowing the relevant code pieces and adapt where needed. I changed the relevant methods so they not only accept a lessStylesheetPath but also an arbitrary preliminaryContent string, which we can use to set variables or imports dynamically:

This solution works but is not very elegant. For one thing I couldn’t find out how we could extend Atom’s base classes, but more importantly I fear that one day I update Atom and have a non-working syntax theme, since significant code changes in the internals of the Theme Manager will probably break things. I’d appreciate any suggestions or improvements.

Ideally we’d like such a method to be available in the Theme Manager, but I haven’t had the time to research the implications of changing the core method to make a pull request to discuss it.


Thanks, this gives me something to experiment with at least. An official method of doing this would be nice, maybe we can get the ball rolling on the discussion.

Set Less Variables from Package Settings