E3 Theme Generator template
This project provides an SCSS template for generating syntax themes for Espresso 3+, along with ports of my two original Espresso themes (Earthworm and Quiet Light)--both as examples for using the template, and for use with Espresso.
Installing and using Earthworm or Quiet Light
Download the CSS files in the
ThemeGenerator/OneCrayonfolder and move them into your Themes folder:
Relaunch Espresso, if it is open, and choose Earthworm or Quiet Light in the Colors preferences
Creating your own theme
Download or clone the project, and open the folder in Espresso.
ThemeGenerator.esdynamo/_template.scssfile, and rename it
Modify your new SCSS file (see below), then move
ThemeGenerator/MyThemeName.cssinto the Espresso Themes folder as per above, or create a symlink to it like so:
cd ~/Library/Application\ Support/Espresso/Themes ln -s path/to/E3-Theme-Generator/ThemeGenerator/MyThemeName.css MyThemeName.css
If you opt for a symlink, you will be able to see your edits in live time as you modify the SCSS file thanks to Dynamo.
Modifying the template
When you open your renamed copy of
_template.scss you will find a long list of variables, most of which are commented out. The uncommented variables are required in order to have a bare minimum working theme, while the others allow you to override colors for common elements on a per-language basis.
There are two types of variables:
Variables at the top of the file are what-you-see-is-what-you-get, and do not support suffixes for adjusting font-weight and similar
The next set of variables allow you to modify several properties by adding variants with suffixes. For instance, although only these variables are listed:
$comment: #000; $string: #000;
You can still modify the font weight, style, background color, and background opacity for these zones by adding variables with the appropriate suffix:
$comment: #000; $comment-weight: bold; $comment-style: italic; $comment-background: #fff; $comment-background-opacity: .4; $string: #000; $string-weight: bold; $string-style: italic; $string-background: #fff; $string-background-opacity: .4;
Most of the variables should be fairly self-explanatory, but here are some notes:
- $text: default text color across the application
- $background: default background color across the application
- $current-line: background color for the current line highlight (whether this shows up or not is chosen by the user)
- $embedded-*: these set the colors and backgrounds for the given languages when embedded within HTML documents
- $monotone-property-values: uncommenting this variable will cause constants and keywords in CSS property values to be colored the default
$property-valuecolor (functions like
rgba()will still be colored using the
$functioncolor, so if you want completely monotone property values you will need to set
$css-function: $property-value;, as well)
- $function vs. $function-call: these refer to the function name when the function is declared (
$function) vs. when it is invoked (
$function-callis not set, it will default to the same color as
$function, so set
$function-call: $text;if you want it to remain uncolored. These variables also color classes and modules in PHP, Python, and Ruby.
- $php-delimiter (and other $*-delimiter variables): these color the delimiters for the language itself when embedded elsewhere:
$ruby-delimiteris only used for ERB documents. Similarly,
$regex-delimiteronly highlights the characters that form the boundaries of the regular expression (so
- Setting the required variables will get you a basic minimum theme, but in order to properly support all languages you will also want to color at least a few of the Markdown and Regex variables (otherwise both languages will end up largely colorless, since their basic zones are a bit different than the other languages).
- If you wish to support third-party languages, you can add selectors for them beneath the import statement at the bottom of the template file (see Earthworm and Quiet Light for some examples of how this works).
- Espresso's syntax system offers a lot more granular control than this template offers! If you would like to target other zones, you can do that beneath the import statement, as well (Quiet Light has some good examples of this). You can find full documentation on themes in the Espresso help.
Copyright (c) 2016-2017 Ian Beck
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.