vscode-theme-colors

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

VSCode 主题颜色设置

VSCode Theme Color Settings

概述

Overview

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

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

This skill provides complete reference materials for VSCode theme color settings, including:

Basic concepts and usage of color themes
List of customizable color identifiers
How to create and publish custom themes

快速参考

Quick Reference

设置颜色主题

Set Color Theme

json

{
  "workbench.colorTheme": "Solarized Dark"
}

json

{
  "workbench.colorTheme": "Solarized Dark"
}

自定义主题颜色

Customize Theme Colors

json

{
  "workbench.colorCustomizations": {
    "activityBar.background": "#00AA00",
    "sideBar.background": "#347890"
  }
}

json

{
  "workbench.colorCustomizations": {
    "activityBar.background": "#00AA00",
    "sideBar.background": "#347890"
  }
}

为特定主题设置自定义颜色

Set Custom Colors for Specific Themes

json

{
  "workbench.colorCustomizations": {
    "[Monokai]": {
      "sideBar.background": "#347890"
    }
  }
}

json

{
  "workbench.colorCustomizations": {
    "[Monokai]": {
      "sideBar.background": "#347890"
    }
  }
}

编辑器语法高亮自定义

Customize Editor Syntax Highlighting

json

{
  "editor.tokenColorCustomizations": {
    "comments": "#229977",
    "strings": "#FF0000"
  }
}

json

{
  "editor.tokenColorCustomizations": {
    "comments": "#229977",
    "strings": "#FF0000"
  }
}

颜色格式

Color Formats

支持以下十六进制格式：

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

透明度

= 完全透明，

ff

= 完全不透明（默认）

The following hexadecimal formats are supported:

```
#RGB
```
(short form, e.g.,
```
#e35
```
)
```
#RGBA
```
(short form with transparency, e.g.,
```
#e35f
```
)
```
#RRGGBB
```
(full form, e.g.,
```
#ee3355
```
)
```
#RRGGBBAA
```
(full form with transparency, e.g.,
```
#ee3355ff
```
)

Transparency

= fully transparent,

ff

= fully opaque (default)

完整颜色参考

Complete Color Reference

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

See references/theme-color-reference.md for the full list of all customizable color identifiers.

创建新主题

Create a New Theme

使用

Developer: Generate Color Theme from Current Settings

命令生成主题文件

或使用 Yeoman 生成器创建主题扩展：
bash
```
npm install -g yo generator-code
yo code
```

Use the

Developer: Generate Color Theme from Current Settings

command to generate a theme file

Or use the Yeoman generator to create a theme extension:
bash
```
npm install -g yo generator-code
yo code
```

常用颜色分类

Common Color Categories

基础颜色

Basic Colors

```
focusBorder
```
- 聚焦元素边框
```
foreground
```
- 整体前景色
```
selection.background
```
- 文本选择背景

```
focusBorder
```
- Focused element border
```
foreground
```
- Overall foreground color
```
selection.background
```
- Text selection background

窗口边框

Window Borders

```
window.activeBorder
```
- 活动窗口边框
```
window.inactiveBorder
```
- 非活动窗口边框

```
window.activeBorder
```
- Active window border
```
window.inactiveBorder
```
- Inactive window border

按钮

Buttons

```
button.background
```
- 按钮背景
```
button.foreground
```
- 按钮前景
```
button.hoverBackground
```
- 悬停背景

```
button.background
```
- Button background
```
button.foreground
```
- Button foreground
```
button.hoverBackground
```
- Hover background

编辑器

Editor

```
editor.background
```
- 编辑器背景
```
editor.foreground
```
- 编辑器前景
```
editor.lineHighlightBackground
```
- 当前行高亮

```
editor.background
```
- Editor background
```
editor.foreground
```
- Editor foreground
```
editor.lineHighlightBackground
```
- Current line highlight

侧边栏

Side Bar

```
sideBar.background
```
- 侧边栏背景
```
sideBar.foreground
```
- 侧边栏前景

```
sideBar.background
```
- Side bar background
```
sideBar.foreground
```
- Side bar foreground

活动栏

Activity Bar

```
activityBar.background
```
- 活动栏背景
```
activityBar.foreground
```
- 活动栏前景

```
activityBar.background
```
- Activity bar background
```
activityBar.foreground
```
- Activity bar foreground

状态栏

Status Bar

```
statusBar.background
```
- 状态栏背景
```
statusBar.foreground
```
- 状态栏前景

```
statusBar.background
```
- Status bar background
```
statusBar.foreground
```
- Status bar foreground