vscode主题

原创
04/29 10:44
阅读数 43

vscode主题

颜色主题可以修改成你喜欢的vscode工作环境的界面的颜色。

选择颜色主题

  1. 点击菜单栏: File > Preferences > Color Theme
  2. 或者使用快捷键 ctrl+k ctrl+t
  3. 使用方向键选择喜欢的主题

选中的颜色主题会保存在用户级设置里

"workbench.colorTheme": "Default Dark+"

小提示: 默认情况下,颜色主题是保存在用户级的设置里,并且在全部工程里都是生效的。但是也可以在工程级别的设置里设置只属于这个工程的颜色主题

安装主题

vscode有几个开箱即用的主题可以尝试使用。

插件市场有很多社区化的主题可供下载。可以找到你喜欢的主题,安装后,重启vscode,即可使用。

可以在插件面板的搜索框,使用 @category:"themes" 来过滤主题

自定义颜色主题

工作台颜色

可以通过修改设置项 workbench.colorCustomizationseditor.tokenColorCustomizations 来修改自定义的颜色主题。

要设置vscode界面元素的颜色(如文件资源管理器的列表、树、建议提示框、diff编辑器、活动条、提示、滚动条、分割条、按钮等等),可以修改设置项 workbench.colorCustomizations

设置 workbench.colorCustomizations 时,vscode会有智能提示,也可查看文档

只定义设置指定的主题,可以使用下面的语法:

"workbench.colorCustomizations": {
    "[Monokai]": {
        "sideBar.background": "#347890"
    }
}

编辑区语法高亮

设置项 editor.tokenColorCustomizations 可修改语法高亮的颜色。

一些预设置的语法项在很多结构里都是可用的,如comments、strings,可以直接指定testMeta的颜色主题规则,如:

请注意: 直接配置testMeta规则是一个高级的技巧,你需要了解textMeta的语法。详情可查看文档

下面是一个只指定主题的例子

"editor.tokenColorCustomizations": {
    "[Monokai]": {
        "comments": "#229977"
    }
},

编辑区语义高亮

一些语言(当前有:TypeScript、JavaScript、Java)提供了语义标记。语义标记基于语言服务符号的理解,比语法标记更加精确,来自于基于正则表达式的TextMeta语法。语义高亮是在语法高亮上面计算出来的,并且是更加准确和丰富,如下所示:

不带语义高亮的 Tomorrow Night Blue 主题

带语义高亮的 Tomorrow Night Blue 主题

注意语言服务符号理解的不同颜色:

  • 第10行,languageModes是作为参数的颜色
  • 第11行,Range和Position是类的颜色,document是参数的颜色
  • 第13行,getFoldingRanges是方法颜色 设置项 editor.semanticHighlighting.enabled 来控制语义高亮效果是否生效。可以有以下值: true false configuredByTheme
  • truefalse 用来控制所有主题的语义高亮
  • configuredByTheme 是默认值,并且告诉每个主题的语义高亮是否开启。vscode所有主题的语义高亮默认都是开启的。

用户可以通过覆盖下面的设置来进行设置主题:

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true
    }
},

语言的语义是否可用,并且语义高亮是否开启,取决于主题是否配置了语义标记的颜色。一些语义标记是标准化的,并缺映射到已经建立好的TextMate上面。如果主题有对应的这些TextMate的颜色规则,这些语义标记就会显示对应的颜色,不需要任何其他额外的颜色规则。

editor.semanticTokenColorCustomizations" 可以配置额外的样式规则。

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true,
        "rules": {
            "*.declaration": { "bold": true }
        }
    }
},

要查看语义标记如何显示及显示风格,可以执行命令 Developer: Inspect Editor Tokens and Scopes ,然后会在当前位置显示相关信息。 如果当前使用的编程语言在当前的位置有可用的语义标记,并且主题也开启了语义标记,就会显示一个语义标记工具提示框。该部分会显示语义标记的信息(类型和修改数量)和要执行的风格规则。

详情请查看文档

创建自己的主题颜色

创建和发布主题插件是非常容易的。在用户设置里自定义颜色,然后使用 Developer: Generate Color Theme From Current Settings 命令来生成颜色主题。

vscode的插件生成器 yeoman会帮你生成插件的剩余部分。

生成主题插件,详情可查看文档

删除默认的颜色主题

如果想删除vscode自带的主题,可以打开插件面板,点击上访的杯子按钮,选择built-in,选择想关闭的主题,点击disable,即可关闭选中的主题。

文件图标主题

文件图标主题可以通过插件的方式发布,用户可以选择设置成他们喜欢的文件图标主题。文件图标主题会显示在资源管理器和标签页上。

选择文件图标主题

  1. 点击菜单栏: File > Preferences > File Icon Themes
  2. 也可以执行命令: Preferences: File Icon Them
  3. 使用上下方向键选择文件图标主题,可以进行预览
  4. 按enter键,选中喜欢的主题

默认使用的文件图标主题是 Seti 。一旦选中了使用某一个文件图标主题,重启后也会使用这个选中的文件图标主题。选择 None 可以关闭文件图标主题。

vscode内置了两个文件图标主题, MinimalSeti 。在选择文件图标主题的列表里面,选择 Install Additional File Icon Themes 项来安装其他文件图标主题。这个也是通过插件面板来进行安装的。

正在使用的文件图标主题是保存在设置里面的: "workbench.iconTheme": "vs-seti"

创建自己的文件图标主题

可以使用svg格式的文件来创建自己的文件图标主题,详情请看文档

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部