View SyntaxThemes
Espresso syntax themes are CSS files with some special comment metadata, and they come in two variants: user themes and placeholder themes.
Espresso’s syntax coloring approach is modeled after HTML and CSS. In fact, Espresso themes are CSS files. Just like regular style sheets, they contain rules that apply to certain zones in the document. Instead of targeting the web page DOM, Selectors are now used to target syntax zones in your documents.
Placeholder themes
Espresso features user themes (loaded from ~/Library/Application Support/Espresso/Themes) and placeholder themes (loaded from the PlaceholderThemes directory in a sugar). Together, they are combined into the final set of rules that define the coloring for documents. A placeholder theme requires a special comment in the CSS file:
/*
@theme XYZ Placeholder
@placeholder some.category.here
*/
The value for @placeholder is a type identifier and can be freely chosen, but must be descriptive about the rules your placeholder theme contains. It’s a good idea to make a single placeholder theme (and identifier) per language instead of grouping several unrelated languages into one.
Example: currently, the CSS built-in sugar is the only one defining a placeholder theme.
User themes
One user theme can be active at a time. It must contain a comment like this:
/*
@theme My Theme Name
@override-placeholders identifier, some.other.category
*/
When it’s active, the user theme will be combined with all placeholder themes that do not have an identifier matched by the selector in @override-placeholders. Note that an override like “text” matches “text.html”, “something.text”, etc.
Possible values
Since themes are simple CSS files, you can use a range of color definitions: hex colors, rgb() notation and even composited rgba() for blended alpha colors. Each rule can contain any of the following properties: color, background-color, font-weight, font-style and spell-check.
Changing background, default text color, and more
To adjust global colors, you need to specify a special rule with “@base” in place of the selector. It’s recommended to add this to any theme you make.
@base {
color: #000000;
background-color: #FFFFFF;
insertion-point-color: #000000;
selection-background-color: default;
current-line-background-color: #fff8dd;
}
You can also specify whether a zone should have spell-checking disabled by default:
tag, source, sourcecode {
spell-check: disabled;
}
Editing Themes
Themes can be directly edited within Espresso by choosing “Preferences” (command + ,) from the “Espresso” contextual menu, clicking on “Colors” within the Preferences window, then clicking “Edit Theme…”.
Alternately, if you’d like to edit the Syntax theme with another application (For instance the wonderful CSSEdit), while in the “Colors” section within the Preferences window, click “Reveal in Finder”. In Finder you can right (or control) click on the theme you’d like to edit, go to “Open With”, and select the application of your choice.
A new window will open with the syntax colors written in hex. If you are unfamiliar with hex colors see: Wikipedia , and be sure to pick up the indispensable and free HexColorPicker for the OS X Color Panel.
If you are editing the currently active theme, changes will be updated live in all open windows.