Movatterモバイル変換

[0]ホーム
URL:

Sublime Text

Themes
Version:

The look of the Sublime Text interface is controlled by themes. The termthemerefers strictly to the look of the UI – buttons, select lists, the sidebar,tabs and so forth. The highlighting of source code, markup and prose iscontrolled by acolor scheme.

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

Sublime Text themes are implemented via the.sublime-theme format. It isa JSON format that specifies rules for matching elements and modifying theirappearance.

Format🔗

A.sublime-theme file contains a single JSON document. The documentshould bean object containing a key “rules” with the value of3179an array of rules.An optional key “variables” with an objectcontaining variable/value pairs may be added.3179

The following is an example of a.sublime-theme file, showing theformat. A complete theme will have many more rules to cover all elements used inthe UI.

[// 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":[240,240,240],"font.bold":true},// Brighten labels contained in a button on hover{"class":"label_control","parents":[{"class":"button_control","attributes":["hover"]}],"fg":[255,255,255]}]

Terminology🔗

The primary contents of a theme is an array ofrules. Eachrule objectcontains 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 thelook or behavior of the element.

Variables allow reusing values throughout differentrules. Variables may

contain any type of syntax, but may only be referenced by top-level keysin arule.

3179

Most elements have a single class name, although a few have more than one toallow for both generic, and specific styling. For example, thepopup_control class can be used to set styles for the auto complete andHTML popups, howeverpopup_controlauto_complete_popup may be used totarget just the auto complete popup. Multiple"class" values are separatedby a space. When a rule specified multiple class names, all must be present onthe element for the rule to be applied.

"attributes" are set by Sublime Text, and indicate the state of userinteraction, or other information about the nature of an element. The value isan array of strings. Examples include"hover","pressed"and"dirty".

"settings" uses values from.sublime-settings files to filter rules.This allowing theme authors to give users the ability to tweak a theme. Themesmay define their own settings, but there are a handful of “default” settingsthat should be supported if possible. SeeSettings for more details.

The value for the"settings" key may be one of:

  • array of strings

    Each string is the name of boolean settings. To check for afalsevalue, prefix the setting name with a!.

    Example:["bold_folder_labels","!always_show_minimap_viewport"].

  • object

    Each key is the name of a setting. A value may be a boolean, string, or arrayof strings. If an array of strings is used, the setting will be matched ifany of the strings in the array matches the user’s value. When comparing to astring, the user’s setting will be coerced to an empty string when not set.

    Example:{"bold_folder_labels":true,"file_tab_style":"rounded"}.

The"parents" key is an array of objects specifying the"class" and"attributes" that must be matched in a parent element. Note that theparents must be ordered from furthest to closest parent.

The"platforms" key is an array of strings specifying the what operatingsystems to apply the rule to. Valid optionsinclude"osx","windows" and"linux".

Properties refer to all other keys in the JSON objects. Some properties areavailable 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 Text theme does not do specificity matching when applyingrules 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 besaved at “normal” DPI, where each pixel in the file will be mapped to onedevice pixel. All file paths in the theme definition should reference thenormal 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 Text willautomatically use the@2x version when being displayed on a high-DPIscreen. :since:<It is also possible to specify@3x variants of textures forscreens running at 300% scale or higher <3167>>.

SVG images are not currently supported.

Dimensions🔗

Integer units in a theme referring to dimensions are always specified indevice-independent pixels (DIP). Sublime Text automatically handles scaling UIelements 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 andbottom

  • An array of two integers – the first value is applied to the left and right,while the second value is applied to the top and bottom

  • An array of four integers – the values are applied, in order, to the left,top, right and bottom

Inheritance🔗

A theme may extend another theme, appending rules and overriding variables. Toextend a theme, add a top-level key"extends" to the JSON object, with astring value of the base theme.

{"extends":"Default.sublime-theme","rules":[{"class":"label_control","parents":[{"class":"button_control","attributes":["hover"]}],"fg":"red"}]}

The resulting list of rules will start with the base theme rules followed by theextending theme rules. Any variables from the extending theme will overridevariables with the same name in the base theme. Variable overrides will affectrules both in the base theme and the extending theme.

3179

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 stringin the formatvar(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 anyproperties, butthe variable must be the entire value, it may not be embedded within anothervariable. The only exception to this rule is that variables may be used as thebase color for the CSScolor() mod function.

3179

Colors🔗

Colors may be specified by CSS or legacy color syntax:

CSS Color Syntax🔗

Since Sublime Text build 3177, colors in themes may now be specified using CSSsyntax, as supported byminihtml Reference. This includes support for hex,rgb(),hsl(), variables and the color mod function. Additionally, allPredefined Variables that are derived from the colorscheme are available for use.

The color white, as hex

#fff

The color white, usingrgb() functional notation

rgb(255,255,255)

50% opacity white, usinghsl() 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)
3179

Legacy Color Syntax🔗

Prior to supporting CSS syntax for colors, themes were only able to specifycolors using the following formats, which are now deprecated.

RGB🔗

Colors in the RGB color space are specified via an array of 3 or 4 numbers, withthe first three being integers ranging from0 to255representing the components red, green and blue. The optional fourth number isa float ranging from0.0 to1.0 that controls the opacity ofthe color.

The color white, with full opacity

[255,255,255]

The color blue, with 50% opacity

[0,0,255,0.5]

HSL🔗

Colors may also be specified using the HSL color space by creating an array of 4elements, with the first being the string"hsl". The second element isan integer from0 to360 specifying the hue. The third is aninteger from0 to100 specifying the saturation, and the fourthis an integer from0 to100 specifying the lightness.

A dark magenta, with full opacity

["hsl",325,100,30]

A float from0.0 to1.0 may be added as a fifth element tocontrol the opacity.

A bright teal, with 50% opacity

["hsl",180,100,75,0.5]

Derived Colors🔗

It is also possible to derive colors from the current global color scheme.Colors in this format are specified using arrays with specific formats. In allcases, the first element is the base color, which maybe"foreground","background" or"accent".

Change Opacity of Base Color🔗

To change the opacity of a base color, specify an array of 2 elements, the firstbeing the base color name and the second being a float from0.0to1.0. The opacity will be set to the float value.

The color scheme foreground, at 90% opacity

["foreground",0.9]
De-saturate Base Color🔗

To de-saturate a base color, specify an array with 3 elements. The first is thename of the base color, the second is the string"grayscale", and thethird is an integer from0 to100 which specifies whatpercentage of the saturation (in HSL color space) of the existing color shouldbe retained. A value of100 means no change, whereas a valueof0 would cause the color to be completely de-saturated.

The color scheme foreground, with the saturation adjusted to 1/4 of theoriginal value.

["foreground","grayscale",25]
Tint Base Color🔗

5 and 6-element derived colors allow blending a color into the base color. A5-element colors uses an RGBA color, whereas a 6-element uses an HSLA. In bothcases, the last element, which normally represents the opacity, controls howmuch of the secondary color is blended into the base.

The color scheme background, lightened with white

["background",255,255,255,0.1]

The color scheme accent, tinted with dark red

["accent","hsl",0,100,30,0.2]

Colors derived from the color scheme will always be based on the global colorscheme, and will not reflect view-specific color schemes. Certain view-specificcontrols in the UI have tinting properties that allow using the view-specificcolor scheme colors.

Font Sizes🔗

Font sizes may be specified in the formats:

Numeric🔗

An integer or float to specify the size of the font in pixels.

Examples:12,13.5.

CSS Format🔗

A string of apx orrem CSS font size.

Examples:12px,1.`2rem

Therem size is based on the global settingfont_size for mostelements. Elements that use a different root font size will specify in thedescription.

4050

Attributes🔗

Attributes are specified as an array of strings. Each string is an attributename. 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 theapproximate luminosity of the current color scheme. Most elements have theattributes set based on the global color scheme. Tabs and the tab background,however, have the attributes based on the color scheme specific to the selectedview.

The attributes are assigned based on theV value of the background color,when represented asHSV colors.

file_light

V from0.60-1.00

file_medium

V from0.30-0.59

file_medium_dark

V from0.10-0.29

file_dark

V from0.00-0.09

Settings🔗

Certain Sublime Text settings are design to influence the UI. Themes shouldrespect these settings and change elements based on them.

"overlay_scroll_bars"🔗

This should affect the style of the scroll bars – generally they should besemi-transparent and theoverlay property of thescroll_area_control should be set totrue.

"always_show_minimap_viewport"🔗

If the current viewport area should be highlighted on the minimap even whenthe user is not hovering over the minimap.

"bold_folder_labels"🔗

If folder names in the side bar should have thefont.bold property set totrue.

"mouse_wheel_switches_tabs"🔗

This is used to control mouse wheel behavior of tabs on Linux. It should becombined with checking for!enable_tab_scrolling to change themouse_wheel_switch property of thetabset_controltofalse.

"highlight_modified_tabs"🔗

If the tabs of modified files should be highlighted. This setting should bechecked in addition to thedirty attribute.

"show_tab_close_buttons"🔗

If tabs should have close buttons.

"inactive_sheet_dimming"🔗
4095

If sheets other than the one with the attributehighlighted should bevisually de-emphasized usingbackground_modifier.

Properties🔗

The"rules" key of a.sublime-theme file is a JSON array of ofobjects describing how UI elements should be styled. Every element in the UIsupports the following keys:

layer0.*

The bottom-most texturelayer for the element.

layer1.*

The second texturelayer for the element.

layer2.*

The third texturelayer for the element.

layer3.*

The fourth texturelayer for the element.

hit_test_level

A float value setting the required opacity of a pixel for a click to beconsidering a “hit”.

Layer Properties🔗

Every element in the UI supports up to four texture layers for displaying fillcolors and raster graphics. Each layer has dotted sub-keys in the formatlayer#.sub-key. Valid sub-keys include:

layer#.opacity

A float value from0.0 to1.0 that controls the masteropacity of the layer.

Example:0.9

layer#.tint

Acolor 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 thePackages/folder.

Example:"Theme-Default/arrow_right.png"

layer#.inner_margin

Texture images are stretched to fit the element by slicing into a grid of 9using four lines. Seepadding & margins for valid formats with which tospecify 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 vialayer#.inner_margin should be drawn. This is an optimization thatallows skipping an unused section of texture.

Example:false

layer#.repeat

A boolean that controls if the texture should be repeated instead ofstretched.

Example:false

Value Animation🔗

Properties specified by floats may be animated over time. Instead of providing asingle numeric value, the animation is specified with an object includingdetails of the animation.Value animation is primarily useful for changingopacity over time. The object keys are:

target

A float value from0.0 to1.0 that controls the destinationvalue.

Example:1.0

speed

A float value of1.0 or greater that controls the relative length oftime the animation takes.

Example:1.5

interpolation

An optional string that allow specifying the use ofsmoothstep functioninstead of the defaultlinear function.

Default:"linear"

Example:"smoothstep"

Texture Animation🔗

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

keyframes

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

Example:["Theme-Default/spinner.png","Theme-Default/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 bedisplayed.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 currentcolor scheme. The tint can be modified and applied to alayer#.textureimage.

tint_index

Controls which layer the tint is applied to. Must be an integerfrom0 to3.

tint_modifier

An array of four integers in the range0 to255. The firstthree are blended into the RGB values from the tint color with the fourthvalue specifying how much of these RGB modifier values to apply.

Font Properties🔗

Certain textual elements allow setting the following font properties:

font.face

The name of the font face.

font.size

Thefont size.

font.bold

A boolean, if the font should be bold.

font.italic

A boolean, if the font should be italic.

color

Acolor value to use for the text - thefg property is analias for this for backwards compatibility.

shadow_color

Acolor value to use for the text shadow.

shadow_offset

A 2-element array containing the X and Y offsets of the shadow

opacity
4073

A float from0.0 to1.0 that is multiplied against theopacity of thecolor andshadow_color properties.

Filter Label Properties🔗

Labels used in the quick panel have color control based on selection andmatching:

fg

Acolor value for unselected, unmatched text.

match_fg

Acolor value for unselected, matched text.

bg

Acolor value for the background of an unselected row.

selected_fg

Acolor value for selected, unmatched text.

selected_match_fg

Acolor value for selected, matched text.

bg

Acolor value for the background of a selected row.

font.face

The name of the font face.

font.size

Thefont size.

Data Table Properties🔗

Row-based tables of data provide the following properties:

dark_content

If the background is dark – used to set thedark attribute forscrollbars.

row_padding

Padding added to each row, in one of the formats described inPadding &Margins.

Styled Label Properties🔗

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

border_color

Acolor value for the border of the label.

background_color

Acolor value for the background of the label.

Elements🔗

The following is an exhaustive list of the elements that comprise the SublimeText UI, along with supported attributes and properties:

Windows🔗

title_bar
Attributes

Luminosity

Properties
fg

Acolor value to use for the window title text –Mac 10.10or newer only.

bg

Acolor value to use for the title bar background –Mac10.10 or newer only.

style
4050

The OS style to use for the titlebar -"system","dark"(Mac/Linux only)or"light"(Mac only).

Default:"system"

window

This element can not be styled directly, however it can be used in a"parents" key. The luminosity attributes are set based on the globalcolor scheme.

Attributes

Luminosity

edit_window

This element contains the main editor window, and is intended for use in a"parents" key.

switch_project_window

This element contains the Switch Project window, and is intended for use ina"parents" key.

Side Bar🔗

sidebar_container

The primary sidebar container that handles scrolling.

Properties
content_margin

Themargin around thesidebar_tree.

sidebar_tree

A tree control containing multipletree_rows.

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 positioningdisclosure_button_control andclose_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 theOpenFiles andFolders sections of the sidebar, when both are visible..

tree_row

A row may contain a header, open file, folder or file.

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.

sidebar_heading

One of the “Open Files”, “Group #” or “Folders” headings in the sidebar.

Properties

font properties

case
3179

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

Default:"upper"

file_system_entry`
3181

The container holding information about a file or folder in the sidebar.Contains different controls based on which section of the sidebar it iswithin.

Within theOpen Files section, this control will contain asidebar_label with the file name, plus possibly avcs_status_badge.

Within theFolders section, this control will contain a folder or fileicon (eithericon_folder,icon_folder_loading,icon_folder_duporicon_file_type), asidebar_label with the file or folder name,plus possibly avcs_status_badge.

Attributes
ignored

Files: when a file is ignored.

Folders: when the entire folder is ignored.

untracked

Files: when a file is new or not recognized.

Folders: when a folder contains one or more untracked files.

modified

Files: when a file has been changed on disk.

Folders: when a folder contains one or more modified files.

missing

Folders: when one or more of a folder‘s files is no longer on disk.

added

Files: when a new file has been newly added to the index.

Folders: when a folder contains one or more added files.

staged

Files: when a modified file has been added to the index.

Folders: when a folder contains one or more staged files.

deleted

Folders: when one or more of a folder‘s files has been added to theindex for removal.

unmerged

Files: when a file is in a conflict state and needs to be resolved.

Folders: when a folder contains one or more unmerged files.

Properties
content_margin

Themargin around the contained controls.

spacing

An integer number of pixels between each contained control.

sidebar_label

Names of open files, folder names and filenames.

Properties

font properties

close_button

A button to the left of each file in theOpen Files section.

Properties
content_margin

For buttons, themargin specifies the dimensions.

disclosure_button_control

An expand/collapse icon present in alltree_rows that can be expanded

Properties
content_margin

For buttons, themargin specifies the dimensions.

icon_folder

Used for a folder once the contents have been fully enumerated.

Properties
content_margin

For icons, themargin specifies the dimensions.

icon_folder_loading

Used for a folder while the contents are being enumerated

Properties
content_margin

For icons, themargin specifies the dimensions.

icon_folder_dup

Used for a folder that has been scanned previously in the sidebar.This isnecessary to prevent a possibly infinite list of files due to recursivesymlinks.

Properties
content_margin

For icons, themargin specifies the dimensions.

icon_file_type

The icon for a file. Thelayer0.texture should not be set since it isdetermined dynamically based on theicon setting providedby.tmPreferences files.

Properties
content_margin

For icons, themargin specifies the dimensions.

vcs_status_badge
3181

An icon contained withinfile_system_entry that is used to display thestatus of a file or folder with regards to a Git repository it is containedin. This icon will only be shown if the settingshow_git_statusistrue, the file is contained within a Git repository, and thefile has some sort of special state within the repository.A file that isnot shown viagitstatus and is not ignored via a.gitignorerule will have no icon.

Attributes
ignored

Files: when a file is ignored.

Folders: when the entire folder is ignored.

untracked

Files: when a file is new or not recognized.

Folders: when a folder contains one or more untracked files.

modified

Files: when a file has been changed on disk.

Folders: when a folder contains one or more modified files.

missing

Folders: when one or more of a folder‘s files is no longer on disk.

added

Files: when a new file has been newly added to the index.

Folders: when a folder contains one or more added files.

staged

Files: when a modified file has been added to the index.

Folders: when a folder contains one or more staged files.

deleted

Folders: when one or more of a folder‘s files has been added to theindex for removal.

unmerged

Files: when a file is in a conflict state and needs to be resolved.

Folders: when a folder contains one or more unmerged files.

Properties
content_margin

For icons, themargin specifies the dimensions.

Tabs🔗

tabset_control
Attributes

Luminosity

Properties

texture tinting properties

content_margin

Themargin around thetab_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 totrue if the settingenable_tab_scrolling isfalse.

tab_control
Attributes

Luminosity

dirty

When the associated view has unsaved changed.

added

When the associated view is for a new file.

modified

When the associated view is for a modified file.

deleted

When the associated view is for a file that has been deleted orotherwise no longer exists.

selected

When the associated view is the active view in its group.

transient

When the associate view is a preview and not fully opened.

highlighted
4050

When the tab is for the sheet with input focus.

left
4095

When the tab is the left-most tab in the tabset.

right
4095

When the tab is the right-most tab in the tabset.

multiple
4095

When the tab is part of a sheet multi-selection.

left_of_selected
4095

When the tab is to the left of a selected tab.

left_of_hover
4095

When the tab is to the left of a hovered tab.

right_of_selected
4095

When the tab is to the right of a selected tab.

right_of_hover
4095

When the tab is to the right of a hovered tab.

left_overhang
4095

When the tab is overhanging to the left of its sheet, which can occurduring sheet multi-selection.

right_overhang
4095

When the tab is overhanging to the right of its sheet, which can occurduring sheet multi-selection.

Properties

texture tinting properties

content_margin

Themargin around thetab_label.

max_margin_trim

How much of the left and rightcontent_margin may be removed whentab space is extremely limited.

accent_tint_index

Controls which layer the accent tint is applied to. Must be an integerfrom0 to3. The accent color is specified by the colorscheme.

accent_tint_modifier

An array of four integers in the range0 to255. Thefirst three are blended into the RGB values from the accent tint colorwith the fourth value specifying how much of these RGB modifier valuesto apply.

tab_label
Attributes
dirty

When the associated view has unsaved changed.

added

When the associated view is for a new file.

modified

When the associated view is for a modified file.

deleted

When the associated view is for a file that has been deleted orotherwise no longer exists.

transient

When the associate view is a preview and not fully opened

Properties

font properties

tab_close_button
Properties
content_margin

For buttons, themargin specifies the dimensions.

accent_tint_index

Controls which layer the accent tint is applied to. Must be an integerfrom0 to3. The accent color is specified by the colorscheme.

accent_tint_modifier

An array of four integers in the range0 to255. Thefirst three are blended into the RGB values from the accent tint colorwith the fourth value specifying how much of these RGB modifier valuesto apply.

scroll_tabs_left_button
Properties
content_margin

For buttons, themargin specifies the dimensions.

scroll_tabs_right_button
Properties
content_margin

For buttons, themargin specifies the dimensions.

show_tabs_dropdown_button
Properties
content_margin

For buttons, themargin specifies the dimensions.

tab_connector
4095
Attributes
left_overhang

When the tab is overhanging to the left of its sheet, which can occurduring sheet multi-selection.

right_overhang

When the tab is overhanging to the right of its sheet, which can occurduring sheet multi-selection.

Properties

texture tinting properties

Quick Panel🔗

The quick panel is used for the various Goto functionality, the command paletteand is available for use by plugins.

overlay_control

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

Specializations

To allow for targeting theoverlay_control when the quick panelis being used for specific functionality, the following multi-classselectors are available:

overlay_controlgoto_file

The Goto File quick panel.

overlay_controlgoto_symbol

The Goto Symbol quick panel.

overlay_controlgoto_symbol_in_project

The Goto Symbol in Project quick panel.

overlay_controlgoto_line

The Goto Line quick panel.

overlay_controlgoto_word

The Goto Anything quick panel, filtering by word.

overlay_controlcommand_palette

The Command Palette.

4050
Properties
content_margin

Themargin around thequick_panel.

quick_panel

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

Properties

data table properties

mini_quick_panel_row

A non-file row inquick_panel. Contains onequick_panel_label foreach line of text in the row.

Attributes
selected

When the row is selected.

quick_panel_row

A Goto Anything file row inquick_panel. Also used in the Switch Projectwindow.

Containsquick_panel_label with the filename, andquick_panel_path_label for the file path.

Attributes
selected

When the row is selected.

quick_panel_entry
4050

A spacing-only container to control the spacing betweenquick_panel_label andquick_panel_path_label controls when a rowhas one or more detail lines.

Properties
spacing

An integer number of pixels between each line of text,

kind_container
4050

A container shown to the left of the symbols in the Goto Symbol and GotoSymbol in Project quick panels. It contains thekind_label and is usedto indicate the kind of the symbol.

This element is also used inauto_complete to show the kind of the itembeing inserted. A"parents" key should be used to distinguish the twouses.

The elementkind_container is always paired with a second class nameindicating the general category the kind belongs to. The categories forusage in the quick panel are as follows:

Specializations
kind_containerkind_ambiguous

When the kind of the item is unknown– no color.

kind_containerkind_keyword

When the item is a keyword– typically pink.

kind_containerkind_type

When the item is a data type, class, struct, interface, enum, trait,etc– typically purple.

kind_containerkind_function

When the item is a function, method, constructor or subroutine–typically red.

kind_containerkind_namespace

When the item is a namespace or module– typically blue.

kind_containerkind_navigation

When the item is a definition, label or section– typically yellow.

kind_containerkind_markup

When the item is a markup component, including HTML tags and CSSselectors– typically orange.

kind_containerkind_variable

When the item is a variable, member, attribute, constant or parameter–typically cyan.

kind_containerkind_snippet

When the item is a snippet– typically green.

kind_containerkind_color_redish

When the plugin author wants to display red.

kind_containerkind_color_orangish

When the plugin author wants to display orange.

kind_containerkind_color_yellowish

When the plugin author wants to display yellow.

kind_containerkind_color_greenish

When the plugin author wants to display green.

kind_containerkind_color_cyanish

When the plugin author wants to display cyan.

kind_containerkind_color_bluish

When the plugin author wants to display blue.

kind_containerkind_color_purplish

When the plugin author wants to display purple.

kind_containerkind_color_pinkish

When the plugin author wants to display pink.

kind_containerkind_color_dark

When the plugin author wants to display a dark background.

kind_containerkind_color_light

When the plugin author wants to display a light background.

Properties
content_margin

Amargin that is added around thekind_label.

kind_label
4050

A label showing a single unicode character, contained within thekind_container.

This element is also used inauto_complete to show the kind of the itembeing inserted. A"parents" key should be used to distinguish the twouses.

Properties

font properties

symbol_container
4050

A container around thequick_panel_label when showing the Goto Symbol orGoto Symbol in Project symbol lists.

Properties
content_margin

Amargin that is added around thequick_panel_label.

quick_panel_label

Filenames inquick_panel_row and all text inmini_quick_panel_row.

Properties

filter label properties

quick_panel_path_label

File paths inquick_panel_row.

Properties

filter label properties

quick_panel_labelkey_binding
4073

Key bindings show to the right-hand side ofquick_panel_row.

Properties

filter label properties

quick_panel_labelhint
4073

Annotations show to the right-hand side ofquick_panel_row.

Properties

filter label properties

quick_panel_detail_label
4083

Detail rows inquick_panel_row.

Properties
color

Acolor value to use for the text.

link_color

Acolor value to use for links.

monospace_color

Acolor value to use for monospace text.

monospace_background_color

Acolor value to use for the background of monospace text.

Sheets🔗

sheet_contents
4095

A sheet can have text, image or HTML contents

Attributes

Luminosity

highlighted
4095

When the sheet has input focus.

Properties
background_modifier

A string with a space-separated list of adjusters that are supported bythecolor() mod function. Used for implementinginactive sheet dimming.

Views🔗

text_area_control

This element can not be styled directly since that is controlled by thecolor scheme, however it can be used in a"parents" key.

Attributes

Luminosity

grid_layout_control

The borders displayed between views when multiple groups are visible.

Properties
border_color

Acolor value to use for the border.

border_size

An integer of the border size in DIPs.

minimap_control

Control over the display of the viewport projection on the minimap.

Properties
viewport_color

Acolor value to fill the viewport projection with.

viewport_opacity

A float from0.0 to1.0 specifying the opacity of theviewport projection.

fold_button_control

Code folding buttons in the gutter.

Attributes
expanded

When a section of code is unfolded.

Properties
content_margin

For buttons, themargin specifies the dimensions.

popup_shadow
4075

A wrapper around popup windows that allows controlling the shadow.

popup_controlhtml_popup

The primary container for the HTML popups used byShow Definitions andthird-party packages. The tint of the scroll bar will be set to thebackground color of the HTML document.

popup_controlannotation_popup
4050

The primary container for the annotations added to the right-hand side ofthe editor pane by build systems and third-party packages.

annotation_close_button
4050

The close button shown at the left edge ofannotation_popup.

Properties
content_margin

For buttons, themargin specifies the dimensions.

Auto Complete🔗

popup_controlauto_complete_popup

The primary container for the auto complete popup.

auto_complete

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

Properties

data table properties

texture tinting properties

table_row

A row inauto_complete.

Attributes
selected

When the user has highlighted a completion.

kind_container
4050

A container shown to the left of an auto complete item, which contains thekind_label and is used to indicate the kind of the item.

This element is also used in thequick_panel for Goto Symbol and GotoSymbol in Project. A"parents" key should be used to distinguish the twouses.

The elementkind_container is always paired with a second class nameindicating the general category the kind belongs to. The categories forusage in the auto complete window are as follows:

Specializations
kind_containerkind_ambiguous

When the kind of the item is unknown– no color.

kind_containerkind_keyword

When the item is a keyword– typically pink.

kind_containerkind_type

When the item is a data type, class, struct, interface, enum, trait,etc– typically purple.

kind_containerkind_function

When the item is a function, method, constructor or subroutine–typically red.

kind_containerkind_namespace

When the item is a namespace or module– typically blue.

kind_containerkind_navigation

When the item is a definition, label or section– typically yellow.

kind_containerkind_markup

When the item is a markup component, including HTML tags and CSSselectors– typically orange.

kind_containerkind_variable

When the item is a variable, member, attribute, constant or parameter–typically cyan.

kind_containerkind_snippet

When the item is a snippet– typically green.

Properties
content_margin

Amargin that is added around thekind_label.

kind_label
4050

A label showing a single unicode character, contained within thekind_container.

This element is also used in thequick_panel for Goto Symbol and GotoSymbol in Project. Aparents key should be used to distinguish the twouses.

Properties

font properties

Therem root font size is based on the font size of the editor controlthe auto complete window is being shown for.

trigger_container
4050

A container around theauto_complete_label.

Properties
content_margin

Amargin that is added around theauto_complete_label.

auto_complete_label

Text in atable_row.

Properties

filter label properties

fg_blend

A boolean controlling if thefg,match_fg,selected_fg, andselected_match_fg values should be blended onto the foregroundcolor from the color scheme of the current view.

auto_complete_labelauto_complete_hint
4073

The “annotation” hint displayed at the right-hand-side of atable_row.

Properties

font properties

Therem root font size is based on the font size of the editorcontrol the auto complete window is being shown for.

fg_blend

A boolean controlling if thecolor value should be blended onto theforeground color from the color scheme of the current view.

auto_complete_detail_pane
4050

A detail pane displayed below the list of auto complete items, containingtheauto_complete_info spacer, withauto_complete_kind_name_labelandauto_complete_details inside.

Properties
content_margin

Amargin that is added around the child controls.

auto_complete_info
4050

Provides spacing betweenauto_complete_kind_name_label andauto_complete_details.

Properties
spacing

An integer number of pixels between each contained control.

auto_complete_kind_name_label
4050

A label used to display the name of the auto complete kind.

Properties

font properties

Therem root font size is based on the font size of the editorcontrol the auto complete window is being shown for.

styled label properties

auto_complete_details
4050

A single-line HTML control used to display the details of the auto completeitem.

Properties
font.face

The name of the font face.

font.size

Thefont size -therem root font size is based onthe font size of the editor control the auto complete window is beingshown for.

color

Acolor value to use for the text.

link_color

Acolor value to use for links.

monospace_color

Acolor value to use for monospace text.

monospace_background_color

Acolor value to use for the background of monospace text.

Panels🔗

panel_controlfind_panel

The container for the Find and Incremental Find panels.

Properties
content_margin

Themargin around the panel contents.

panel_controlreplace_panel

The container for the Replace panel.

Properties
content_margin

Themargin around the panel contents.

panel_controlfind_in_files_panel

The container for the Find in Files panel.

Properties
content_margin

Themargin around the panel contents.

panel_controlinput_panel

The container for the input panel, which is available via the API and usedfor things like file renaming.

Properties
content_margin

Themargin around the panel contents.

panel_controlconsole_panel

The container for the Console.

Properties
content_margin

Themargin around the panel contents.

panel_controloutput_panel

The container for the output panel, which is available via the API and usedfor build results.

Properties
content_margin

Themargin around the panel contents.

panel_controloutput_panelio_panel

The container for the output panel if it has been configured with an inputbox.

Properties
content_margin

Themargin around the panel contents.

panel_controlswitch_project_panel

The container for the input in the Switch Project window.

Properties
content_margin

Themargin around the panel contents.

panel_grid_control

The layout grid used to position inputs on the various panels.

Properties
inside_spacing

An integer padding to place between each cell of the grid.

outside_vspacing

An integer padding to place above and below the grid.

outside_hspacing

An integer padding to place to the left and right of the grid.

panel_close_button

The button to close the open panel

Properties
content_margin

For buttons, themargin specifies the dimensions.

Status Bar🔗

status_bar
Attributes
panel_visible

When a panel is displayed above the status bar

Properties
content_margin

Themargin around thesidebar_button_control,status_container andstatus_buttonss.

panel_button_control
<4050

The panel switcher button on the left side of the status bar.

Properties
content_margin

For buttons, themargin specifies the dimensions.

sidebar_button_control
4050

The sidebar/panel switcher button on the left side of the status bar.

Properties
content_margin

For buttons, themargin specifies the dimensions.

status_container

The area that contains the current status message.

Properties
content_margin

Themargin around the status message.

status_button

The status buttons that display, and allow changing, the indentation,syntax, encoding and line endings.

Properties
content_margin

For buttons, themargin specifies the dimensions.

min_size

An array of two integers specifying the minimum width and height of abutton, in DIPs.

vcs_status
3181

The container holding thevcs_branch_icon,label_control with thecurrent branch name, andvcs_changes_annotation control.

Properties
content_margin

Themargin around the contained controls.

spacing

An integer number of pixels between each contained control.

vcs_branch_icon
3181

An icon shown to the left of the current branch name.

Properties
content_margin

For icons, themargin specifies the dimensions.

vcs_changes_annotation
3181

Displays the number of files that have been added, modified or deleted.

Properties

font properties

styled label properties

Dialogs🔗

dialog

The Indexer Status and Update windows both use this class for the windowbackground.

progress_bar_control

The progress bar container. The progress bar is displayed in the Updatewindow used for updates on Mac and Windows.

progress_gauge_control

The bar representing the progress completed so far.

Properties
content_margin

Themargin specifies the height of the bar.

Scroll Bars🔗

scroll_area_control

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

Attributes
scrollable
3186

When the control can be scrolled vertically.

hscrollable
3186

When the control can be scrolled horizontally.

Properties
content_margin

Amargin that is added around the content beingscrolled.

overlay

Sets the scroll bars to be rendered on top of the content.

left_shadow

Acolor value to use when drawing a shadow to indicate thearea can be scrolled to the left.

left_shadow_size

An integer of the width of the shadow to draw when the area can bescrolled to the left.

top_shadow

Acolor value to use when drawing a shadow to indicate thearea can be scrolled to the top.

top_shadow_size

An integer of the height of the shadow to draw when the area can bescrolled to the top.

right_shadow

Acolor value to use when drawing a shadow to indicate thearea can be scrolled to the right.

right_shadow_size

An integer of the width of the shadow to draw when the area can bescrolled to the right.

bottom_shadow

Acolor value to use when drawing a shadow to indicate thearea can be scrolled to the bottom.

bottom_shadow_size

An integer of the height of the shadow to draw when the area can bescrolled to the bottom.

scroll_bar_control

The scroll bar contains the scroll track. The tint is set based on thebackground 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

texture tinting properties

content_margin

Amargin that is added around the scroll track.

scroll_track_control

The track that the puck runs along. The tint is set based on the backgroundcolor 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

texture tinting properties

scroll_corner_control

The dead space in the bottom right of ascroll_area_control when boththe vertical and horizontal scroll bars are being shown.

Attributes
dark

When the scroll area content is dark, necessitating a light scroll bar.

Properties

texture tinting properties

puck_control

The scroll puck, or handle. The tint is set based on the background color ofthe 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

texture tinting properties

Inputs🔗

text_line_control

The text input used by the Quick Panel, Find, Replace, Find in Files andInput panels.

Properties
content_margin

Themargin around the text.

color_scheme_tint

Acolor value to use to tint the background of the color scheme.

color_scheme_tint_2

Acolor value to use to add a secondary tint to thebackground of the color scheme.

dropdown_button_control

The button to close the open panel.

Properties
content_margin

For buttons, themargin specifies the dimensions.

Buttons🔗

button_control

Text buttons.

Attributes
pressed

Set when a button is pressed down.

disabled

When the button won’t have any effect or is otherwise non functional.

Properties
min_size

An array of two integers specifying the minimum width and height of abutton, in DIPs.

icon_button_group

A grid controlling the spacing of related icon buttons.

Properties

no layer support

spacing

An integer number of pixels between each button in the group.

icon_button_control
Small icon-based buttons in the Find, Find in Files,

and Replace panels

Attributes
selected

When an icon button is toggled on.

left

When the button is the left-most button in a group.

right

When the button is the right-most button in a group.

icon_regex

The button to enable regex mode in the Find, Find in Files and Replacepanels.

Properties
content_margin

For icons, themargin specifies the dimensions.

icon_case

The button to enable case-sensitive mode in the Find, Find in Files andReplace panels.

Properties
content_margin

For icons, themargin specifies the dimensions.

icon_whole_word

The button to enable whole-word mode in the Find, Find in Files and Replacepanels.

Properties
content_margin

For icons, themargin specifies the dimensions.

icon_wrap

The button to enable search wrapping when using the Find and Replacepanels.

Properties
content_margin

For icons, themargin specifies the dimensions.

icon_in_selection

The button to only search in the selection when using the Find and Replacepanels.

Properties
content_margin

For icons, themargin specifies the dimensions.

icon_highlight

The button to enable highlighting all matches in the Find and Replacepanels.

Properties
content_margin

For icons, themargin specifies the dimensions.

icon_preserve_case

The button to enable preserve-case mode when using the Replace panel.

Properties
content_margin

For icons, themargin specifies the dimensions.

icon_context

The button to show context around matches when using the Find in Filespanel.

Properties
content_margin

For icons, themargin specifies the dimensions.

icon_use_buffer

The button to display results in a buffer, instead of an output panel, whenusing the Find in Files panel.

Properties
content_margin

For icons, themargin specifies the dimensions.

icon_use_gitignore
4073

The button to toggle using.gitignore to filter files in the Find inFiles panel.

Properties
content_margin

For icons, themargin specifies the dimensions.

Labels🔗

label_control

Labels are shown in the Find, Replace, Find in File and Input panels.Additionally, labels are used in the Update window, on textual buttons andfor the text in thestatus_container.

Targeting specific labels can be accomplished by using the"parents"key.

Properties

font properties

title_label_control

The title label is used in the About window.

Properties

font properties

Tool Tips🔗

tool_tip_control

Tool tips shown when hovering over tabs and buttons.

Properties
content_margin

Themargin around the tool tip text.

tool_tip_label_control

Text shown in a tool tip

Properties

font properties

Deprecated🔗

Color Values🔗

Before build 3127, the only way to specify opacity in colors was by using a4-element array containing all integers from0 to255. Thefourth element controlled the opacity, such that0 was fullytransparent and255 was fully opaque. The preferred format is now touse a float from0.0 to1.0.

Obsolete🔗

As the UI of Sublime Text has adapted over time, certain elements and propertiesare no longer applicable or supported.

Elements🔗

Thepanel_button_control element was removed from the status bar andreplaced bysidebar_button_control.

4050

Thesheet_container_control element is never visible to users in recentversions of Sublime Text.

An element namedicon_reverse used to exist in the find panel to control ifsearching would move forward or backwards in the view. This is now controlledby theFind andFind Prev buttons.

The element namedquick_panel_score_label is no longer present in the GotoAnything quick panel.

Properties🔗

Theblur property used to be supported to blur the pixel data behind anelement, however it is not currently supported for implementation reasons.

Customization🔗

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

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

For example, to customize the Default theme, create a filenamedPackages/User/Default.sublime-theme. Adding the following rulesto that file will increase the size of the text in the sidebar.

[{"class":"sidebar_heading","font.size":15,},{"class":"sidebar_label","font.size":14}]
Introducing our Git client
Sublime Merge
[8]ページ先頭
©2009-2026 Movatter.jp