配色方案
版本

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.01.0 之间的值,用于指定 alpha 通道。不透明度为 50% 的红色写为 rgba(255, 0, 0, 0.5)

  • HSL 函数表示法:一个名为 hsl 的函数,它接受三个值。第一个是范围在 0360 之间的整数,用于指定色调。第二个是指定饱和度的百分比。第三个是指定亮度的百分比。红色写为 hsl(0, 100%, 50%)

  • HSLA 函数表示法:与 HSL 函数格式相同,只是函数名称为 hsla,并添加了第四个参数,接受 0.01.0 之间的值,用于指定 Alpha 通道。50% 不透明度的红色写为 hsla(0, 100%, 50%, 0.5)

  • HWB 函数表示法:一个名为 hwb 的函数,它接受三个或四个值。第一个是范围在 0360 之间的整数,用于指定色调。第二个是指定混合白色百分比的百分比。第三个是指定混合黑色百分比的百分比。可选的第四个参数是 0.01.0 之间的值,用于控制不透明度。示例包括:hwb(0, 20%, 20%)hwb(0, 20%, 20%, 0.5)

    3181
  • 命名颜色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.01.0。将 alpha 通道设置为 90%:color(var(base_green) alpha(0.9))此调整器还有一个简写名称 a()

  • saturation() 调整器:将基色的饱和度通道(在 HSL 颜色空间中)更改为指定值,范围从 0%100%。将饱和度设置为 90%:color(var (base_green) saturation(0.9))。将饱和度提高 10%:color(var(base_green) s(+ 10%))此调整器还有一个简写名称 s()

    3179
  • lightness() 调整器:将基色的亮度通道(在 HSL 颜色空间中)更改为指定值,范围从 0%`100%。将亮度设置为 90%:color(var (base_green) lightness(0.9))。将亮度降低 10%:color (var(base_green) l(- 10%))此调整器还有一个简写名称 l()

    3179
  • min-contrast() 调整器(专有:修改颜色以确保相对于“背景”颜色的最小对比度。第一个参数是要计算对比度的颜色,即“背景”,第二个参数是指定最小对比度的十进制数。对比度的典型值范围从 2.04.5。确保与背景的对比度为 2.5:color(var (base_green) min-contrast(var(bg_color) 2.5))

    3181

变量🔗

可以在 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(默认)、cutsquare

"block_caret_corner_radius"🔗
4086

block_caret_corner_styleroundcut 时使用的半径。

"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 属性,以允许配色方案覆盖默认插件样式。

传递给弹出窗口的 CSS。

"phantom_css"🔗

传递给幻影的 CSS。*如果未指定,则使用 popup_css。*

"sheet_css"🔗
4065

传递给 HTML 工作表的 CSS。

边栏🔗

"gutter"🔗

边栏的背景颜色。

"gutter_foreground"🔗

边栏中行号的颜色。

"gutter_foreground_highlight"🔗
4050

高亮显示行时,边栏中行号的颜色。

差异🔗

差异功能在边栏中显示为彩色线条,表示添加和修改的行,以及一个三角形,表示删除的行。

"line_diff_width"🔗
3186

差异线的宽度,介于 18 之间。

"line_diff_added"🔗
3189

添加行的差异标记颜色。

"line_diff_modified"🔗
3186

修改行的差异标记颜色。

"line_diff_deleted"🔗
3189

删除行的差异标记颜色。

选择🔗

"selection"🔗

所选文本的背景颜色

"selection_foreground"🔗

将覆盖所选内容的基于作用域的文本颜色的颜色。

"selection_border"🔗

所选内容的边框颜色。

"selection_border_width"🔗

所选内容的边框宽度,从 04

"inactive_selection"🔗

视图中所选内容的背景颜色。

"inactive_selection_border"🔗
4074

当前未聚焦的视图中所选内容的边框颜色。

"inactive_selection_foreground"🔗

将覆盖当前未聚焦的视图中所选内容的基于作用域的文本颜色的颜色。

"selection_corner_style"🔗

用于所选内容的角的样式。选项包括:round(默认)、cutsquare

"selection_corner_radius"🔗

selection_corner_styleroundcut 时使用的半径。

查找🔗

"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 指定的样式时使用的颜色。

标签🔗

标签匹配由 match_tags 设置全局控制。

"tags_options"🔗

当插入符号位于标签内部时,如何突出显示标签。接受以下各项的空格分隔列表

  • underline(下划线)

  • stippled_underline(点划线)

  • squiggly_underline(波浪线)

  • foreground(前景色)

"tags_foreground"🔗

绘制 tags_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(斜体)

  • glow

    4050
  • underline(下划线)

    4074
  • stippled_underline(点划线)

    4075
  • squiggly_underline(波浪线)

    4075

"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 颜色🔗

  aliceblue
  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
  橙色
  橙红色
  兰花色
  苍金黄色
  苍绿色
  苍绿色
  苍紫罗兰色
  番木瓜色
  桃色
  秘鲁色
  粉红色
  洋李色
  淡蓝色
  紫色
  紫红色
  红色
  玫瑰棕色
  宝蓝色
  马鞍棕色
  鲑鱼色
  沙棕色
  海绿色
  贝壳色
  赭色
  银色
  天蓝色
  青蓝色
  灰石色
  灰石色
  雪白色
  春绿色
  钢蓝色
  茶色
  水鸭色
  蓟色
  番茄色
  绿宝石色
  紫罗兰色
  小麦色
  白色
  烟白色
  黄色
  黄绿色