Atom's interface is rendered using HTML, and it's styled via LESS. Don't worry if you haven't heard of LESS before; it's just like CSS, but with a few handy extensions.
Atom supports two types of themes: UI and syntax. UI themes style elements such as the tree view, the tabs, drop-down lists, and the status bar. Syntax themes style the code inside the editor.
Themes can be installed and changed from the settings view which you can open by selecting the Atom > Preferences... menu and navigating to the Themes section on the left hand side.
Themes are pretty straightforward but it's still helpful to be familiar with a few things before starting:
"theme"key with a value of
"syntax"for Atom to recognize and load it as a theme.
Let's create your first theme.
To get started, hit
cmd-shift-P, and start typing "Generate Syntax Theme" to
generate a new theme package. Select "Generate Syntax Theme," and you'll be
asked for the path where your theme will be created. Let's call ours motif.
Atom will pop open a new window, showing the motif theme, with a default set
of folders and files created for us. If you open the settings view (
and navigate to the Themes section on the left, you'll see the Motif theme
listed in the Syntax Theme drop-down. Select it from the menu to activate it,
now when you open an editor you should see that your new motif theme in
Open up stylesheets/colors.less to change the various colors variables which
have been already been defined. For example, turn
Then open stylesheets/base.less and modify the various selectors that have been already been defined. These selectors style different parts of code in the editor such as comments, strings and the line numbers in the gutter.
As an example, let's make the
Reload Atom by pressing
cmd-alt-option-L to see the changes you made reflected
in your Atom window. Pretty neat!
Interface themes must provide a
ui-variables.less file which contains all
of the variables provided by the core themes.
To create an interface UI theme, do the following:
atom --dev .in the terminal or use the View > Developer > Open in Dev Mode menu)
apm linkto symlink your repository to
There are a few of tools to help make theme development faster and easier.
Reloading by hitting
cmd-alt-ctrl-L after you make changes to your theme is
less than ideal. Atom supports live updating of styles on Dev Mode
To enable a Dev Mode window:
If you'd like to reload all the styles at any time, you can use the shortcut
Atom is based on the Chrome browser, and supports Chrome's Developer Tools. You
can open them by selecting the View > Toggle Developer Tools menu, or by
The dev tools allow you to inspect elements and take a look at their CSS properties.
Check out Google's extensive tutorial for a short introduction.
If you are creating an interface theme, you'll want a way to see how your theme changes affect all the components in the system. The styleguide is a page that renders every component Atom supports.
To open the styleguide, open the command palette (
cmd-shift-P) and search for
styleguide, or use the shortcut