Designing New Syntax Theme for Atom
As a software engineer, I spent most of my time in text editor and terminal. I use Hyper for my terminal app and Atom as the text editor. For quite some time, I used Atom Material UI theme and One Dark syntax theme in Atom.
Then I found someone sharing their editor (not Atom) on twitter and suddenly my editor theme looks ugly.
My first instinct is to search for alternatives because I was lazy and I thought making my own syntax theme is difficult. Turns out I was wrong.
Having built on top of Electron makes Atom essentially a glorified website, and I mean that as a compliment. It's really easy to fiddle around with the style by opening the Dev Tools by pressing
Cmd+Alt+I on Mac, just like what you do when debugging style in the actual website. Changing styles via devtool is not going to last, so I need a more permanent solution.
Atom has a feature called style override, where you can add a style to override original style (you don't say). You can do that by clicking Atom in the menu bar and click Stylesheet. Atom will open a new file for you called
style.less (of course it is) that you can edit to adjust your editor style. As you might know from the extension, Atom use LESS as a CSS preprocessor. It's basically a CSS with extra syntax for variables etc.
The file itself is already have an example that you can edit easily. To apply the new style, you can press
Cmd+Alt+Ctrl+L. Yes, that's 4 key combination.
Making Your Own Style
After finished tweaking my new styles I was thinking of sharing it. I searched for how to publish your own theme, and turns out it's pretty easy.
Atom has a template generator that you can use to bootstrap your project. Press Cmd+Shift+P and choose Generate Syntax Theme. After that you will be asked the name of your theme and the directory to put your files. In the background Atom will create a symlink from ~/.atom/packages directory to your previously-created directory. Next time if you want to rename or move the directory, you can readjust the symlink yourself.
There's only three main files you need to know:
syntax-variables.less are both a variable declarations only. You don't need to edit all of them to achieve the theme that you want. But, all of those three files will be required in the main
index.less so keep in mind when you have problem assigning variables.
So, how do I decide which color for highlighting what? When I was designing the new syntax theme, I have some principles that I used to determine how to style things. I think these principles are really useful in designing a good syntax theme
This is the primary reason they exist. A syntax theme should be pleasing in the eye. I know it's subjective, that's why there's so many of them to choose from. I'm by no means an expert in color theory, so I just use the best looking color combination I know, which is colors from hyper-snazzy. Thanks, Sindre.
The next aspect to consider is distraction. What I mean by considering distraction is that, the usage of the color variance should be minimal. It's possible to assign every string token as different color and still look beautiful, but it will be distracting. So how do we design a non distracting theme?