VS code-3 颜色主题

日期:2018年11月18日 阅读次数:5775 分类:工具类

通过颜色主题,您可以修改Visual Studio Code的用户界面中的颜色,以满足您的偏好和工作环境。

从命令调色板预览主题

 

选择颜色主题

  1. 在VS Code中,使用“ 文件” > “首选项” >“ 颜色主题 ”打开“颜色主题”选择器。(代码 > 首选项 > macOS上的颜色主题)。
  2. 您也可以使用键盘快捷键Ctrl + K Ctrl + T来显示选择器。
  3. 使用光标键预览主题的颜色。
  4. 选择所需的主题,然后按Enter键

命令调色板中的主题

活动颜色主题存储在用户设置中(键盘快捷键Ctrl +,)。

  // Specifies the color theme used in the workbench.
  "workbench.colorTheme": "Default Dark+"
}

提示:默认情况下,主题存储在用户设置中,并全局应用于所有工作区。您还可以配置特定于工作区的主题。为此,请在“工作区” 设置中设置主题。

 

来自市场的彩色主题

VS Code中有几个开箱即用的颜色主题供您试用。

社区已将更多主题上传到VS Code Extension Marketplace。如果找到要使用的,请安装它并重新启动VS Code,新主题将可用。

提示:要搜索主题,请在“扩展程序”视图(Ctrl + Shift + X)搜索框中键入“主题” 。

[
vscode,图标
vscode,图标
8.0M
robertohuertasm
Visual Studio代码的图标
]
(https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons)

一个黑暗临
一个黑暗临
5.4M
zhuangtongfa
Atom标志性的One Dark主题为Visual Studio Co …

材料图标主题
材料图标主题
3.5M
PKief
Visual Studio代码的材质设计图标


VSCode伟大的图标
VSCode伟大的图标
1.8M
emmanuelbeziat
一大堆图标(100+)为您的文件。


物质主题
物质主题
1.3M
Equinusocio
现在是Visual Studio Code最史诗的主题


德古拉官方
德古拉官方
853.1K
吸血鬼主题
官方吸血鬼主题。许多edi的黑暗主题……


Atom One黑暗主题
Atom One黑暗主题
802.1K
akamud
一个基于Atom的黑暗主题


冬天来了......
冬天来了……
431.7K
johnpapa
John Papa首选的暗/光主题

您还可以直接浏览VS Code Marketplace网站以查找可用主题。

 

自定义颜色主题

您可以使用workbench.colorCustomizationseditor.tokenColorCustomizations用户设置自定义活动颜色主题。

要设置VS Code UI元素的颜色,例如列表和树(文件资源管理器,建议小部件),差异编辑器,活动栏,通知,滚动条,拆分视图,按钮等,请使用workbench.colorCustomizations

活动吧主题

您可以在设置workbench.colorCustomizations值时使用IntelliSense,或者,对于所有可自定义颜色的列表,请参阅主题颜色参考

要仅自定义特定主题,请使用以下语法:

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

要调整编辑器突出显示颜色的语法,请editor.tokenColorCustomizations在用户设置 settings.json文件中使用:

令牌颜色自定义

预配置的一组语法标记(’comments’,’strings’,…)可用于最常见的结构。如果您想要更多,可以通过直接指定TextMate主题颜色规则来实现:

高级令牌颜色自定义

注意:直接配置TextMate规则是一项高级技能,因为您需要了解TextMate语法的工作原理。去这里了解更多信息

同样,要仅自定义特定主题,请使用以下语法:

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

 

创建自己的颜色主题

创建和发布主题扩展非常简单。在用户设置中自定义颜色,然后使用Developer:Generate Color Theme From Current Settings命令生成主题定义文件。

VS Code的Yeoman 扩展生成器将帮助您生成扩展的其余部分。

有关详细信息,请参阅“ 扩展创作”部分中的“ 添加新主题”主题。

 

删除默认主题

如果您想从Color Theme选取器中删除VS Code附带的一些默认主题,可以从Extensions视图中禁用它们(Ctrl + Shift + X)。从“扩展”视图顶部打开“ … 更多操作”下拉菜单,选择“ 显示内置扩展”,您将看到列出默认主题的“ 主题”部分。

内置主题

您可以禁用内置的主题扩展,就像任何其他VS代码扩展与禁用的齿轮上下文菜单中的命令。

禁用主题

 

图标主题

文件图标主题可以由扩展程序提供,并由用户选择为其最喜欢的文件图标集。文件图标显示在文件资源管理器和选项卡标题中。

选择文件图标主题

  1. 在VS Code中,使用文件 > 首选项 > 文件图标主题打开文件图标主题选择器。(代码 > 首选项 > macOS上的文件图标主题)。
  2. 您还可以使用命令选项板中的“首选项:文件图标主题”命令(Ctrl + Shift + P)。
  3. 使用光标键预览主题的图标。
  4. 选择所需的主题,然后按Enter键

文件图标主题下拉列表

默认情况下,使用Seti文件图标集,这些是您在文件资源管理器中看到的图标。选择图标主题后,将重新记住所选主题,并在重新启动VS代码时再次显示。您可以通过选择“ 无”来禁用文件图标。

VS代码附带两个图标主题; 最小和塞提。要安装更多图标主题,请选择图标主题选择器中的“ 安装其他文件图标主题”项,您将在“扩展”视图中看到文件图标主题(标记:icon-theme)的查询。

您还可以直接浏览VS Code Marketplace网站以查找可用主题。

活动的文件图标主题将保留在您的用户设置中(键盘快捷键Ctrl +,)。

  // Specifies the icon theme used in the workbench.
  "workbench.iconTheme": "vs-seti"
}

创建自己的文件图标主题

您可以从图标(最好是SVG)创建自己的文件图标主题,有关详细信息,请参阅我们的扩展创作部分中的添加新图标主题主题。

下一步

主题只是定制VS代码的一种方式。如果您想了解有关VS Code自定义和可扩展性的更多信息,请尝试以下主题:

  • 设置 - 了解如何通过用户和工作区设置将VS代码配置为首选项。
  • 片段 - 为您喜欢的语言添加其他片段。
  • 扩展Visual Studio代码 - 了解扩展VS代码的其他方法。

  • 主题,片段和着色器 - 您可以打包主题,片段和语言颜色,以便在VS Code中使用。

 
文章来源:

https://code.visualstudio.com/docs/getstarted/themes

文章标签: