模板详解

Sublime Text界面的外观由模板控制。术语模板严格指UI的外观 - 按钮，选择列表，侧边栏，标签等。源代码，标记和散文的突出显示由颜色方案控制。

Sublime Text的模板引擎基于光栅图形。PNG用于防止纹理退化并提供完整的alpha控制。UI中的每个元素最多可以应用四层纹理或填充，并具有控制不透明度和填充的属性。可以根据用户交互和设置有条件地更改在每个元素上设置的属性。

Sublime Text模板通过.sublime-theme格式实现。它是一种JSON格式，用于指定匹配元素和修改其外观的规则。

示例

以下是.sublime-theme文件格式的示例。完整的模板将包含更多规则，以涵盖UI中使用的所有元素。

{
    // Set up the textures for a button
    {
        "class": "button_control",
        "layer0.tint": [0, 0, 0],
        "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]
    }
}

术语

模板是JSON对象数组，称为规则。每个规则对象都包含class用于匹配元素的键。除class，匹配可以进一步通过指定的限制attributes，settings，parents和platforms密钥。属性会影响元素的外观或行为。

大多数元素都有一个类名，尽管少数元素有多个元素允许通用和特定样式。例如，popup_control该类可用于为自动完成和HTML弹出窗口设置样式，但popup_control auto_complete_popup可用于仅定位自动完成弹出窗口。多个class值由空格分隔。当规则指定多个类名时，所有元素必须存在于要应用的规则的元素上。

attributes由Sublime Text设置，并指示用户交互的状态或有关元素性质的其他信息。该值是一个字符串数组。实例包括"hover"，"pressed"和"dirty"。

settings是用户控制的值，可以在运行时更改。该值是一个字符串数组，它是从.sublime-settings文件中提取的布尔设置的名称。要检查false值，请在设置名称前加上!模板，也可以创建自己的设置以允许用户更改样式。例子包括"bold_folder_labels"和"!always_show_minimap_viewport"。

该parents键是指定对象数组class和attributes必须在一个父元素相匹配。

该platforms键是一个字符串指定什么操作系统，应用规则的数组。有效的选项包括"osx"，"windows"，和"linux"。

属性引用JSON对象中的所有其他键。某些属性可用于所有元素，而其他属性特定于单个元素。

一般信息

以下部分讨论有关图像的信息以及如何指定样式。

特性

与CSS不同，Sublime Text模板在将规则应用于元素时不进行特性匹配。所有规则都按顺序针对每个元素进行测试。匹配的后续规则将覆盖先前规则的属性。

纹理图像

使用PNG图像指定模板中的所有纹理。每个纹理应保存在“正常”DPI，其中文件中的每个像素将映射到一个设备像素。模板定义中的所有文件路径都应引用正常的DPI版本。

每个纹理的第二个版本也应该包含在DPI的两倍，并@2x在扩展名之前添加到文件名。Sublime Text将@2x在高DPI屏幕上显示时自动使用该版本。

虽然目前尚未实施，但显示器的分辨率越来越高，可能会@3x在未来的某些时候支持变体。

目前不支持SVG图像。

外形尺寸

引用维度的模板中的整数单元始终在与设备无关的像素（DIP）中指定。Sublime Text根据屏幕密度自动处理缩放UI元素。

填充和边距

填充和边距可以通过以下三种方式之一指定：

单个整数值 - 相同的值应用于左侧，顶部，右侧和底部
一个包含两个整数的数组 - 第一个值应用于左侧和顶部，而第二个值应用于右侧和底部
一个包含四个整数的数组 - 这些值按顺序应用于左侧，顶部，右侧和底部

颜色值

颜色可以以多种不同的格式指定：

RGB

在RGB颜色空间中的颜色通过的3个或4个数字的阵列指定，前三个是整数范围从0到255表示红色，绿色和蓝色的组件。可选的第四数目是范围从浮子0.0至1.0控制该颜色的不透明度。

颜色为白色，完全不透明

[255, 255, 255]

颜色为蓝色，不透明度为50％

[0, 0, 255, 0.5]

HSL

也可以使用HSL颜色空间通过创建4个元素的数组来指定颜色，第一个是字符串"hsl"。第二个元素是从整数0到360指定色调。第三是从整数0到100指定饱和度，和第四个是由一个整数0，以100指定的亮度。

深洋红色，完全不透明

["hsl", 325, 100, 30]

可以添加来自0.0to 的float1.0作为第五个元素来控制不透明度。

明亮的蓝绿色，50％不透明度

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

派生的颜色

也可以从当前的全局颜色方案中导出颜色。使用具有特定格式的数组指定此格式的颜色。在所有情况下，第一个元素是基色，可以是"foreground"，"background"或"accent"。

改变基色的不透明度

要改变一个基色的不透明度，指定2个元素的阵列，第一个基体颜色名，第二个是从浮0.0到1.0。不透明度将设置为浮点值。

配色方案前景，不透明度为90％

["foreground", 0.9]

去饱和基色

要使基色去饱和，请指定包含3个元素的数组。第一个是基色的名称，第二个是字符串"grayscale"，第三个是来自的整数0，100它指定应保留现有颜色的饱和度（在HSL颜色空间中）的百分比。值100意味着没有变化，而值0会导致颜色完全去饱和。

颜色方案前景，饱和度调整为原始值的1/4。

["foreground", "grayscale", 25]

色调基色

5和6元素导出的颜色允许将颜色混合到基色中。5种颜色使用RGBA颜色，而6种颜色使用HSLA颜色。在这两种情况下，最后一个元素（通常表示不透明度）控制将多少二次色混合到基底中。

配色方案背景，用白色照亮

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

配色方案，深红色

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

从颜色方案派生的颜色将始终基于全局颜色方案，并且不会反映特定于视图的颜色方案。UI中的某些特定于视图的控件具有着色属性，允许使用特定于视图的颜色方案颜色。

特性

特性指定为字符串数组。每个字符串都是一个特性名称。要检查是否缺少特性，请!在名称前加上a 。

以下特性对所有元素都是通用的：

徘徊

每当用户的鼠标悬停在元素上时设置

亮度

尽管并非所有元素都可用，但许多元素都具有基于当前颜色方案的近似亮度设置的特性。大多数元素都具有基于全局颜色方案设置的特性。但是，选项卡和选项卡背景具有基于特定于所选视图的颜色方案的特性。

V当表示为HSV颜色时，基于背景颜色的值分配特性。

file_light

V从0.60-1.00

file_medium

V从0.30-0.59

file_medium_dark

V从0.10-0.29

file_dark

V从0.00-0.09

设置

某些Sublime Text设置旨在影响UI。模板应尊重这些设置并根据它们更改元素。

overlay_scroll_bars

这应该会影响滚动条的样式 - 通常它们应该是半透明的overlay，并且scroll_area_control应该将其属性设置为true

always_show_minimap_viewport

如果当前视口区域应在小地图上突出显示，即使用户没有悬停在小地图上。

bold_folder_labels

如果侧栏中的文件夹名称应将font.bold属性设置为true。

mouse_wheel_switches_tabs

这用于控制Linux上标签的鼠标滚轮行为。它应与检查相结合!enable_tab_scrolling来改变mouse_wheel_switch的关键tabset_control来false。

highlight_modified_tabs

如果应突出显示已修改文件的选项卡。除dirty属性外，还应检查此设置。

show_tab_close_buttons

如果标签应该有关闭按钮

属性

.sublime-theme文件是描述UI元素应当如何称呼对象的JSON阵列。UI中的每个元素都支持以下键：

层0。*

元素的最底部纹理图层

layer1的。*

元素的第二个纹理图层

二层。*

元素的第三个纹理图层

三层。*

元素的第四个纹理图层

hit_test_level

一个浮点值，设置一个像素所需的不透明度，以便点击一下“点击”

图层属性

UI中的每个元素都支持最多四个纹理图层，用于显示填充颜色和光栅图形。每个层都有格式的虚线子键。有效的子键包括：layer*#*.*sub-key*

层＃。不透明度

从一个浮点值0.0，以1.0控制该层的主不透明度。

例：0.9

层＃。着色

要应用于图层的填充颜色的颜色值。

例：[255, 0, 0, 127]

层＃。质地

相对于Packages/文件夹的PNG图像文件路径的字符串。

例："Theme - Default/arrow_right.png"

层＃。inner_margin

通过使用四条线切割成9的网格来拉伸纹理图像以适合元素。请参阅填充和边距以获取有效格式，以指定用于制作切片的边距。

例：[5, 2, 5, 2]

层＃。draw_center

一个布尔值，控制是否*layer#.*inner_margin应绘制创建的9网格的中心矩形。这是一个允许跳过未使用的纹理部分的优化。

例：false

层＃。重复

一个布尔值，控制是否应重复纹理而不是拉伸。

例：false

价值动画

浮动指定的属性可能会随着时间的推移而动画化。不是提供单个数值，而是使用包含动画细节的对象指定动画。值动画主要用于随时间改变不透明度。对象键是：

目标

从一个浮点值0.0，以1.0控制该目标值

例：1.0

速度

浮点值1.0或更大值，用于控制动画所需的相对时间长度

例：1.5

插值

一个可选字符串，允许指定smoothstep函数的使用而不是默认的线性函数。

默认值："linear"
示例："smoothstep"

由于规则是按顺序应用的，因此可以尝试设置基本不透明度，然后使用后续规则指定属性或父尝试应用动画。这通常会导致值重置为基本量，然后动画似乎无法正常工作。

纹理动画

所述*layer#.*texture子密钥可以是一个对象来指定基于两个或两个以上的PNG图像的动画。对象键是：

关键帧

按顺序排列PNG图像路径的字符串数组

例：["Theme - Default/spinner.png", "Theme - Default/spinner1.png"]

循环

一个可选的布尔值，控制动画是否应该重复

默认值：false
示例：true

frame_time

一个可选的浮点数，指定每帧应显示多长时间。1.0代表1秒。

默认值：0.0333（30 fps）
示例：0.0166（60 fps）

纹理着色属性

某些元素具有由当前颜色方案的背景设置的可用色调值。可以修改色调并将其应用于图像。layer*#*.texture

tint_index

控制应用色调的图层。必须从一个整数0到3。

tint_modifier

在该范围的四个整数的数组0来255。前三个从色调颜色混合到RGB值中，第四个值指定要应用多少RGB修改器值。

字体属性

某些文本元素允许设置以下字体属性：

font.face

字体的名称

字体大小

整数点大小

font.bold

如果字体应为粗体，则为布尔值

font.italic

如果字体应为斜体，则为布尔值

阴影属性

某些文本元素允许设置以下属性：

shadow_color

用于文本阴影的颜色值

shadow_offset

包含阴影的X和Y偏移的2元素数组

过滤标签属性

快速面板中使用的标签具有基于选择和匹配的颜色控制

FG

未选择的，不匹配的文本的颜色值

match_fg

未选择的匹配文本的颜色值

BG

一个颜色值对未被选择的行的背景

selected_fg

选定的不匹配文本的颜色值

selected_match_fg

选定匹配文本的颜色值

BG

一个颜色值针对所选择的行的背景

font.face

字体的名称

字体大小

整数点大小

数据表属性

基于行的数据表提供以下属性：

dark_content

如果背景很暗 - 用于设置dark滚动条的属性

row_padding

padding以padding和margin中描述的格式之一添加到每一行

分子

以下是构成Sublime Text UI的元素的详尽列表，以及支持的属性和属性。

视窗

标题栏

仅在OS X 10.10+上受支持。

属性

光度属性

属性

FG

用于窗口标题文本的颜色值

BG

用于标题栏背景的颜色值

窗口

属性

content_margin

该保证金周围的sidebar_tree

sidebar_tree

包含多个tree_rows的树控件

属性

数据表属性

缩进

一个整数量，用于缩进树结构的每个级别

indent_offset

为了定位disclosure_button_control和定义，应用于每一行的附加缩进close_button

indent_top_level

如果树中的顶级行应缩进，则为布尔值

spacer_rows

一个布尔值控制是否应该在侧边栏的“打开文件和文件夹”部分之间添加一个空行，当两者都可见时。

tree_row

行可以包含标题，打开文件，文件夹或文件

属性

可选

当一行可选时

选

选择可选行时

扩张

当一行可扩展时

扩大

扩展可扩展行时

sidebar_heading

侧栏中的“打开文件”，“组＃”或“文件夹”标题之一

属性

字体属性阴影属性

FG

用于文本的颜色值

sidebar_label

打开文件，文件夹名称和文件名的名称

属性

字体属性阴影属性

content_margin

对于图标，边距指定尺寸

快速面板

快速面板用于各种Goto功能，命令调色板，可供插件使用。

overlay_control

快速面板的容器，包括输入和数据表

属性

content_margin

该保证金周围的quick_panel

quick_panel

数据表显示在输入下方。通常，高度是动态的，因此图层将不可见，但“切换项目”窗口将使用图层作为已过滤选项下方的空白区域。

属性

数据表属性

mini_quick_panel_row

非文件行quick_panel。包含quick_panel_label行中每行文本的一行。

属性

选

选择行时

quick_panel_row

一个Goto Anything文件行quick_panel。也用于Switch Project窗口。

包含quick_panel_label文件名和quick_panel_path_label文件路径。

属性

选

选择行时

quick_panel_label

文件名quick_panel_row和中的所有文本mini_quick_panel_row

属性

过滤标签属性

quick_panel_path_label

文件路径quick_panel_row

属性

过滤标签属性

查看

viewport_color

用于填充视口投影的颜色值

viewport_opacity

浮点数0.0到1.0指定视口投影的不透明度

fold_button_control

天沟中的代码折叠按钮

属性

扩大

当一段代码展开时

属性

content_margin

对于按钮，边距指定尺寸

popup_control auto_complete_popup

自动完成弹出窗口的主要容器

popup_control html_popup

显示定义和第三方包使用的HTML弹出窗口的主要容器。滚动条的色调将设置为HTML文档的背景颜色。

auto_complete

完成数据的数据表。基于应用于显示弹出窗口的视图的颜色方案的背景颜色来设置色调。

属性

数据表属性纹理着色属性

table_row

一排auto_complete

属性

选

当用户突出显示完成时

auto_complete_label

文字在table_row

属性

过滤标签属性

fg_blend

状态栏

“索引器状态”和“更新”窗口都将此类用于窗口背景

progress_bar_control

进度条容器。进度条显示在用于OS X和Windows更新的“更新”窗口中。

progress_gauge_control

表示迄今为止完成的进度的栏

属性

content_margin

的余量指定栏的高度

滚动条

scroll_area_control

滚动区域包含滚动的元素，以及条形，轨道和圆盘。

属性

content_margin

在滚动的内容周围添加的边距

覆盖

设置要在内容顶部呈现的滚动条

scroll_bar_control

滚动条包含滚动轨道。基于正在滚动的元素的背景颜色设置色调。

属性

黑暗

当滚动区域内容较暗时，需要一个轻滚动条

横

当滚动条应该是水平而不是垂直

属性

纹理着色属性

content_margin

在滚动轨道周围添加的边距

用于关闭打开面板的按钮

属性

content_margin

对于按钮，边距指定尺寸

按钮

button_control

文字按钮

属性

压制

按下按钮时设置

属性

MIN_SIZE

在DIP中指定按钮最小宽度和高度的两个整数数组

icon_button_group

控制相关图标按钮间距的网格

属性

没有层支持

间距

组中每个按钮之间的整数个像素

icon_button_control

“查找”，“在文件中查找”和“替换”面板中的基于图标的小按钮

属性

选

切换图标按钮时

剩下

当按钮是组中最左侧的按钮时

content_margin

对于图标，边距指定尺寸

icon_use_buffer

使用“在文件中查找”面板时，显示的按钮会导致缓冲区而不是输出面板

属性

content_margin

对于图标，边距指定尺寸

工具提示

tool_tip_control

将鼠标悬停在标签和按钮上时显示的工具提示

属性

content_margin

工具提示文本周围的边距

tool_tip_label_control

工具提示中显示的文本

属性

字体属性阴影属性

颜色

用于文本的颜色值

弃用

颜色值

在构建3127之前，指定颜色不透明度的唯一方法是使用包含来自0to的所有整数的4元素数组255。第四个元素控制不透明度，使其0完全透明并且255完全不透明。的优选格式是现在使用的浮子从0.0到1.0。

过时的

随着Sublime Text的UI随着时间的推移而适应，某些元素和属性不再适用或支持。

分子

sheet_container_control在Sublime Text 3的最新版本中，该元素永远不会被用户看到。

命名icon_reverse用于存在于查找面板中的元素，用于控制搜索是在视图中向前还是向后移动。现在由Find和Find Prev按钮控制。

名为的元素quick_panel_score_label不再出现在Goto Anything快速面板中。

属性

blur过去支持该属性来模糊元素后面的像素数据，但由于实现原因，目前不支持该属性。

定制

用户可以通过创建具有将附加到原始模板定义的新规则的文件来自定义模板。

要创建模板的用户特定自定义，请创建与模板具有相同文件名的新文件，但将其保存在Packages/User/目录中。

例如，要自定义默认模板，请创建名为Packages/User/Default.sublime-theme的文件。将以下规则添加到该文件将增加侧栏中文本的大小。

[
    {
        "class": "sidebar_heading",
        "font.size": 15,
    },
    {
        "class": "sidebar_label",
        "font.size": 14
    }
]