I'm taking my vscode theme settings and I'm breaking it out into a full fledged theme.

Themes are in JSON format.

I would also like to create a more unified color scheme. Let's say I tell my theme to set syntax highlighting for builtin javascript functions to be blue. I have quite a few things I might make this shade of blue. Later on I might want to change that shade of blue, but it's a hassle to have to search through every instance in the theme and change it. It would be much better if I could simply write out some variables and then assign variables to the different parts of the JSON theme file.

I do this sort of thing all the time with scss preprocessors, but I'm not really sure how to do this with JSON.

Is there some kind of preprocessor I could use that would allow me basic variables in my JSON file and then once run, produced a new JSON file where all the variables values have been "rendered" out as a normal JSON File?


Found a great solution with this npm module: https://www.npmjs.com/package/variable-replacer

So for instance, I run the following command:

variable-replacer ./source-enzo.json ../themes/enzo.json --data=variables.json

and it takes my source file, and replaces all the %variables% declared in my variables.json file.

And the variables in the variables.json file are simply:

"variable": "key value"

Extremely easy set up!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.