Oh, Atom! Such a beautiful code editor. Probably one of its greatest features is the wide range of options to customize it (with packages and themes created by Atom developers and, specially, the community around it).
Wh-what have I just heard?
Do you want to learn how to create your own syntax theme? You’ve come to the right place!
Follow my in this little guide if you want to hack your editor to your liking! (Or you could maybe just check Atom’s flight manual, which probably explains it better. Or not. Who knows?)
It is to say that it would be good that you knew LESS before beginning the creation of your theme. That’s because all the files are not written in plain CSS but using this tool.
If you don’t know LESS, no worries. The main thing with it are variables, and I googled that and learnt everything I needed in about 30 seconds. It shouldn’t take longer.
STEP 1 — Install Atom
It’s always important to mention everything. This is a key step. Do not forget it.
STEP 2 — Generate a new syntax theme
Press Cmd+Shift+P (MacOS) or Ctrl+Shift+P (Windows) top open up the command palette, and start typing “Generate Syntax Theme”. As soon as this option appears, select. Name it whatever you want (although according to the Atom flight manual, syntax themes should end with -syntax) and save it somewhere on your computer.
At this point, I recommend you open up Atom in dev mode (by selecting View > Developer > Open in Dev Mode), in order to be able to see the changes you make in your theme in real-time. You also need to go to the Settings and under the Themes tab choose your new syntax theme from the dropdown menu.
STEP 3 — Know your files
There are three files you want to edit: base.less, colors.less and syntax-variables.less. You may also want to edit package.json in case you are thinking of publishing your theme.
- colors: this is where you define all the colors you want to use in your theme. You create a variable for each and every one of them and that’s it.
- syntax-variables: these are all the variables that must be included in your theme. You set them to whatever color in your colors.less file you want to.
- base: this is more kind of general settings. I’ll recommend just reading and setting every property to either a variable in your colors.less or in syntax-variables.less file.
- package: package.json, as you may already know, just tells information about your theme. If you want to publish it, you must change it including all relevant information. More info on that in the Atom’s flight manual publishing section.
STEP 4 — Start customizing!
Now, the only thing remaining is applying your creativity and color-knowledge to make Atom even prettier than it is!
Happy customizing!
