VSCode Theme Color Settings

Overview

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

Quick Reference

Set Color Theme

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

Customize Theme Colors

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

Set Custom Colors for Specific Themes

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

Customize Editor Syntax Highlighting

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

Color Formats

• #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

  )

00

ff

Complete Color Reference

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