Documentation Themes

The look of the Sublime Merge interface is controlled by themes. The term theme refers strictly to the look of the UI – buttons, the commit list, location bar, command palette and so forth. The highlighting of diffs is controlled by a combination of color schemes and syntax definitions.

The theme engine for Sublime Merge is based on raster graphics. PNGs are used to prevent texture degradation and provide full alpha control. Each element in the UI can have up to four layers of textures or fills applied, with properties to control opacity and padding. The properties set on each element can be conditionally changed based on user interaction and settings.

Sublime Merge themes are implemented via the .sublime-theme format. It is a JSON format that specifies rules for matching elements and modifying their appearance.

Example

The following is an example of the format of a .sublime-theme file. A complete theme will have many more rules to cover all elements used in the UI.

{
    "variables":
    {
        "light_gray": "rgb(240, 240, 240)"
    },
    "rules":
    [
        // Set up the textures for a button
        {
            "class": "button_control",
            "layer0.tint": "#000",
            "layer0.opacity": 1.0,
            "layer1.texture": "Theme - Example/textures/button_background.png",
            "layer1.inner_margin": 4,
            "layer1.opacity": 1.0,
            "layer2.texture": "Theme - Example/textures/button_highlight.png",
            "layer2.inner_margin": 4,
            "layer2.opacity": 0.0,
            "content_margin": [4, 8, 4, 8]
        },
        // Show the highlight texture when the button is hovered
        {
            "class": "button_control",
            "attributes": ["hover"],
            "layer2.opacity": 1.0
        },
        // Basic text label style
        {
            "class": "label_control",
            "fg": "var(light_gray)",
            "font.bold": true
        },
        // Brighten labels contained in a button on hover
        {
            "class": "label_control",
            "parents": [{"class": "button_control", "attributes": ["hover"]}],
            "fg": "white"
        }
    ]
}

Terminology

A theme is a JSON object that specifies rules and, optionally, variables. Each rule object contains a class key used to match to an element. In addition to the class, matching can be further restricted by specifying attributes, settings, parents and platforms keys. Properties affect the look or behavior of the element.

Variables allow reusing values throughout different rules. Variables may contain any type of syntax, but may only be referenced by top-level keys in a rule.

Most elements have a single class name, although a few have more than one to allow for both generic, and specific styling. For example, the expand_all_diff_control class can be used to set styles for the expand all button, however expand_all_diff_control untracked may be used to target just the expand all button for untracked files. Multiple class values are separated by a space. When a rule specified multiple class names, all must be present on the element for the rule to be applied.

attributes are set by Sublime Merge, and indicate the state of user interaction, or other information about the nature of an element. The value is an array of strings. Examples include "hover", "pressed" and "highlighted".

settings are user-controlled values that can be changed at run-time. The value is an array of strings which are the names of boolean settings pulled from .sublime-settings files. To check for a false value, prefix the setting name with a ! Themes may also create their own settings to allow users to change the style.

The parents key is an array of objects specifying the class and attributes that must be matched in a parent element.

The platforms key is an array of strings specifying the what operating systems to apply the rule to. Valid options include "osx", "windows", and "linux".

Properties refer to all other keys in the JSON objects. Some properties are available on all elements, while others are specific to an individual element.

General Information

The follow sections discuss information about images and how to specify styles.

Specificity

Unlike CSS, a Sublime Merge theme does not do specificity matching when applying rules to elements. All rules are tested, in order, against each element. Subsequent rules that match will override properties from previous rules.

Texture Images

All textures in a theme are specified using PNG images. Each texture should be saved at "normal" DPI, where each pixel in the file will be mapped to one device pixel. All file paths in the theme definition should reference the normal DPI version.

A second version of each texture should also be included at double the DPI, with @2x added to the filename right before the extension. Sublime Merge will automatically use the @2x version when being displayed on a high-DPI screen. It is also possible to specify @3x variants of textures for screens running at 300% scale or higher.

SVG images are not currently supported.

Dimensions

Integer units in a theme referring to dimensions are always specified in device-independent pixels (DIP). Sublime Merge automatically handles scaling UI elements based on the screen density.

Padding & Margins

Padding and margin may be specified in one of three ways:

  • A single integer value – the same value is applied to the left, top, right and bottom
  • An array of two integers – the first value is applied to the left and top, while the second value is applied to the right and bottom
  • An array of four integers – the values are applied, in order, to the left, top, right and bottom

Variables

Reusable variables may be defined by a JSON object under the top-level key "variables". Variable names are strings, however the value may be a string, number, boolean, array or object. Using a variable requires specifying a string in the format var(example_variable_name).

{
    "variables":
    {
        "light_gray": "rgb(240, 240, 240)"
    },
    "rules":
    [
        {
            "class": "label_control",
            "fg": "var(light_gray)"
        }
    ]
}

Variables may be used as the value for any property, but the variable must be the entire value, it may not be embedded within another variable. The only exception to this rule is that variables may be used as the base color for the CSS color() mod function.

Colors

Colors in themes may now be specified using CSS syntax, as supported by minihtml. This includes support for hex, rgb(), hsl(), variables and the color mod function. Additionally, all predefined variables that are derived from the color scheme are available for use.

The color white, as hex

#fff

The color white, using rgb() functional notation

rgb(255, 255, 255)

50% opacity white, using hsla() functional notation

hsla(0, 100%, 100%, 0.5)

The closest color to red, as defined in the color scheme

var(--redish)

50% opacity of the closest color to red, as defined in the color scheme

color(var(--redish) a(0.5))

Colors derived from the color scheme will always be based on the color scheme defined in Diff.sublime-settings.

Attributes

Attributes are specified as an array of strings. Each string is an attribute name. To check for the absence of an attribute, prepend a ! to the name.

The following attributes are common to all elements:

hover
set whenever the user's mouse is hovered over an element

Luminosity

Although not available on all elements, many have attributes set based on the approximate luminosity of the current color scheme. Most elements have the attributes set based on the global color scheme. Tabs and the tab background, however, have the attributes based on the color scheme specific to the selected view.

The attributes are assigned based on the V value of the background color, when represented as HSV colors.

file_light
V from 0.60-1.00
file_medium
V from 0.30-0.59
file_medium_dark
V from 0.10-0.29
file_dark
V from 0.00-0.09

Settings

Certain Sublime Merge settings are design to influence the UI. Themes should respect these settings and change elements based on them.

overlay_scroll_bars
this should affect the style of the scroll bars – generally they should be semi-transparent and the overlay property of the scroll_area_control should be set to true

Properties

The "rules" key of a .sublime-theme file is a JSON array of of objects describing how UI elements should be styled.

Layer Properties

Many elements in the UI support up to four texture layers for displaying fill colors and raster graphics.

layer0.*
the bottom-most texture layer for the element
layer1.*
the second texture layer for the element
layer2.*
the third texture layer for the element
layer3.*
the fourth texture layer for the element
hit_test_level
a float value setting the required opacity of a pixel for a click to be considering a "hit"
content_margin
the margin around the contents

Each layer has dotted sub-keys in the format layer#.sub-key. Valid sub-keys include:

layer#.opacity

a float value from 0.0 to 1.0 that controls the master opacity of the layer.

Example: 0.9
layer#.tint

a color value of a fill color to apply to the layer.

Example: [255, 0, 0, 127]
layer#.texture

a string of the file path to a PNG image, relative to the Packages/ folder.

Example: "Theme - Merge/button.png"
layer#.inner_margin

texture images are stretched to fit the element by slicing into a grid of 9 using four lines. See padding & margins for valid formats with which to specify the margin used to make the slices.

Example: [5, 2, 5, 2]
layer#.draw_center

a boolean that controls if the center rectangle of the 9-grid created via layer#.inner_margin should be drawn. This is an optimization that allows skipping an unused section of texture.

Example: false
layer#.repeat

a boolean that controls if the texture should be repeated instead of stretched.

Example: false

Value Animation

Properties specified by floats may be animated over time. Instead of providing a single numeric value, the animation is specified with an object including details of the animation. Value animation is primarily useful for changing opacity over time. The object keys are:

target

a float value from 0.0 to 1.0 that controls the destination value

Example: 1.0
speed

a float value of 1.0 or greater that controls the relative length of time the animation takes

Example: 1.5
interpolation

an optional string that allow specifying the use of smoothstep function instead of the default linear function.

Default: "linear"
Example: "smoothstep"

Texture Animation

The layer#.texture sub-key may be an object to specify an animation based on two or more PNG images. The object keys are:

keyframes

an array of strings of the paths to PNG images, in order

Example: ["Theme - Merge/spinner.png", "Theme - Merge/spinner1.png"]
loop

an optional boolean that controls if the animation should repeat

Default: false
Example: true
frame_time

an optional float specifying how long each frame should be displayed. 1.0 represents 1 second.

Default: 0.0333 (30 fps)
Example: 0.0166 (60 fps)

Texture Tinting Properties

Certain elements have an available tint value set by the background of current color scheme. The tint can be modified and applied to a layer#.texture image.

tint_index

Controls which layer the tint is applied to. Must be an integer from 0 to 3.

tint_modifier

An array of four integers in the range 0 to 255. The first three are blended into the RGB values from the tint color with the fourth value specifying how much of these RGB modifier values to apply.

Spacing Properties

Some controls exist to control the layout of elements in a horizontal or vertical line. They support the properties:

spacing
an integer specifying the spacing between elements

Minimum Size Properties

Some container controls allow specifying a minimum size, for the sake of aligning controls. They support the properties:

min_size
a two-element array of integers, specifying the minimum width and height

Font Properties

Certain textual elements allow setting the following font properties:

font.face
the name of the font face
font.size
an integer point size
font.bold
a boolean, if the font should be bold
font.italic
a boolean, if the font should be italic

Shadow Properties

Some text elements allow setting the following properties:

shadow_color
a color value to use for the text shadow
shadow_offset
a 2-element array containing the X and Y offsets of the shadow

Filter Label Properties

Labels used in the quick panel have color control based on selection and matching

fg
a color value for unselected, unmatched text
match_fg
a color value for unselected, matched text
bg
a color value for the background of an unselected row
selected_fg
a color value for selected, unmatched text
selected_match_fg
a color value for selected, matched text
bg
a color value for the background of a selected row
font.face
the name of the font face
font.size
an integer point size

Data Table Properties

Row-based tables of data provide the following properties:

dark_content
if the background is dark – used to set the dark attribute for scrollbars
row_padding
padding added to each row, in one of the formats described in padding & margins

Styled Label Properties

Certain labels allow for additional control over their appearance. They support the properties:

border_color
a color value for the border of the label
background_color
a color value for the background of the label

Elements

The following is an exhaustive list of the elements that comprise the Sublime Merge UI, along with supported attributes and properties.

Windows

title_bar

Only supported on OS X 10.10+.

Properties

fg
a color value to use for the window title text
bg
a color value to use for the title bar background
switch_project_window

This element contains the Switch Repository window, and is intended for use in a parents specifier.

Properties

none

Header

header

Container for the tool bar

Properties

layer properties
search_dialog

Container for the search box, contained within the header

Properties

layer properties
search_text_control

The search input itself, contained within the search_dialog

Properties

layer properties
button_control

A basic button in the header. Used for text buttons when the merge tool is being displayed.

Properties

layer properties minimum size properties
button_control icon_button

A basic buttons in the header that contains an icon. Used with the following icons:

  • icon_location_bar
  • icon_back
  • icon_forward
  • icon_pop_stash
  • icon_search
  • icon_more

Properties

layer properties minimum size properties
button_control_left icon_button

The left-hand button of a two button pair. Used with the following icons:

  • icon_stash
  • icon_push
  • icon_pull

Properties

layer properties minimum size properties
button_control_right icon_button

The right-hand button of a two button pair. Used with the following icons:

  • icon_options_dropdown

Properties

layer properties minimum size properties
icon_location_bar

The icon for the Location Bar button in the header

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_back

The icon for the Back button in the header

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_forward

The icon for the Forward button in the header

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_stash

The icon for the Stash button in the header

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_pop_stash

The icon for the Pop Stash button in the header

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_options_dropdown

The icon for the extra options buttons to the right of the Stash, Push and Pull buttons

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_search

The icon for the Search button in the header

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_more

The icon for the ... button in the header to right right of Search

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_push

The icon for the Push button in the header

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_pull

The icon for the Pull button in the header

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
info_area

The box displayed in the middle of the header that contains:

  • a label_control with the current branch name, OR icon_cancel button and a label_control showing the current running operation, OR info_area_line with the failed_label and a label_control with the last git error
  • the git_output_button on the left side
  • the toggle_diverged_banner_button on the right side, when the current branch is in a diverged state
  • a progress_bar_control and progress_gauge_control along the buttom edge while running a git operation that includes progress information

Properties

layer properties minimum size properties
icon_spacing
a two-element array of integers specifying the x and y spacing around the icon buttons shown on the left and right - git_output_button and toggle_diverged_banner_button
icon_cancel

The cancel button shown to the left of the current running operation in the info_area

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
git_output_button

An icon button displayed in the left side of the info_area.

Four variants of this class exist, indicating the status of the last git command run:

  • git_output_button succeeded
  • git_output_button failed
  • git_output_button running
  • git_output_button cancelled

Properties

layer properties
toggle_diverged_banner_button

An icon button displayed in the right side of the info_area when the current branch has diverged from its tracking branch.

When the diverged banner is shown, the class name will be toggle_diverged_banner_button hide to indicate the button may be pressed to hide the banner.

Properties

layer properties
info_area_line

When a git command fails, the info_area displays the text failed: followed by the first line of the error. This contain controls spacing between the failed: label and the error message.

Properties

spacing properties
failed_label

Displays the text failed: inside of info_area when a git command fails. The error message itself is just a label_control that can be targeted by a parents selector.

Properties

font properties shadow properties styled label properties
diverged_container

When the current branch has diverged from its tracking branch, this banner is shown at the bottom of the header.

Labels and buttons shown in the diverged banner can be targeted using a parents selector.

Properties

layer properties
diverged_button_container

A container used to control spacing between the buttons in the diverged container

Properties

spacing properties

Location Bar

location_bar_container

The primary location bar container that handles scrolling

Properties

layer properties
location_bar_tree

A tree control containing multiple location_bar_rows

Properties

data table properties
indent
an integer amount to indent each level of the tree structure
indent_offset
an additional indent applied to every row, for the sake of positioning disclosure_button_control and close_button
indent_top_level
a boolean if top-level rows in the tree should be indented
spacer_rows
a boolean controlling if a blank row should be added between the Open Files and Folders sections of the sidebar, when both are visible.
location_bar_row

A row may contain a header, branch, remote, tag, stash or submodule

Attributes

selectable
when a row is selectable
selected
when an selectable row is selected
expandable
when a row is expandable
expanded
when an expandable row is expanded

Properties

layer properties
location_bar_heading

One of the "Branches", "Remotes", "Tags", "Stashes" or "Submodules" headings in the sidebar

Properties

font properties shadow properties
fg
a color value to use for the text
case

the case modification to use for the heading - "upper", "lower" or "title".

Default: "upper"
location_bar_label

Names of branches, remotes, tags, stashes or submodules

Properties

font properties shadow properties
fg
a color value to use for the text
disclosure_button_control

An expand/collapse icon present in all tree_rows that can be expanded

Properties

layer properties
content_margin
for buttons, the margin specifies the dimensions
location_bar_branch_row

A spacing-only container that holds the icon_visible (or icon_hidden) and branch_stats_meta container.

Properties

spacing properties
button_control icon_button transparent

A button containing either the icon_visible or icon_hidden

Properties

layer properties minimum size properties
icon_visible

Show if a ref is visible in the commit list

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_hidden

Shows if a ref is hidden in the commit list

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_uninitialized_submodule

Used for a submodule that has not been initialized yet

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_section_actions

Used to show the Submodules menu for to the right of the heading

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
submodule_stat

Displays a number next to a submodule that includes the number of modified and untracked files

Properties

font properties shadow properties styled label properties
branch_stats_meta

A spacing-only container that holds the ahead and behind stat counters and allows controlling the spacing between them

Properties

spacing properties
branch_stat

A theme-able container than holds a counter and arrow indicating if a branch is ahead or behind its tracking branch.

If both ahead and behind counters are present, this element will be present in two forms: branch_stat left and branch_stat right.

branch_stat_meta

A spacing-only container that holds the arrow and number for an ahead or behind counter

Properties

spacing properties
branch_stat_label

Displays a number of commits a branch is ahead or behind its tracking branch

Properties

font properties shadow properties
icon_ahead

Shown next to the count of commits a branch is ahead of its tracking branch

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_behind

Shown next to the count of commits a branch is behind its tracking branch

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions

Commit List

commit_table_container

The primary commit list container that handles scrolling

Properties

layer properties
commit_table

The primary commit list container that handles scrolling

Properties

data table properties
commit_table_row

Each row contains a commit_summary_control

Attributes

selectable
when a row is selectable
selected
when an selectable row is selected
expandable
when a row is expandable
expanded
when an expandable row is expanded

Properties

layer properties
commit_summary_control

A container for the information about a commit

Properties

layer properties
commit_edges_control

The control that draws the commit graph edges (lines)

Properties

line_width
an integer DIP width for the edges - will be snapped to device pixels for crisp drawing
num_colors
an integer of the number of colors to cycle through when drawing the edges - max 8
color0 ... color7
a color value to use as a color for edges
index_files_label

The top-row label in the Commit Changes row of the commit list

Properties

font properties shadow properties
index_action_label

The bottom-row label in the Commit Changes row of the commit list

Properties

font properties shadow properties
message_label

Contains the commit message in a commit_summary_control

Properties

font properties shadow properties
author_label

Contains the author's name in a commit_summary_control

Properties

font properties shadow properties
time_label

Contains the commit time in a commit_summary_control

Properties

font properties shadow properties
commit_file_name_label

Contains the file name when showing the expanded commit view in the Commit List. This can be seen by clicking the colored box to the left of a commit.

Properties

font properties shadow properties
commit_file_path_label

Contains the file path when showing the expanded commit view in the Commit List. This can be seen by clicking the colored box to the left of a commit.

Properties

font properties shadow properties
head_annotation

Contains the name of the HEAD branch. Displayed to the right of a commit's author in a commit_summary_control, or in the Branches row of the commit info table in the Commit Detail view.

Properties

font properties shadow properties styled label properties
branch_annotation

Contains the name of a local branch. Displayed to the right of a commit's author in a commit_summary_control, or in the Branches row of the commit info table in the Commit Detail view.

Properties

font properties shadow properties styled label properties
remote_annotation

Contains the name of a remote branch. Displayed to the right of a commit's author in a commit_summary_control, or in the Branches row of the commit info table in the Commit Detail view.

Properties

font properties shadow properties styled label properties
tag_annotation

Contains the name of a tag. Displayed to the right of a commit's author in a commit_summary_control, or in the Tags row of the commit info table in the Commit Detail view.

Properties

font properties shadow properties styled label properties
stash_annotation

Contains the text stash. Displayed to the right of a commit's author in a commit_summary_control.

Properties

font properties shadow properties styled label properties
file_annotation

Contains the number of modified files in a commit. Displayed to the right of the commit message in a commit_summary_control.

Properties

font properties shadow properties styled label properties

Search View

search_message

Container around errors displayed about search syntax

Properties

layer properties
search_help

Search syntax help message displayed when opening the search view

Properties

font properties
content_margin
the margin around the help text
background_color
a color value to use as the message background
color
a color value to use as the base text color
headline_color
a color value to use as the text color for headings
link_color
a color value to use as the text color for links
searching

An activity indicator displayed in the Commit List when a search in ongoing. Typically this will be a texture animation.

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions

Blame View

blame_commit_summary

The popup window shown when hovering over the gutter of the blame view

Properties

font properties
content_margin
the margin around the help text
background_color
a color value to use as the message background
color
a color value to use as the base text color
headline_color
a color value to use as the text color for headings
link_color
a color value to use as the text color for links
blame_text_control

Search syntax help message displayed when opening the search view

Properties

font properties
num_colors
an integer of the number of colors to cycle through when drawing the commit gutter colors - max 20
color0 ... color19
a color value to use in the gutter

Commit View

The commit view is utilized both as the Commit Dialog, when staging files and writing a commit message, and the Commit Detail, when viewing the details of an existing commit.

details_panel

Container for the right-most pane used to displays diffs and blame controls

Properties

layer properties
commit_dialog_header

Container for the commit dialog text area and buttons in the Commit Dialog

Properties

layer properties
commit_author_container

A container for the label showing the commit author below the commit message text area. This will change to the selection info once the user has entered a commit message.

Properties

layer properties
label_control commit_author

The label showing the authorship info that will be used for the commit. The contents change to selection info once a commit message is entered.

Properties

font properties shadow properties
commit_buttons

A spacing-only container to layout the commit button(s)

Properties

spacing properties
button_control commit_button

The commit button. Text displayed may change on the repository state to things such as: Continue rebase or Complete cherry pick.

Properties

layer properties minimum size properties
split_commit_button

A container for the commit button and options dropdown when both are displayed

Properties

minimum size properties
commit_details_header

Container for the commit details table at the top of the Commit Detail view

Properties

layer properties
commit_message_container

Container to layout the commit details button, actions button and commit message at the top of the Commit Detail.

Properties

layer properties spacing properties
message_content_margin
extra margin around the commit message
edit_button_container

A spacing-only container to layout the edit and cancel buttons when editing a commit message

Properties

spacing properties
field_name_label

The label for a field name in the commit details table

Properties

font properties shadow properties
separator_container

A container for the separator shown between the Working Directory and Staged sections of the Commit Dialog

Properties

content_margin
the margin around the separator
separator

A separator icon shown between the Working Directory and Staged sections of the Commit Dialog

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
terminator_container

A container for the terminator shown at the end of the Commit List and the end of the diffs in the Commit View

Properties

content_margin
the margin around the terminator
terminator

A terminator icon shown at the end of the Commit List and the end of the diffs in the Commit View

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
loading

An activity indicator displayed in the details pane when loading something, such as the tree view for a commit. Typically this will be a texture animation.

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions

File Diffs

expand_all_diff_control

A control that expands or collapses one or more file_diff_controls. Contains a file_diff_header, which in turn contains a disclosure_button_control and label_control.

Properties

layer properties
file_diff_control

A container for a file diff. Contains a file_diff_header and one or more file_diff_hunk_container.

Attributes

expanded
when the diff is expanded to show the hunks

Properties

layer properties spacing properties
file_diff_header

The header for a file diff, containing:

  • A disclosure_button_control for expanding and collapsing
  • A file_meta container with details about the file
  • One or more button_controls. These will be buttons such as Stage, Delete, Discard or the more (...) button.

Attributes

selected
when the diff header has input focus

Properties

layer properties spacing properties
file_meta

A spacing-only container for laying out file info. Contains:

  • Zero or more file_icons. The icons are present when a file is deleted, staged, recently modified, or some combination of all three. When two or more are present, they will be wrapped in a file_icons container and the classes will be file_icon file_icon_left and file_icon file_icon right.
  • If the file is renamed, a renamed_file_container with multiple label_control, label_control inserted, label_control deleted and label_control diff_separator.
  • If the file is not renamed, a basic label_control

Properties

spacing properties
file_icon

A container that holds an icon, or an icons and text. When part of a pair, the class will be file_icon file_icon_left or file_icon file_icon_right.

Will contain one of the following:

  • icon_unmerged
  • icon_deleted
  • icon_staged
  • icon_recent
  • total_untracked containing an icon_text
  • recently_modified containing icon_recent and icon_text

Properties

layer properties minimum size properties
file_icons

When more than one file_icon is present, they will be wrapped in this spacing-only container

Properties

spacing properties
icon_unmerged

Shown in the file_meta of a file that is unmerged

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_deleted

Shown in the file_meta of a file that has been deleted

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_staged

Shown in the file_meta of a file that has been staged

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
icon_recent

Shown in the file_meta of an untracked file that has been modified recently

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions
recently_modified

A spacing-only container holding icon_recent and icon_text

Properties

spacing properties
total_untracked

A spacing-only container holding an icon_text with the number of untracked files

Properties

spacing properties
icon_text

The label shown in a file_icon container

Properties

font properties shadow properties
file_diff_hunk_container

A container for a file diff. Contains a file_diff_hunk_header and either a hunk_description_container or diff scroll_area_control with a diff_text_control.

file_diff_hunk_header

A container for a hunk in a file diff. Contains a hunk_label_container with a label_control plus zero or more button_control hunk_buttons.

Attributes

selected
when the diff header has input focus

Properties

layer properties
hunk_label_container

A container for the label identifying a hunk.

Properties

layer properties
hunk_description_container

A container for a hunk description. Hunk descriptions are used when a hunk represents a binary file, or a file mode change.

Properties

layer properties

Tree View

tree_details

Container for the header and body used to display the tree for a commit. Does not have any theme-able properties, but is useful in a parents selector.

tree_list

A container for the tree

Properties

layer properties
tree

The tree control showing the files and folders, i.e. the tree, for a specific commit

Properties

data table properties
tree_row

A row may contain a file or folder name

Attributes

selectable
when a row is selectable
selected
when an selectable row is selected
expandable
when a row is expandable
expanded
when an expandable row is expanded

Properties

layer properties

Merge Tool

use_hunk_button

The button drawn in the gutter of the merge tool that allows a user to select a hunk for use in the merged version. Two variants exist: use_hunk_button left and use_hunk_button right.

Properties

layer properties
content_margin
for icons, the margin specifies the dimensions

Progress

progress_bar_control

The progress bar container. The progress bar is displayed in the Update window used for updates on OS X and Windows. It is also used in the info_area to display progress for git commands that provide progress information.

Properties

layer properties
progress_gauge_control

The bar representing the progress completed so far

Properties

layer properties
content_margin
the margin specifies the height of the bar

Quick Panel

The quick panel is used for the command palette, switch repository window and the git output overlay.

overlay_control

The container for the quick panel, including the input and data table

Properties

layer properties
quick_panel

The data table displayed below the input. Normally the height is dynamic so the layers will not be visible, however the Switch Project window will use layers for the blank space below the filtered options.

Properties

data table properties
mini_quick_panel_row

A row in quick_panel. Contains one quick_panel_label for each line of text in the row.

Attributes

selected
when the row is selected

Properties

layer properties
quick_panel_row

A row in the Switch Repository window.

Contains quick_panel_label with the repository name, and quick_panel_path_label for the repository path.

Attributes

selected
when the row is selected

Properties

layer properties
quick_panel_label

Repository names in quick_panel_row and all text in mini_quick_panel_row

Properties

filter label properties
quick_panel_path_label

Repository paths in quick_panel_row

Properties

filter label properties
quick_panel_label preview

This label is used to show text in the command palette preview row when an input handler provides a preview

Properties

font properties shadow properties
quick_panel_label command

This label is used in the right-hand side of command palette rows when selecting options for a command, e.g. Stash...

Properties

font properties shadow properties

Dialogs

dialog

The about, license, update and changelog windows use this class for the window background

Properties

layer properties

Scroll Bars

scroll_area_control

The scroll area contains the element being scrolled, along with the bar, track and puck.

Properties

content_margin
a margin that is added around the content being scrolled
overlay
sets the scroll bars to be rendered on top of the content
left_shadow
a color value to use when drawing a shadow to indicate the area can be scrolled to the left
left_shadow_size
in integer of the width of the shadow to draw when the area can be scrolled to the left
top_shadow
a color value to use when drawing a shadow to indicate the area can be scrolled to the top
top_shadow_size
in integer of the height of the shadow to draw when the area can be scrolled to the top
right_shadow
a color value to use when drawing a shadow to indicate the area can be scrolled to the right
right_shadow_size
in integer of the width of the shadow to draw when the area can be scrolled to the right
bottom_shadow
a color value to use when drawing a shadow to indicate the area can be scrolled to the bottom
bottom_shadow_size
in integer of the height of the shadow to draw when the area can be scrolled to the bottom
scroll_bar_control

The scroll bar contains the scroll track. The tint is set based on the background color of the element being scrolled.

Attributes

dark
when the scroll area content is dark, necessitating a light scroll bar
horizontal
when the scroll bar should be horizontal instead of vertical

Properties

layer properties texture tinting properties
scroll_track_control

The track that the puck runs along. The tint is set based on the background color of the element being scrolled.

Attributes

dark
when the scroll area content is dark, necessitating a light scroll bar
horizontal
when the scroll bar should be horizontal instead of vertical

Properties

layer properties texture tinting properties
scroll_corner_control

The dead space in the bottom right of a scroll_area_control when both the vertical and horizontal scroll bars are being shown.

Attributes

dark
when the scroll area content is dark, necessitating a light scroll bar

Properties

layer properties texture tinting properties
puck_control

The scroll puck, or handle. The tint is set based on the background color of the element being scrolled.

Attributes

dark
when the scroll area content is dark, necessitating a light scroll bar
horizontal
when the scroll bar should be horizontal instead of vertical

Properties

layer properties texture tinting properties

Inputs

text_line_control

The text input used by the quick panel and Switch Repository window.

Properties

layer properties
color_scheme_tint
a color value to use to tint the background of the color scheme
color_scheme_tint_2
a color value to use to add a secondary tint to the background of the color scheme
radio_button_list_control

A spacing-only container that controls the layout of one or more checkbox_controls

Properties

spacing properties
checkbox_control

A spacing-only container that controls the layout of a checkbox_box_control next to the label_control

Properties

box_margin
an integer controlling the spacing between the box and the label
checkbox_box_control

Attributes

checked
when the checkbox has been selected

Properties

layer properties
content_margin
the margin specifies the dimensions

Auto Complete

popup_control auto_complete_popup

The primary container for the auto complete popup

Properties

layer properties
auto_complete

The data table for completion data. The tint is set based on the background color of the color scheme applied to the view the popup is displayed in.

Attributes

luminosity attributes

Properties

data table properties texture tinting properties
table_row

A row in auto_complete

Attributes

selected
when the user has highlighted a completion

Properties

layer properties
auto_complete_label

Text in a table_row

Properties

filter label properties
fg_blend
a boolean controlling if the fg, match_fg, selected_fg, and selected_match_fg values should be blended onto the foreground color from the color scheme of the current view

Buttons

button_control

Text buttons

Attributes

pressed
set when a button is pressed down
confirm
set when a button needs to be pressed a second time to ensure the user wants to perform a destructive, or significant, action
highlighted
set when a button is the next action a user should perform

Properties

layer properties minimum size properties

Labels

label_control

Labels are used throughout the interface. Targeting specific labels can be accomplished by using the parents key.

Properties

font properties shadow properties
color
a color value to use for the text
title_label_control

The title label is used in the About window and Welcome screen

Properties

font properties shadow properties
color
a color value to use for the text

Tool Tips

tool_tip_control

Tool tips shown when hovering over tabs and buttons

Properties

content_margin
the margin around the tool tip text
tool_tip_label_control

Text shown in a tool tip

Properties

font properties shadow properties
color
a color value to use for the text

Hints

Hints are shown for "hazard" buttons when the user does not confirm the button present within a certain timeframe. This can be observed by clicking the Discard button for a file hunk once and waiting. They are also used to call attention to the info_area when a git command fails.

Hints are made up of two primary components, the hint_stem and hint_control, which are siblings.

hint_stem

The stem that is used to connect the originating control to the hint_control. The following variants are used, based on which side of the originating control the hint is displayed:

  • hint_stem bottom
  • hint_stem left
  • hint_stem top
  • hint_stem right

Properties

layer properties
content_margin
the margin specifies the dimensions
hint_control

The primary container for the hint. Contains one or more hint_labels. The following variants are used, based on which side of the originating control the hint is displayed:

  • hint_control bottom
  • hint_control left
  • hint_control top
  • hint_control right

Properties

layer properties
hint_label

One label is used for each line of text in a hint

Properties

font properties shadow properties
color
a color value to use for the text

Customization

Users can customize a theme by creating a file with new rules that will be appended to the original theme definition.

To create a user-specific customization of a theme, create a new file with the same filename as the theme, but save it in the Packages/User/ directory.

For example, to customize the Merge theme, create a file named Packages/User/Merge.sublime-theme. Adding the following rules to that file will increase the size of the text in the location bar.

[
    {
        "class": "location_bar_heading",
        "font.size": 15,
    },
    {
        "class": "location_bar_label",
        "font.size": 14
    }
]