mcpField
V
vscode-theme-colors

vscode-theme-colors

github.com/steelan9199Design & UI1040 installsUpdated today
Repository

About vscode-theme-colors

A reference skill for configuring VSCode theme colors, including theme selection, color identifiers, and syntax highlighting. It also describes color formats and ways to create a custom theme.

Key features

  1. 01Set the workbench color theme
  2. 02Customize interface color identifiers
  3. 03Configure syntax highlighting colors
  4. 04Consult the color identifier reference
  5. 05Create and publish custom themes

Use cases

  1. 01Adjust sidebar and status bar colors
  2. 02Set colors for a specific theme
  3. 03Change comment and string highlighting
  4. 04Generate a theme file from current settings

Install

Copy the command and run it in a terminal.

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

After installing, type/vscode-theme-colorsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project 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 - 状态栏前景

Comments

Markdown supported