配色方案
版本
Sublime Text 中源代码和散文的突出显示由配色方案控制。*配色方案*将颜色和字体样式分配给*范围*,范围由语法分配给文本。用户界面的其余外观由主题控制。主题控制按钮、选择列表、侧边栏和选项卡等元素。
Sublime Text 配色方案使用包含 JSON 的 .sublime-color-scheme 文件实现。Sublime Text 还支持使用 TextMate .tmTheme 格式 的一部分功能。*在 Sublime Text 3.1 之前,仅支持 .tmTheme 格式。*
示例🔗
以下是 .sublime-color-scheme 文件格式的示例。完整的配色方案将有更多规则来涵盖标准范围名称。
{
"name": "Example Color Scheme",
"globals":
{
"background": "rgb(34, 34, 34)",
"foreground": "#EEEEEE",
"caret": "white"
},
"rules":
[
{
"name": "Comment",
"scope": "comment",
"foreground": "#888888"
},
{
"name": "String",
"scope": "string",
"foreground": "hsla(50, 100%, 50%, 1)",
},
{
"name": "Number",
"scope": "constant.numeric",
"foreground": "#7F00FF",
"font_style": "italic",
}
]
}
颜色🔗
配色方案中的颜色可以使用以下七种格式之一指定
十六进制 RGB:
#
后跟六个十六进制字符,前两个指定红色通道,第二个指定绿色通道,最后两个指定蓝色通道。红色写为#FF0000
。当三对中的每一对的两个字符使用相同的值时,可以使用缩写形式。红色写为#F00
。十六进制 RGBA:与十六进制 RGBA 相同,但在末尾增加了一对十六进制字符来指定 alpha 通道。不透明度为 67% 的红色写为
#FF0000AA
。缩写形式为#F00A
。RGB 函数表示法:名为
rgb
的函数,它接受三个介于 0 到 255 之间的整数。第一个整数指定红色通道,第二个整数指定绿色通道,第三个整数指定蓝色通道。红色写为rgb(255, 0, 0)
。RGBA 函数表示法:与 RGB 函数格式相同,但函数名称为
rgba
,并添加了第四个参数,接受0.0
到1.0
之间的值,用于指定 alpha 通道。不透明度为 50% 的红色写为rgba(255, 0, 0, 0.5)
。HSL 函数表示法:一个名为
hsl
的函数,它接受三个值。第一个是范围在0
到360
之间的整数,用于指定色调。第二个是指定饱和度的百分比。第三个是指定亮度的百分比。红色写为hsl(0, 100%, 50%)
。HSLA 函数表示法:与 HSL 函数格式相同,只是函数名称为
hsla
,并添加了第四个参数,接受0.0
到1.0
之间的值,用于指定 Alpha 通道。50% 不透明度的红色写为hsla(0, 100%, 50%, 0.5)
。HWB 函数表示法:一个名为
3181hwb
的函数,它接受三个或四个值。第一个是范围在0
到360
之间的整数,用于指定色调。第二个是指定混合白色百分比的百分比。第三个是指定混合黑色百分比的百分比。可选的第四个参数是0.0
到1.0
之间的值,用于控制不透明度。示例包括:hwb(0, 20%, 20%)
和hwb(0, 20%, 20%, 0.5)
。命名颜色:CSS 颜色名称。*请注意,虽然有些颜色名称与 .tmTheme 文件中使用的 X11 命名颜色相同,但实际颜色可能有所不同。*
此外,颜色可以指定为变量,然后通过语法 var(example_var_name)
引用。当与minihtml 颜色和支持的 blend()
、blenda()
、alpha()
、saturation()
、lightness()
和 min-contrast()
调整器结合使用时,变量引用特别有用。
blend() 调整器:将一种颜色混合到基础颜色中。要在 RGB 空间中将等量的灰色和通过变量引用的基础颜色混合,请使用:
color(var (base_green) blend(#888 50%))
。如果颜色应在 HSL 空间中混合,请使用以下形式:color(var(base_green) blend(#888 50% hsl))
。生成的 alpha 值始终是基础颜色的 alpha 通道。blenda() 调整器:功能与
blend()
调整器相同,但混合两种颜色的 alpha 通道,而不是仅使用基础颜色的 alpha 通道。将部分透明的灰色混合到绿色的示例:color(var(base_green) blenda(#8888 50% hsl))
alpha() 调整器:将基础颜色的 alpha 通道更改为指定的值,范围从
0.0
到1.0
。将 alpha 通道设置为 90%:color(var(base_green) alpha(0.9))
。此调整器还有一个简写名称a()
。saturation() 调整器:将基色的饱和度通道(在 HSL 颜色空间中)更改为指定值,范围从
31790%
到100%
。将饱和度设置为 90%:color(var (base_green) saturation(0.9))
。将饱和度提高 10%:color(var(base_green) s(+ 10%))
。此调整器还有一个简写名称s()
。lightness() 调整器:将基色的亮度通道(在 HSL 颜色空间中)更改为指定值,范围从
31790%`
到100%
。将亮度设置为 90%:color(var (base_green) lightness(0.9))
。将亮度降低 10%:color (var(base_green) l(- 10%))
。此调整器还有一个简写名称l()
。min-contrast() 调整器(专有:修改颜色以确保相对于“背景”颜色的最小对比度。第一个参数是要计算对比度的颜色,即“背景”,第二个参数是指定最小对比度的十进制数。对比度的典型值范围从
31812.0
到4.5
。确保与背景的对比度为 2.5:color(var (base_green) min-contrast(var(bg_color) 2.5))
变量🔗
可以在 variables
键中创建可重复使用的颜色定义。名称可以是从 css var
函数查询的任何有效字符串。值可以是任何有效的颜色格式。
可以通过语法 var(example_var_name)
在全局设置和规则中引用变量。以下示例展示了变量的基本用法。
{
"name": "Example Color Scheme",
"variables":
{
"green": "hsla(153, 80%, 40%, 1)",
"black": "#111",
"white": "rgb(242, 242, 242)"
},
"globals":
{
"background": "var(black)",
"foreground": "var(white)",
"caret": "color(var(white) alpha(0.8))"
},
"rules":
[
{
"name": "Comment",
"scope": "comment",
"foreground": "color(var(black) blend(#fff 50%))"
},
{
"name": "String",
"scope": "string",
"foreground": "var(green)",
},
{
"name": "Number",
"scope": "constant.numeric",
"foreground": "#7F00FF",
"font_style": "italic",
}
]
}
全局设置🔗
以下全局设置位于键为 "globals"
的对象中。
- "background"🔗
默认背景颜色。
- "foreground"🔗
默认文本颜色。
- "invisibles"🔗
渲染时空白处的颜色。*如果未指定,则默认为
foreground
,不透明度为0.35
。*
- "caret"🔗
插入符的颜色。
- "block_caret"🔗 3190
使用块状插入符时的插入符颜色。
- "block_caret_border"🔗 4086
块状插入符边框的颜色。
- "block_caret_underline"🔗 4086
块状插入符与选区重叠时绘制的下划线颜色。
- "block_caret_corner_style"🔗 4086
用于块状插入符的角样式。选项包括:
round
(默认)、cut
或square
。
- "block_caret_corner_radius"🔗 4086
block_caret_corner_style
为round
或cut
时使用的半径。
- "line_highlight"🔗
包含插入符的行背景颜色。*仅在启用
highlight_line
设置时使用。*
重点🔗
- "misspelling"🔗
用于拼写错误单词下方波浪形下划线的颜色。
- "fold_marker"🔗
用于指示内容已折叠的标记的颜色。
- "minimap_border"🔗
启用
draw_minimap_border
设置时,在迷你地图视口区域周围绘制的边框颜色。*请注意,除非启用了always_show_minimap_viewport
设置,否则视口通常只在悬停时可见。*
- "accent"🔗
可供主题使用的颜色。*当启用
highlight_modified_tabs
设置时,默认主题使用此颜色来突出显示已修改的选项卡。*
CSS🔗
CSS 应用于通过 API 公开的弹出窗口和幻影功能创建的 minihtml 参考 内容。支持的 CSS 属性在 CSS 中讨论。
鼓励使用 minihtml 的插件在生成的 HTML 的 <body>
标签上设置唯一的 id
属性,以允许配色方案覆盖默认插件样式。
- "popup_css"🔗
传递给弹出窗口的 CSS。
- "phantom_css"🔗
传递给幻影的 CSS。*如果未指定,则使用
popup_css
。*
- "sheet_css"🔗 4065
传递给 HTML 工作表的 CSS。
边栏🔗
- "gutter"🔗
边栏的背景颜色。
- "gutter_foreground"🔗
边栏中行号的颜色。
- "gutter_foreground_highlight"🔗 4050
高亮显示行时,边栏中行号的颜色。
差异🔗
差异功能在边栏中显示为彩色线条,表示添加和修改的行,以及一个三角形,表示删除的行。
- "line_diff_width"🔗 3186
差异线的宽度,介于
1
和8
之间。
- "line_diff_added"🔗 3189
添加行的差异标记颜色。
- "line_diff_modified"🔗 3186
修改行的差异标记颜色。
- "line_diff_deleted"🔗 3189
删除行的差异标记颜色。
选择🔗
- "selection"🔗
所选文本的背景颜色
- "selection_foreground"🔗
将覆盖所选内容的基于作用域的文本颜色的颜色。
- "selection_border"🔗
所选内容的边框颜色。
- "selection_border_width"🔗
所选内容的边框宽度,从
0
到4
。
- "inactive_selection"🔗
视图中所选内容的背景颜色。
- "inactive_selection_border"🔗 4074
当前未聚焦的视图中所选内容的边框颜色。
- "inactive_selection_foreground"🔗
将覆盖当前未聚焦的视图中所选内容的基于作用域的文本颜色的颜色。
- "selection_corner_style"🔗
用于所选内容的角的样式。选项包括:
round
(默认)、cut
或square
。
- "selection_corner_radius"🔗
当
selection_corner_style
为round
或cut
时使用的半径。
查找🔗
- "highlight"🔗
在“查找”面板中选中“高亮显示匹配项”选项时,“其他”匹配项的边框颜色。也用于在“在文件中查找”结果中高亮显示匹配项。
- "find_highlight"🔗
“查找”面板匹配的文本的背景颜色。
- "find_highlight_foreground"🔗
将覆盖基于作用域的文本颜色的颜色。
- "scroll_highlight"🔗 4050
在滚动条顶部绘制的颜色搜索结果位置。*
- "scroll_selected_highlight"🔗 4050
在滚动条顶部绘制的选定搜索结果位置的颜色。*
标尺🔗
标尺位置由 rulers
设置。
- "rulers"🔗
用于绘制标尺的颜色。
参考线🔗
参考线由 draw_indent_guides
设置全局控制。
- "guide"🔗
用于绘制缩进参考线的颜色。*仅当设置
indent_guide_options
中存在选项"draw_normal"
时才使用。*
- "active_guide"🔗
用于绘制包含插入符号的缩进级别的缩进参考线的颜色。*仅当设置
indent_guide_options
中存在选项"draw_active"
时才使用。*
- "stack_guide"🔗
用于绘制包含插入符号的缩进级别的父缩进级别的缩进参考线的颜色。*仅当设置
indent_guide_options
中存在选项"draw_active"
时才使用。*
括号🔗
括号匹配由 match_brackets
设置全局控制。
- "brackets_options"🔗
当插入符号位于括号旁边时,如何突出显示括号。接受以下各项的空格分隔列表
underline(下划线)
stippled_underline(点划线)
squiggly_underline(波浪线)
foreground(前景色)
bold(粗体)
italic(斜体)
- "brackets_foreground"🔗
绘制
brackets_options
指定的样式时使用的颜色。
- "bracket_contents_options"🔗
当插入符号位于一对括号之间时,如何突出显示括号。接受以下各项的空格分隔列表
underline(下划线)
stippled_underline(点划线)
squiggly_underline(波浪线)
foreground(前景色)
- "bracket_contents_foreground"🔗
绘制
bracket_contents_options
指定的样式时使用的颜色。
阴影🔗
- "shadow"🔗
用于显示文本区域何时可以水平滚动的阴影颜色。
- "shadow_width"🔗
阴影的宽度(以设备无关像素为单位)。
作用域规则🔗
配色方案通过作用域与文件中的文本进行交互。作用域通过 *语法* 设置为代码或散文标记。作用域是点分字符串,从最不特定到最特定指定。例如,PHP 中的 if
关键字可以通过作用域名称 keyword.control.php
指定。
匹配🔗
配色方案通过匹配点分标签(从第一个开始)将颜色和字体样式应用于作用域。前缀匹配是使配色方案应用于多种语法的标准方法。大多数配色方案不会匹配 keyword.control.php
,而是为 keyword
分配颜色。匹配作用域中的第一个或前两个标签是最常见的。包含最后一个标签(语法名称)并不常见,除非需要特定于语法的覆盖。
命名🔗
语法的作者可以为给定标记分配任何他们想要的作用域。结合有数百种社区维护的语法这一事实,这意味着可能很难知道要定位哪些作用域。作用域命名 的建立是为了帮助语法和配色方案作者使用一组通用的作用域,以实现更好的互操作性。配色方案 部分提供了一组基准作用域,配色方案作者应努力处理这些作用域。
样式规则🔗
每个作用域样式规则都包含一个对象,该对象包含 "scope"
键,以及以下一个或多个可选键
- "name"🔗
作用域规则的(任意)名称。
- "foreground"🔗
文本颜色。
- "background"🔗
背景颜色。
- "foreground_adjust"🔗 3179
对
"foreground"
颜色的调整,仅在使用"background"
时有效。
- "selection_foreground"🔗
选中时的文本颜色。
- "font_style"🔗
以下各项中的零个或多个,以空格分隔
bold(粗体)
italic(斜体)
4050glow
4074underline(下划线)
4075stippled_underline(点划线)
4075squiggly_underline(波浪线)
"foreground_adjust"
键接受由 minihtml 颜色 支持的调整器列表,这些调整器以空格分隔。仅当还指定了 "background"
键时才支持它,因此允许修改与背景一起使用的所有前景,而无需为每个排列创建不同的规则。
哈希语法高亮显示🔗
"foreground"
键支持一种称为 *哈希语法高亮显示* 的特殊模式,其中匹配指定作用域的每个标记都将从一个或多个渐变中接收唯一的颜色。一些编辑器将这种高亮样式称为 *语义高亮显示*。
要使用哈希语法高亮显示,"foreground"
键的值必须是包含两种或多种颜色的数组。Sublime Text 将创建 256 种不同的颜色,这些颜色是提供的颜色之间的线性插值 (lerp)。插值是在 HSL 空间中完成的。
当 Sublime Text 高亮显示文件中的标记时,它将创建标记的哈希值,并使用该值从 256 个线性插值中选择一个。给定标记的每个实例都将使用相同的颜色。例如,first_name
的每个实例都将具有相同的颜色,但 name
的每个实例都将具有不同的颜色。
为了使哈希语法高亮显示最明显,起点和终点之间的色调差异应尽可能大。以下是如何对变量名使用蓝色、紫色和粉红色的示例
{
"scope": "source - punctuation - keyword",
"foreground": ["hsl(200, 60%, 70%)", "hsl(330, 60%, 70%)"]
}
示例🔗
以下作用域样式规则会将所有字符串的颜色设置为绿色
{
"name": "Strings",
"scope": "string",
"foreground": "#00FF00"
}
要将所有数字的样式设置为粗体、斜体、红色,请使用
{
"name": "Numbers",
"scope": "constant.numeric",
"foreground": "#FF0000",
"font_style": "bold italic"
}
自定义🔗
基于 .sublime-color-scheme 格式的配色方案仅由文件名指定,而不是基于包的文件路径。这允许用户通过覆盖变量或全局变量以及添加规则来自定义配色方案。
要创建配色方案的用户特定自定义,请创建一个与配色方案同名的新文件,但将其保存在 Packages/User/ 目录中。
例如,要自定义默认的 Monokai 配色方案,请创建一个名为 Packages/User/Monokai.sublime-color-scheme 的文件。以下设置会将背景颜色更改为完全不饱和的灰色,将黄色更改为更鲜艳的颜色,并添加一个新规则,将 Python 文档字符串的颜色更改为与字符串相同。
{
"variables":
{
"yellow": "hsl(54, 100%, 50%)",
},
"globals":
{
"background": "hsl(70, 0%, 15%)",
},
"rules":
[
{
"name": "Python docstrings",
"scope": "comment.block.documentation.python",
"foreground": "var(yellow)"
},
]
}
"variables"
和 "globals"
键的内容将被合并,用户的副本将覆盖具有相同名称的键。对于 "rules"
数组,用户的规则将被追加。
附录:CSS 颜色🔗
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenrod
darkgray
darkgreen
darkgrey
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkslategrey
darkturquoise
darkviolet
deeppink
deepskyblue
暗灰
暗灰
道奇蓝
耐火砖
花白
森林绿
紫红色
淡灰色
金色
金麒麟黄
灰色
绿色
黄绿色
灰色
蜜瓜色
热粉红色
印度红
靛蓝色
象牙色
卡其色
薰衣草紫
淡紫红
草绿色
柠檬绸
淡蓝色
淡珊瑚色
淡青色
淡金麒麟黄
浅灰色
浅绿色
浅灰色
浅粉红色
浅鲑鱼色
浅海绿色
淡蓝色
浅石板灰
浅石板灰
浅钢蓝色
浅黄色
酸橙色
柠檬绿
亚麻色
洋红色
栗色
中等水绿色
中等蓝色
中等兰花紫
中等紫色
中等海绿色
中等板岩蓝
中等春绿色
中等绿松石色
中等紫红色
午夜蓝
薄荷奶油
薄雾玫瑰
鹿皮色
海军蓝
老花边
橄榄色
橄榄 drab
橙色
橙红色
兰花色
苍金黄色
苍绿色
苍绿色
苍紫罗兰色
番木瓜色
桃色
秘鲁色
粉红色
洋李色
淡蓝色
紫色
紫红色
红色
玫瑰棕色
宝蓝色
马鞍棕色
鲑鱼色
沙棕色
海绿色
贝壳色
赭色
银色
天蓝色
青蓝色
灰石色
灰石色
雪白色
春绿色
钢蓝色
茶色
水鸭色
蓟色
番茄色
绿宝石色
紫罗兰色
小麦色
白色
烟白色
黄色
黄绿色