vscode-theme-colors

VSCode Theme Color Settings

Overview

This skill provides complete reference material 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

Setting the Color Theme

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

Customizing Theme Colors

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

Setting Custom Colors for a Specific Theme

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

Editor Syntax Highlighting Customization

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

Color Formats

The following hexadecimal formats are supported:

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

Transparency 00 = fully transparent,ff = fully opaque (default)

Complete Color Reference

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

Creating a New Theme

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:
```
npm install -g yo generator-code
yo code
```

Common Color Categories

Base Colors

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

Window Border

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

Button

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

Sidebar

sideBar.background - Sidebar background
sideBar.foreground - Sidebar 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