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

Label Properties

Label elements allow setting the following properties:

fg
a color value to use for the label text

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 Container Properties

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

border_color
a color value for the border of the label / container
background_color
a color value for the background of the label / container
border_width
A value representing the width of the border line. Can be specified in the same way as margins.
border_radius
A value representing the rounding of the corners of the border. Can be specified in the same way as margins.

Icon Properties

icon controls support the following properties:

content_margin
for icons, the margin specifies the dimensions

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
panel_control switch_project_panel

The control responsible for rendering the background of the switch project window

Properties

layer properties

Tabs

root_tabs

The container which houses the repository tabs, tabs dropdown, and new tab button

Properties

layer properties spacing properties
tabset_control

The control which handles the layout of the repository tabs

Attributes

luminosity attributes

Properties

texture tinting properties
content_margin

the margin around the tab_controls

tab_overlap

how many DIPs the tabs should overlap

tab_width

default tab width when space is available

tab_min_width

the minimum tab width before tab scrolling occurs

tab_height

the height of the tabs in DIPs

mouse_wheel_switch

if the mouse wheel should switch tabs – this should only be set to true if the setting enable_tab_scrolling is false

tab_control

The base tab class used for repository tabs

Properties

close_button_side

the side to display - "left" or "right".

Default: "right"
max_margin_trim

how much of the left and right content_margin may be removed when tab space is extremely limited

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.

tab_close_button

The button used to close repository tabs

Properties

layer properties minimum size properties
new_tab_button

An icon button displayed in the tab bar which when clicked creates a new tab

Properties

layer properties minimum size properties
new_tab_icon

The icon for the new tab button in the tab bar

Properties

layer properties icon properties
tab_dropdown_button

An icon button displayed in the tab bar which when clicked displays a list of open tabs

Properties

layer properties minimum size properties
tab_select_dropdown_icon

The icon for the tab dropdown button in the tab bar

Properties

layer properties icon properties
repository_tab_label_container

A container which wraps the tab title label

Properties

layer properties spacing properties
tab_label

The tab title label

Properties

layer properties icon properties
icon_folder

The icon used to represent a repository tab

Properties

layer properties icon properties

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

The left-hand button of a two button pair. Can further target icon buttons with button_control_left icon_button which is used with the following icons:

  • icon_stash
  • icon_push
  • icon_pull

Properties

layer properties minimum size properties
button_control_right

The right-hand button of a two button pair. Can further target icon buttons with button_control_right icon_button which is 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 icon properties
icon_back

The icon for the Back button in the header

Properties

layer properties icon properties
icon_forward

The icon for the Forward button in the header

Properties

layer properties icon properties
icon_stash

The icon for the Stash button in the header

Properties

layer properties icon properties
icon_pop_stash

The icon for the Pop Stash button in the header

Properties

layer properties icon properties
icon_options_dropdown

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

Properties

layer properties icon properties
icon_search

The icon for the Search button in the header

Properties

layer properties icon properties
icon_more

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

Properties

layer properties icon properties
icon_push

The icon for the Push button in the header

Properties

layer properties icon properties
icon_pull

The icon for the Pull button in the header

Properties

layer properties icon properties
icon_side_bar

The icon for the toggle side bar button in the header

Properties

layer properties icon properties
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 icon properties
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 container 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

Side Bars

side_bar_container

The container that wraps any of the side bars (e.g. the files side bar). You can additionally target side_bar_container with_graph to target the graph side bar.

Properties

layer properties spacing properties
side_bar_tabs

The container that wraps the tabs for each of the side bars

Properties

layer 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 icon properties
icon_hidden

Shows if a ref is hidden in the commit list

Properties

layer properties icon properties
icon_uninitialized_submodule

Used for a submodule that has not been initialized yet

Properties

layer properties icon properties
icon_section_actions

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

Properties

layer properties icon properties
submodule_stat

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

Properties

font properties shadow properties styled container 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 icon properties
icon_behind

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

Properties

layer properties icon properties
submodule_annotation

The label for the checked out branch of a submodule

Properties

See labels

submodule_light_annotation

The label for the checked out commit of a submodule

Properties

See labels

ref_filter_input_container

The container that wraps the locations bar filter input

Properties

layer properties
button_control icon_button close_refs_filter

The close button embedded in the location bar filter input

Properties

layer properties minimum size properties
button_control icon_button search_refs

The button used to toggle the location bar filter. Note that the rule button_control icon_button filtering search_refs and button_control icon_button not_filtering search_refs can be used to target the button in its respective filter state.

Properties

layer properties minimum size properties
icon_filter

The icon used within the location bar filter toggle button

Properties

layer properties icon properties

Table of Contents

table_of_contents_heading

The label used for section headers in the table of contents (i.e. Modified Files)

Properties

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

The container that wraps each table of contents heading (used for spacing purposes)

Properties

layer properties spacing properties
table_of_contents_icon

The base class for icons in the table of contents

Properties

layer properties icon properties
table_of_contents_icon_wrapper

The control that wraps around all icons in the table of contents (used for padding purposes)

Properties

layer properties
table_of_contents_label

The label used for each file entry in the table of contents

Properties

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

The container that wraps around each row in the table of contents

Properties

layer properties
table_of_contents_tree

The top-level table used in the table of contents

Properties

data table properties
close_button_control

The close button displayed next to a selected file in the table of contents

Properties

layer properties minimum size properties
table_of_contents_style_selector

The toggle buttons used to switch between changes and tree style in the table of contents

Properties

layer properties minimum size properties
table_of_contents_style_container

The container which wraps around both style toggle buttons

Properties

layer properties spacing properties

Command History Overlay

command_history_container

The container wrapping each entry in the command history list

Properties

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

The label displayed when there is no previous command history

Properties

font properties shadow properties
command_table

The table listing each command that has been run

Properties

data table properties
command_table_container command_history

The container wrapping around the command table which provides a background color

Properties

layer properties
git_output_data_container

The container wrapping around the output of the individual command within the command history

Properties

layer properties

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
commit_annotation

The base class representing any branch annotations displayed on commits

Additionally, you can target commit_annotation bordered for the left-most branch in a commit, and commit_annotation branch head for the checked out branch

Properties

font properties shadow properties styled container properties
commit_annotation_container

The container which wraps around both a branch label and a condensed branch count

Properties

spacing
condensed_branch_annotation

The annotation containing the branch count when there isn't enough space to render all the branches

Properties

font properties shadow properties
condensed_branch_annotation_container

The styled container wrapping the condensed_branch_icon and the condensed_branch_annotation

Properties

layer properties styled container properties
condensed_branch_icon

The icon displayed next to the condensed branch annotation

Properties

layer properties icon properties
commit_annotations

The container which wraps around all annotations for a given commit

Properties

num_unique_columns
an integer of the number of colors to cycle through when drawing commit annotations (max 8). Applies the column_# attribute (e.g. column_1). Should match the num_colors property for the commit_edges_control.
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
tag_annotation_icon

The icon displayed next to the tag annotation

Properties

layer properties icon properties
tag_annotation_container

The styled container which wraps both the tag annotation and tag icon

Properties

layer properties styled container 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 container 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 container properties
annotation_with_icon_row

Container for annotation labels with icons (for example, the condensed branch annotation).

Properties

spacing properties

Search View

button_control icon_button search_close

The close button embedded in the search input

Properties

layer properties minimum size properties
button_control icon_button search_history_dropdown

The button embedded in the search input used to view and select search history

Properties

layer properties minimum size properties
icon_dropdown_button

The icon used within the search history dropdown

Properties

layer properties icon properties
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 icon properties

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
details_tab_bar

The container which wraps the tabs in the commit view

Properties

layer properties spacing properties
commit_dialog_header

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

Properties

layer properties
commit_dialog_summary_container

Container used when rendering the summary section in the commit dialog

Properties

layer properties
commit_dialog_section_container

Container used when rendering a single section in the commit dialog (i.e. the modified section only)

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
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
recent_commit_messages icon_options_dropdown

A button which when selected displays recent commit messages

Properties

layer properties minimum size properties
recent_commit_messages_dropdown_container

A container wrapping the recent commit messages button, primarily responsible for adding padding

Properties

layer properties spacing properties
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
deleted_annotation

The label for the number of deleted lines for a given commit/ file

Properties

font properties shadow properties
inserted_annotation

The label for the number of inserted lines for a given commit/ file

Properties

font properties shadow properties
label_control bad_signature

The label displayed when signature verification fails

Properties

font properties shadow properties
label_control good_signature

The label displayed when signature verification succeeds

Properties

font properties shadow properties
commit_metadata_container

The container wrapping all the commit metadata (i.e. author, commit message etc)

Properties

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

A stand-in control for when the commit metadata is not being displayed (used to control padding)

Properties

layer 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 icon properties
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 icon properties
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 icon properties

File Diffs

diff scroll_area_control

The scroll_area_control used to handle the horizontal scrolling of diff text (see scroll bars for more details)

diff_text_control

The text control used to render diff text

Properties

line_selection_color
a color value to use to tint the background of a selection in the diff text.
line_selection_border_color
a color value to use to tint the border color of a selection in the diff text.
line_selection_border_width
a float value describing the width of the selection border
line_selection_border_radius
a float value describing how rounded the corners of the selection border are
button_control all_button

A button control used for buttons which perform "all" actions (such as Stage All, Delete All etc).

Properties

layer properties minimum size properties
button_control icon_button file_button

The button shown in files which reveals the file context menu (i.e. the … button).

Properties

layer properties minimum size properties
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.

You can additionally target file_diff_header collapsible for all the collapsible file diffs

Attributes

selected
when the diff header has input focus

Properties

layer properties spacing properties
eliding_label_control

The label control used to display file names in diffs

Properties

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

The container that wraps around the file type badge (e.g. the modified badge). Can additionally target file_badge left_badge and file_badge right_badge when multiple badges are present.

You can additionally target the following badges:

  • unmerged_badge
  • modified_badge
  • untracked_badge
  • staged_badge

Properties

layer properties minimum size properties
file_badge_split_container

The container that wraps multiple file badges together (e.g. a deleted-staged file)

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_created
  • 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 icon properties
icon_created

Shown in the file_meta of a file that has been newly created

Properties

layer properties icon properties
icon_deleted

Shown in the file_meta of a file that has been deleted

Properties

layer properties icon properties
icon_staged

Shown in the file_meta of a file that has been staged

Properties

layer properties icon properties
icon_recent

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

Properties

layer properties icon properties
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_button

A button contained inside a particular hunk

Properties

See buttons

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
image_diff_container

The top level container of an image diff

Properties

layer properties spacing properties
image_diff_control

The control responsible for rendering the image diff

Properties

bg
a color value to use for the background color behind the image (relevant if the image is scaled)
fg
a color value to use for the error text if the image fails to load
checkerboard_main_bg
a color value to use for one of the checkerboard colors if the image has transparency
checkerboard_alt_bg
a color value to use for one of the checkerboard colors if the image has transparency
image_dimensions_container

The container that wraps both the horizontal and vertical image dimensions

Properties

layer properties spacing properties
image_metadata_label

The label used to display image metadata such as image dimensions

Properties

font properties shadow properties
onion_skin_slider

The slider used in onion-skin image diffs

Properties

track_color
a color value to use for the slider track
puck_color
a color value to use for the slider puck
puck_border_color
a color value to use for the slider puck border
max_width
a float to use for the max width of the slider track
side_by_side_and_metadata_container

The container which wraps the side-by-side-images with the metadata

Properties

layer properties spacing properties
side_by_side_image_container

The container which wraps side-by-side images

Properties

layer properties spacing properties

File and Side Bar Tabs

tab_body_container

The container which wraps the tabs and the side bar content in the side bars

Properties

layer properties spacing properties
tab_separator

The separator used to separate tabs

Properties

layer properties
tab_separator_container

The container that wraps the tab separator - primarily for padding purposes

Properties

layer properties minimum size 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

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 icon properties

Merge Command Overlay

merge_helper_container

The top level container wrapping the controls in the merge overlay

Properties

layer properties spacing properties
merge_helper_buttons_container

The container wrapping the Merge and Cancel buttons

Properties

layer properties spacing properties
label_control merge_helper_help_text_label

The label used to display help text in the merge overlay

Properties

See labels

label_control merge_helper_highlight_label

The label used to display the merge targets

Properties

See labels

merge_options_container

The container wrapping the flag options in the merge overlay

Properties

layer properties spacing properties

Console

console_panel

The panel the console sits in. Used to add padding around the console.

Properties

layer properties

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
quick_panel_label hint

This label is used to show hint annotations in the command palette

Properties

font properties shadow properties
quick_panel_label keybinding

This label is used to show keybindings in the command palette

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
toggle_button

Buttons used to control toggle state

You can additionally target the left and right toggle buttons with toggle_button left and toggle_button right

Properties

Uses the same properties as button_control - see above

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
subtitle_label_control

The subtitle label is used in the 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

Input Focus

focus_highlight_control

The control used to highlight input focus when switching focus via the Tab key

Properties

highlight_color
a color value to use for the background of the input focus
highlight_border_color
a color value to use for the border of the input focus
highlight_time
a float value used to represent the number of seconds the highlight should appear for

Preferences Screen

preference_wrapper

The container that wraps a single preference with its inputs

Properties

layer properties spacing properties
preference_text_input_container

The container that wraps preferences entries requiring text input

Properties

layer properties spacing properties
preferences_section_label

The label used to display the title for a section in the preferences

Properties

See labels

preference_title_label

The label used to display title of a preference

Properties

See labels

preference_help_text_label

The label used to display help text for a preference

Properties

See labels

preferences_overlay_left

The container used to wrap the left-side of the preferences page (i.e. the preference sections)

Properties

layer properties spacing properties
preferences_overlay_right

The container used to wrap the right-side of the preferences page (i.e. the preference details)

Properties

layer properties spacing properties
preferences_section_table

The table used to list the various preferences sections

Properties

data table properties
preferences_buttons_container

The container that wraps the close button on the preferences page

Properties

layer properties spacing properties

Welcome / Clone Screen

welcome_overlay

The welcome overlay container, which sits above the repository in the background

Properties

layer properties
welcome_overlay_contents
A top-level wrapper for the contents that sits within the welcome_overlay

Properties

layer properties spacing properties
open_new_repository_buttons_container

The container that wraps the open and new repository buttons

Properties

layer properties spacing properties
recent_repository_button

A clickable entry in the recent repositories list

Properties

layer properties minimum size properties
recent_repository_row

A container wrapping the clickable entry in the recent repositories list

Properties

layer properties spacing properties

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
            }
        ]