头图

vscode插件开发中文文档教程(6)——扩展的主题

原文链接:Theming\
作者:Microsoft\
译者:倔强青铜三

前言

大家好,我是倔强青铜三。是一名热情的软件工程师,我热衷于分享和传播IT技术,致力于通过我的知识和技能推动技术交流与创新,欢迎关注我,微信公众号:倔强青铜三。欢迎点赞、收藏、关注,一键三连!!!

扩展的主题

在 Visual Studio Code 中,有三种类型的主题:

  • 颜色主题:从 UI 组件标识符和文本标记标识符到颜色的映射。颜色主题允许您将喜欢的颜色应用于 VS Code UI 组件和编辑器中的文本。
  • 文件图标主题:从文件类型/文件名到图像的映射。文件图标会在 VS Code UI 的多个位置显示,例如文件资源管理器、快速打开列表和编辑器选项卡。
  • 产品图标主题:一组在整个 UI 中使用的图标,包括侧边栏、活动栏、状态栏以及编辑器符号边距。

颜色主题

color-theme

如图所示,颜色主题定义了 UI 组件的颜色以及编辑器中的高亮颜色:

  • colors 映射用于控制 UI 组件的颜色。
  • tokenColors 定义了编辑器中高亮的色彩和样式。有关更多详细信息,请参阅 语法高亮指南
  • semanticTokenColors 映射以及 semanticHighlighting 设置可以增强编辑器中的高亮效果。语义高亮指南 解释了与此相关的 API。

我们提供了一个 颜色主题指南 和一个 颜色主题示例,展示了如何创建主题。

文件图标主题

文件图标主题允许您:

  • 创建从唯一文件图标标识符到图像或字体图标的映射。
  • 通过文件名或文件语言类型将文件关联到这些唯一的文件图标标识符。

文件图标主题指南 讨论了如何创建文件图标主题。 file-icon-theme

产品图标主题

产品图标主题允许您:

重新定义工作台中使用的所有内置图标。例如,过滤操作按钮和视图图标、状态栏图标、断点图标以及树和编辑器中的折叠图标。

产品图标主题指南 讨论了如何创建产品图标主题。

最后感谢阅读!欢迎关注我,微信公众号倔强青铜三。欢迎点赞收藏关注,一键三连!!!

倔强青铜三
41 声望0 粉丝