vscode-theme-colors

Original：🇨🇳 Chinese
Translated

For AI to refer to VSCode theme color settings. Triggered when users ask questions related to VSCode theme colors, color customization, theme configuration, workbench.colorCustomizations, etc.

3installs
Sourcesteelan9199/wechat-publisher
Added on

NPX Install

npx skill4agent add steelan9199/wechat-publisher vscode-theme-colors

Tags

Translated version includes tags in frontmatter
vscode-themecolor-customizationtheme-configurationeditor-settingsextension-development

SKILL.md Content (Chinese)

View Translation Comparison →

VSCode Theme Color Settings

Overview

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"
}

Customize Theme Colors

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

Set Custom Colors for Specific Themes

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

Customize Editor Syntax Highlighting

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

Color Formats

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 
00
= fully transparent, 
ff
= fully opaque (default)

Complete Color Reference

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

Create a New Theme

  1. Use the 
    Developer: Generate Color Theme from Current Settings
    command to generate a theme file
  2. 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
    - Focused element border
  • foreground
    - Overall foreground color
  • selection.background
    - Text selection background

Window Borders

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

Buttons

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

Editor

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

Side Bar

  • sideBar.background
    - Side bar background
  • sideBar.foreground
    - Side bar foreground

Activity Bar

  • activityBar.background
    - Activity bar background
  • activityBar.foreground
    - Activity bar foreground

Status Bar

  • statusBar.background
    - Status bar background
  • statusBar.foreground
    - Status bar foreground