Atom Themerator

An online syntax theme generator for the Atom text editor.

Screenshot of Atom Themerator.
An alpha version of Atom Themerator.

Atom Syntax Themes Today

While implementing a rough draft of my first syntax theme for Atom, I noticed there an absence of resources concerning best practices in theme development. On one hand, an Atom theme is just CSS: you can inspect the editor’s DOM to figure out what’s available in terms of selectors, and roughly how these classes interact.

Despite this transparency through Atom’s developer tools, there’s a lack of syntax theme documentation, and no good boilerplate to kickstart theme development. Unfortunately, a developer needs to reverse engineer the necessary CSS to make an effective theme.

I’d like to remove some of this barrier to experimenting with theme development.

Atom Themerator

I’m releasing Atom Themerator, a web-based generator for syntax themes. This is a tool to kick off a syntax theme such that it’s reasonably complete and stable out of the box. From that point, there’s always an opportunity for further customization.

The sweet spot for Atom Themerator is in providing a strong set of tokens to color without tripping over the number of options. Once the first stable release is available, I’ll focus on providing theme generation presets based on selecting three or four core colors and extrapolating from there to a core theme.

Check out Atom Themerator and the Atom Themerator GitHub repository. Insight Dark Syntax is a syntax theme generated using Atom Themerator, which I designed and use for my personal Atom installation.

I hope you enjoy working on and customizing your own editing experience.

  • Atom Themerator
    • 2016
    • Front-End
    • Design

Related Articles

View More Articles