MCPInstall

vscode-theme-colors

by steelan9199Frontend & Design

供 AI 查阅 VSCode 主题颜色设置。当用户询问 VSCode 主题颜色、颜色自定义、主题配置、workbench.colorCustomizations 等相关问题时触发。

Installs
40
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

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

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads vscode-theme-colors automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the vscode-theme-colors skill do?

供 AI 查阅 VSCode 主题颜色设置。当用户询问 VSCode 主题颜色、颜色自定义、主题配置、workbench.colorCustomizations 等相关问题时触发。

How do I install vscode-theme-colors?

Run npx skills add https://github.com/steelan9199/wechat-publisher --skill vscode-theme-colors in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vscode-theme-colors/ (personal) or .claude/skills/vscode-theme-colors/ (project).

Which AI agents can use vscode-theme-colors?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is vscode-theme-colors safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains vscode-theme-colors?

It is published by steelan9199 in steelan9199/wechat-publisher. It has 40 recorded installs.

More from steelan9199/wechat-publisher

View all →

pyautogui-automation

steelan9199/wechat-publisher

基于 PyAutoGUI 的桌面自动化工具。支持截图、鼠标键盘控制、图像识别、颜色检测等操作。当用户需要自动化操作桌面应用、执行 UI 测试或重复性任务时触发。

Productivity & Automation671 installs

wechat-publisher-yashu

steelan9199/wechat-publisher

Open the skill to read its SKILL.md instructions.

202 installs

wechat-title-optimizer

steelan9199/wechat-publisher

公众号标题优化专家，专为技术/效率工具类内容创作者优化标题。当用户需要优化公众号文章标题、提升文章点击率、诊断标题问题或寻找爆款标题灵感时使用此技能。支持技术热词保护、多维度优化分析和场景化标题推荐。能够智能读取上下文中的文章内容，基于文章实际内容优化标题，确保标题与内容高度匹配。

172 installs

wechat-content-optimizer

steelan9199/wechat-publisher

优化本地 Markdown 文件中的公众号文章内容，使其更适合16-50岁中国用户在微信公众平台阅读。支持优化文章结构、语言表达、排版格式，提升开头吸引力、段落节奏、结尾转化。当用户需要优化公众号文章、改进 Markdown 内容质量、提升文章阅读体验时使用此技能。

Docs & Writing105 installs

generate-cover-prompt

steelan9199/wechat-publisher

Open the skill to read its SKILL.md instructions.

AI & Agents73 installs

webp-to-jpg

steelan9199/wechat-publisher

Open the skill to read its SKILL.md instructions.

68 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs