Use less.modifyVars for my syntax theme


#1

Hello everyone,
I’m writing a syntax theme that can be configured by the user with a couple of color options. As of right now, I’m reading in my colors.less file, converting it to a string, replacing the color of interest, then writing the updated string back to the file:

# lib/settingsManager.coffee
# ...
setBackground = (color) ->
  filepath = path.join __dirname, '..', '/styles/colors.less'
  fs.readFile filepath, (err, contents) ->
    throw err if err
    contentString = contents.toString()
    updated = contentString.replace /@background: [^;]+;/, "@background: #{color};"
    fs.writeFile filepath, updated, ->
      console.log "background color updated: #{color}"
# ...

But it seems like there must be a better way of doing this. This way isn’t particularly efficient, especially as colors.less gets big.
I found a feature of less that allows you to pass variables into less.js before compilation using less.globalVars and less.modifyVars. This seems like just what I’m looking for. Is it possible to take advantage of this inside atom? Can I get access to less.render before my theme is loaded?
Thanks in advance.


#2

There aren’t any hooks for this built-in to Atom, no. To my knowledge, by the time your package is activated and your code has a chance to run, the stylesheets are already applied:

https://github.com/atom/atom/blob/master/src/theme-package.coffee#L25-L26