• 0

  • 501

  • 收藏

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

3星期前

你有没有想过创建一款属于自己的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",
复制代码

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

活动栏

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

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

活动栏我们为它定义了backgroundinactiveForeground 、和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是一个数组,分别定义了一定范围内的代码scopefontStyleforeground部分样式

{
    "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

VS Code documentation on Theme Colors

获取更多作者文章,关注公众号太空编程

免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

程序员

501

相关文章推荐

未登录头像

暂无评论