自定义 VS Code 主题

之前在网上看到浅色主题会比深色主题更护眼，所以我在 VSCode 上安装了一些浅色主题，可惜都不太符合我的个人喜好。那么，干脆就来尝试自定义一款浅色 VSCode 主题吧。

创建主题

npx --package yo --package generator-code -- yo code

然后根据提示选择创建主题，并配置相应参数即可。

上述命令中，yo 是 Yeoman 的命令行工具，用于生成项目脚手架。generator-code 是 Yeoman 的一个生成器，专门用于创建 VS Code 扩展，包括主题。

项目结构

项目内自动生成的文件大致如下：

│  .gitattributes
│  .gitignore
│  .vscodeignore
│  CHANGELOG.md
│  package.json
│  README.md
│  vsc-extension-quickstart.md
│
├─.vscode
│   launch.json
│
└─themes
    xxx-color-theme.json

• .vscodeignore 文件可以用来排除一些开发过程中产生的临时文件、测试文件、构建工具等，避免它们被包含在最终发布的主题包中，从而减小扩展包的体积。
• 进行主题颜色开发只需修改 themes 目录下对应的 json 文件即可。
• 如果想要添加多个主题，只需要在 themes 目录下创建多个 json 文件，然后在 package.json 的 contributes/themes 项中添加对应的名称、路径等配置即可。
• themes 下的主题配置文件建议保留 -color-theme.json 的后缀，这样 VSCode 可以自动给出补全和提示等。

主题开发

主题开发的配置还是比较繁琐的，这里非常建议先在插件市场里挑一款现成的主题，然后在此基础上修改对应的参数。

配置文件中的参数解释如下：

• "semanticHighlighting" 控制基于代码语义的着色。这意味着颜色将根据代码元素的含义（例如变量、函数、类、关键字等）进行分配，而不是仅仅基于其语法结构。当设置为 true 时，主题可以使用语义标记信息来更精确地对代码元素进行着色。
• "type" 表示该颜色主题是一个亮色或暗色主题。
• "colors" 定义的是 VS Code UI 界面元素的颜色，而不是编辑器内代码本身的颜色。这些元素包括侧边栏、活动栏、状态栏、编辑器背景、面板、按钮等等。具体每个参数配置的含义可以参考官方文档。
• "tokenColors" 是基于简单的文本模式匹配的颜色定义，适用于所有语言，但可能会在某些情况下产生错误的高亮。
  • scope：定义要匹配的语法元素。可以使用字符串或字符串数组。可以使用 TextMate 语法进行精确的匹配。
  • settings：定义要应用的样式，包括 foreground 和 fontStyle
• "semanticTokenColors" 是基于语义分析的颜色定义。它使用语言服务器提供的语义信息来确定代码的结构和含义，然后应用相应的颜色。

上面说到 tokenColors 可能会产生错误高亮，想要追求完美的高亮显示可以参考官方文档的说明 Syntax Highlight Guide 和 Semantic Highlight Guide 来进行配置。

调试和预览

开发中可以按 F5 进行调试和预览效果。

如果想要了解每个 token 的相关信息，可以打开命令面板（Ctrl + Shift + P），输入 Developer: Inspect Editor Tokens and Scopes 进行查看。

发布

想要发布自定义主题，操作过程可以完全按照官方文档中的说明进行。

最后，我自定义的浅色 VS Code 主题在这里，欢迎尝试。