How to customize VS Code themes?

VS Code provides rich theme customization options, allowing users to customize the editor appearance according to personal preferences and work needs, improving the user experience.

Theme Types

Color Themes

Affect the colors of editor, status bar, activity bar and other interface elements.

File Icon Themes

Provide different icons for files and folders.

Product Icon Themes

Change the icon styles in VS Code interface.

Installing Themes

Through Extension Marketplace

1. Open extensions view (Ctrl+Shift+X)
2. Search for "theme" or "color theme"
3. Select theme and install
4. Click to apply theme

Through Command Palette

1. Press Ctrl+Shift+P
2. Type "Preferences: Color Theme"
3. Select and apply theme

Customizing Color Themes

Creating Custom Theme

1. Create .vscode folder
2. Create color-theme.json file
3. Define color rules

Theme Configuration Example

json
{
  "name": "My Custom Theme",
  "type": "dark",
  "colors": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "activityBar.background": "#333333",
    "statusBar.background": "#007acc"
  },
  "tokenColors": [
    {
      "scope": ["keyword", "storage.type"],
      "settings": {
        "foreground": "#569cd6"
      }
    },
    {
      "scope": ["string", "constant.other.symbol"],
      "settings": {
        "foreground": "#ce9178"
      }
    }
  ]
}

Common Color Settings

json
{
  "editor.background": "#1e1e1e",
  "editor.foreground": "#d4d4d4",
  "editor.lineHighlightBackground": "#2a2d2e",
  "editorCursor.foreground": "#aeafad",
  "editor.selectionBackground": "#264f78"
}

Syntax Highlighting Customization

Token Colors

Define colors for different syntax elements:

json
{
  "tokenColors": [
    {
      "name": "Comments",
      "scope": ["comment", "punctuation.definition.comment"],
      "settings": {
        "foreground": "#6a9955",
        "fontStyle": "italic"
      }
    },
    {
      "name": "Functions",
      "scope": ["entity.name.function", "support.function"],
      "settings": {
        "foreground": "#dcdcaa"
      }
    }
  ]
}

Scope Selectors

• keyword: Keywords
• string: Strings
• comment: Comments
• variable: Variables
• function: Functions

Workspace Color Customization

Configure in settings.json

json
{
  "workbench.colorCustomizations": {
    "activityBar.background": "#333333",
    "activityBar.foreground": "#ffffff",
    "statusBar.background": "#007acc",
    "statusBar.foreground": "#ffffff",
    "editorGroup.background": "#1e1e1e",
    "sideBar.background": "#252526"
  }
}

Language-specific Colors

json
{
  "[javascript]": {
    "editor.tokenColorCustomizations": {
      "textMateRules": [
        {
          "scope": "keyword.control.flow",
          "settings": {
            "foreground": "#c586c0"
          }
        }
      ]
    }
  }
}

Font Customization

Editor Fonts

json
{
  "editor.fontFamily": "'Fira Code', 'Consolas', 'Courier New'",
  "editor.fontSize": 14,
  "editor.fontWeight": "400",
  "editor.lineHeight": 1.5
}

Terminal Fonts

json
{
  "terminal.integrated.fontFamily": "'Fira Code', monospace",
  "terminal.integrated.fontSize": 13
}

Enable Ligatures

json
{
  "editor.fontLigatures": true
}

Interface Layout Customization

Activity Bar Position

json
{
  "workbench.activityBar.location": "top"
}

Status Bar Visibility

json
{
  "workbench.statusBar.visible": true
}

Panel Position

json
{
  "workbench.panel.defaultLocation": "bottom"
}

Recommended Themes

Dark Themes

• One Dark Pro
• Dracula Official
• Material Theme
• Nord

Light Themes

• Light+
• Solarized Light
• GitHub Light Theme

High Contrast Themes

• High Contrast
• Monokai High Contrast

Publishing Themes

Publishing Theme Extensions

1. Create extension project
2. Define theme configuration
3. Add preview screenshots
4. Publish to marketplace

package.json Configuration

json
{
  "contributes": {
    "themes": [
      {
        "label": "My Theme",
        "uiTheme": "vs-dark",
        "path": "./themes/my-theme.json"
      }
    ]
  }
}

Important Notes

• Choose themes suitable for long work sessions to avoid eye fatigue
• Consider theme switching for different environments (day/night)
• Test theme performance in different languages
• Maintain theme consistency and readability
• Regularly update themes for better experience