mcpField
V
vscode-theme-colors

vscode-theme-colors

github.com/steelan9199设计与 UI1040 次安装今天更新
代码仓库

关于 vscode-theme-colors

为 VSCode 主题颜色设置提供参考的技能，涵盖颜色主题、自定义颜色标识符和语法高亮配置。也介绍主题创建方法及颜色格式。

主要功能

  1. 01设置工作台颜色主题
  2. 02自定义界面颜色标识符
  3. 03配置语法高亮颜色
  4. 04查阅颜色标识符参考
  5. 05创建和发布自定义主题

适用场景

  1. 01调整侧边栏和状态栏配色
  2. 02为特定主题设置专属颜色
  3. 03修改注释与字符串的高亮颜色
  4. 04从当前设置生成主题文件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/steelan9199/wechat-publisher --skill vscode-theme-colors

安装后在 Claude Code 中输入/vscode-theme-colors确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
color-theme-guide.md
theme-color-reference.md
themes.md

详细介绍

来自项目 README

VSCode 主题颜色设置

概述

此 skill 提供 VSCode 主题颜色设置的完整参考资料，包括：

  • 颜色主题的基本概念和使用方法
  • 可自定义的颜色标识符列表
  • 如何创建和发布自定义主题

快速参考

设置颜色主题
{
  "workbench.colorTheme": "Solarized Dark"
}
自定义主题颜色
{
  "workbench.colorCustomizations": {
    "activityBar.background": "#00AA00",
    "sideBar.background": "#347890"
  }
}
为特定主题设置自定义颜色
{
  "workbench.colorCustomizations": {
    "[Monokai]": {
      "sideBar.background": "#347890"
    }
  }
}
编辑器语法高亮自定义
{
  "editor.tokenColorCustomizations": {
    "comments": "#229977",
    "strings": "#FF0000"
  }
}

颜色格式

支持以下十六进制格式：

  • #RGB (简写，如 #e35)
  • #RGBA (简写带透明度，如 #e35f)
  • #RRGGBB (完整，如 #ee3355)
  • #RRGGBBAA (完整带透明度，如 #ee3355ff)

透明度 00 = 完全透明，ff = 完全不透明（默认）

完整颜色参考

详见 references/theme-color-reference.md 获取所有可自定义的颜色标识符完整列表。

创建新主题

  1. 使用 Developer: Generate Color Theme from Current Settings 命令生成主题文件
  2. 或使用 Yeoman 生成器创建主题扩展： 
    npm install -g yo generator-code
yo code

常用颜色分类

基础颜色
  • focusBorder - 聚焦元素边框
  • foreground - 整体前景色
  • selection.background - 文本选择背景
窗口边框
  • window.activeBorder - 活动窗口边框
  • window.inactiveBorder - 非活动窗口边框
按钮
  • button.background - 按钮背景
  • button.foreground - 按钮前景
  • button.hoverBackground - 悬停背景
编辑器
  • editor.background - 编辑器背景
  • editor.foreground - 编辑器前景
  • editor.lineHighlightBackground - 当前行高亮
侧边栏
  • sideBar.background - 侧边栏背景
  • sideBar.foreground - 侧边栏前景
活动栏
  • activityBar.background - 活动栏背景
  • activityBar.foreground - 活动栏前景
状态栏
  • statusBar.background - 状态栏背景
  • statusBar.foreground - 状态栏前景

评论

支持 Markdown