Themes

An extension can add additional themes that the user can set for the editor, the workspace window, or both. These themes are written as special CSS files that define the styling attributes to apply to widgets, content, and syntax highlighting.

Unlike in regular CSS files, theme files only support class-like selectors expressed as a series of identifiers separated by periods, such as identifier.function and tag.attribute.name. While these look like an element + class name selector typical to CSS, the identifiers in theme selectors are all classes, and even the order does not matter (although following convention is encouraged).

Themes are stored within a Themes folder at the root of the extension bundle, and should have a .css file extension.

The Meta Selector

The plain meta selector is used to describe attributes of the theme itself, such as its preferred appearance (light or dark), which affects certain heuristics in the theme engine.

The following attributes are supported for the plain meta selector:

Themes can style the window and base content using CSS selectors that begin with the meta identifier, targeting elements such as buttons and text fields.

Window Content

The following selectors can be used to style specific parts of the window chrome:

Buttons

Buttons are styled using the following CSS selectors:

For any of these selectors, adding the document identifier specifies that the appearance should be applied to buttons appearing in document tabs, such as meta.document.button.

The following CSS attributes are supported for buttons:

For backgrounds and borders, CSS gradients are supported. For all color-related attributes, the common CSS color types are supported: named, hex, rgb, rgba, hsl, hsla, hsb, and hsba.

Text Fields

Text fields are styled using the following CSS selectors:

For any of these selectors, adding the document identifier specifies that the appearance should be applied to text fields appearing in document tabs, such as meta.document.textfield.

The following CSS attributes are supported for text fields:

For backgrounds and borders, CSS gradients are supported. For all color-related attributes, the common CSS color types are supported: named, hex, rgb, rgba, hsl, hsla, hsb, and hsba.

Document Content

The following selectors can be used to style specific parts of the document (editor) content:

Styling Syntax Highlighting

Syntax highlight attributes are styling using standard CSS classes, where each element of a syntax highlighting scope can be used as a CSS class selector.

Each syntax highlighting selector supports the following CSS attributes:

For best practices, there is a standard set of CSS classes that are common across most syntaxes, and are most often used for themes that wish to target the widest set of languages available:

Styling Terminal Colors

Terminal views will automatically use the background and text color of the document styles (see above) when the terminal is set to theme itself based on an active theme.

In addition to this, the theme may specify values for the 16 standard ANSI colors. The following selectors may specify the color CSS property: