教你如何创建一款属于自己的VSCode主题

你有没有想过创建一款属于自己的VSCode主题？没有你想像的那么难，但是真正实现起来也不是那么轻松，需要你对将要去改变的主题的一些属性要有所了解和准备。

如果你要想让你的主题适用于多种编程语言，并且看起来还很漂亮的话，需要对很多的颜色进行重新定义。

下面就简单的介绍实现一款主题的过程，一些原理进行讲解。

生成主题文件

我们将使用VSCode拓展生成器生成我们的主题文件，该工具是由微软官方为插件和主题而打造。

你可以通过以下命令：

npm install -g yo generator-code

然后生成主题文件

yo code

下面进入互动式安装过程，一步一步引导你完成一个主题模板的创建。

最后生成了一个以主题命名的目录，接着用VSCode打开该目录，进行主题的编辑。

cd my-theme
code .

新生成的主题项目已经为你初始化好了所有的东西。在主题目录里面你可以找到一个以主题命名的JSON文件，这个JSON文件包含一些默认颜色的定义，可以直接去修改它。

开发主题

在主题的开发调试阶段，我们最好是进入debug模式（按F5），会打开一个新的VSCode窗口，这个窗口就已经是使用你创建的主题了。

当你编辑主题文件themes/my-theme.json，你将会看到调试的窗口会立刻响应，期间可能会遇到不立马生效的情况，很好解决，在菜单栏点击Run > Restart Debugging。

调试的过程是很繁琐的，还需要有一定的审美才行，有一定的颜色搭配能力。

为主题修改UI样式

以下是我为这款主题定义的一些颜色示例

编辑区域

编辑区域就是你日常编辑代码的地方

    "editor.background": "#1B1929",
    "editor.lineHighlightBackground": "#8076C222",
    "editorCursor.foreground": "#988de4",

对于编辑区我定义了background，lineHighlightBackground和editorCursor.foreground的值，分别代表了编辑区背景颜色，鼠标所在行高亮颜色和光标颜色。

活动栏

VSCode窗口左侧即为活动栏，用来切换不同功能视图的。

    "activityBar.background": "#13111d",
    "activityBar.inactiveForeground": "#323b50",
    "activityBar.foreground": "#5c6e92",
    "activityBarBadge.background": "#8076C2",

活动栏我们为它定义了background、inactiveForeground、和activityBarBadge.background的值。foreground的值表示的是图标的颜色，而activityBarBadge则是图标所在角标的颜色。

侧边栏

侧边栏即为打开的项目文件列表区域，或者调试工具等等，这个取决于你当前选择的功能。

    "sideBar.background": "#1B1929",
    "sideBarTitle.foreground": "#bbbbbb",
    "sideBarSectionHeader.background": "#242c3f",

这些定义侧边栏一些基础的颜色。另外的内容部分需要单独定义，包含：

    "list.activeSelectionBackground": "#2a273f",
    "list.activeSelectionForeground": "#8076C2",
    "list.inactiveSelectionBackground": "#2a273f",
    "list.inactiveSelectionForeground": "#8076C2",
    "list.highlightForeground": "#8076C2",
    "list.hoverBackground": "#1f2636",

以上这些定义了当前打开的文件列表所在不同状态下的颜色值，这里的 active 不取决于VSCode窗口是否处于活动状态。相同的list颜色也适用于其他地方的列表。

按钮

VSCode上面按钮不多，我们也给它定义一下颜色，保证主题视觉上的一致性。

    "button.background": "#8076C2",
    "button.hoverBackground": "#8076C299",

以上定义了按钮的两种状态下的颜色，正常状态和鼠标悬浮状态

状态栏

状态栏处于VSCode窗口的底部，由于你所安装的拓展和配置不同，显示的内容也有所不同，包括git所在分支，文件的编码等等。

    "statusBar.border": "#1B1929",
    "statusBar.background": "#13111d",
    "statusBar.debuggingBackground": "#bb0000",

状态栏我选择了和活动栏一致的颜色，我希望状态栏有一个比较特别的颜色，当我们调试的时候不会错过它上面的信息。

标题栏

同样，标题栏的颜色和状态栏、活动栏保持一致。

    "titleBar.activeBackground": "#13111d",
    "titleBar.inactiveBackground": "#13111d",
    "titleBar.inactiveForeground": "#5c6e92",

语法高亮

受到我最喜欢的一款主题Night Owl的影响，我开始不怎么关注语法高亮部分的颜色。高亮在主题JSON文件中tokenColor部分有所定义，tokenColor是一个数组，分别定义了一定范围内的代码scope，fontStyle和foreground部分样式

{
    "name": "Comment",
    "scope": ["comment", "punctuation.definition.comment"],
    "settings": {
        "fontStyle": "italic",
        "foreground": "#637777"
    }
}

范围指定可以由VSCode内部工具Inspect Editor Tokens and Scopes来发现，你可以通过组合键Cmd+Shift+P打开它或者搜索"inspect editor"

调色板

为了达到对JavaScript和TypeScript代码一定程度的满意效果，我参考了其它的一些主题。

毕竟这部分的工作是很要耐心的，你可以通过debug模式来查看当前代码区域不同地方的颜色值然后来编辑替换它。

最后我为调色板选了11种颜色以及React项目中JavaScript和TypeScript代码的高亮。

下面是更改了部分颜色的效果

如果你想创建一个自己满意的主题，可以参考以上的步骤，但是最终的效果依照你自己的爱好而定，另外下面的资源也可以供参考：

Sarah Drasner article Creating a VS Code Theme^[1]

VS Code documentation on Theme Colors^[2]

References

[1] Sarah Drasner article Creating a VS Code Theme: https://css-tricks.com/creating-a-vs-code-theme/
[2] VS Code documentation on Theme Colors: https://code.visualstudio.com/api/references/theme-color