How to Install and Tweak VS Code Themes

Visual Studio Code’s appearance directly impacts your coding experience. A well-chosen theme reduces eye strain during long sessions, helps you spot syntax errors faster, and makes your workspace feel uniquely yours. While VS Code ships with solid defaults, understanding how to install and customize themes transforms a generic editor into a personalized development environment.

Installing Themes from the VS Code Marketplace

The quickest path to a new look starts with the Extensions panel. Click the Extensions icon in the sidebar (or press Ctrl+Shift+X / Cmd+Shift+X) and search for “theme” to browse available options. The VS Code Marketplace hosts thousands of themes, from minimalist designs to vibrant, high-contrast options.

When you find a theme that catches your eye, click Install. VS Code immediately adds it to your available themes. Switch between installed themes using the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and typing “Preferences: Color Theme”. This displays all your themes in a preview list—arrow through them to see instant changes in your editor.

Popular starting points include GitHub’s official theme for familiar syntax highlighting, or One Dark Pro for those coming from Atom. These established themes offer polished color schemes that work well across different file types.

Understanding VS Code’s Theme Architecture

VS Code themes control two distinct areas: workbench colors (UI elements like sidebars, tabs, and status bars) and syntax colors (code highlighting). This separation means you can mix elements—keeping a theme’s syntax colors while adjusting the interface to your preferences.

Every theme is essentially a collection of color definitions stored in JSON. When you select a theme, VS Code applies these color rules to different interface elements and code tokens. This modular approach makes VS Code customization remarkably flexible without requiring you to build themes from scratch.

Customizing Themes Through Settings

The real power of theme tweaking lies in VS Code’s settings. Instead of modifying theme files directly, you override specific colors in your settings.json. This approach preserves your customizations across updates and makes changes portable between machines.

Workbench Color Customizations

To adjust UI elements, add a workbench.colorCustomizations block to your settings:

{
  "workbench.colorCustomizations": {
    "editor.background": "#1a1a1a",
    "sideBar.background": "#252525",
    "activityBar.background": "#2a2a2a"
  }
}

These changes apply globally across all themes. To target a specific theme, wrap your customizations in brackets with the theme name:

{
  "workbench.colorCustomizations": {
    "[One Dark Pro]": {
      "editor.background": "#1a1a1a"
    }
  }
}

Token Color Customizations

Syntax highlighting adjustments work similarly through editor.tokenColorCustomizations. You can modify broad categories like comments and strings:

{
  "editor.tokenColorCustomizations": {
    "comments": "#608B4E",
    "strings": "#CE9178",
    "functions": "#DCDCAA"
  }
}

For granular control, use TextMate scopes under textMateRules. This lets you target specific language constructs:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "keyword.control",
        "settings": {
          "foreground": "#C586C0",
          "fontStyle": "italic"
        }
      }
    ]
  }
}

Practical Theme Tweaking Strategies

Start with a theme that’s 80% right, then refine the remaining 20%. Common adjustments include darkening backgrounds for better contrast, brightening comments for improved readability, or adding italic styling to keywords for visual hierarchy.

The Command Palette’s “Developer: Inspect Editor Tokens and Scopes” command reveals the exact scope names for any code element. Hover over any piece of syntax, run this command, and VS Code shows you the TextMate scope you need to target in your settings.

Consider workspace-specific customizations for different projects. A high-contrast theme might work well for frontend work with lots of nested HTML, while a subtle theme suits long Python sessions. VS Code’s workspace settings let you maintain these preferences per project.

Light and Dark Mode Behavior

VS Code respects your system’s theme preference by default. The window.autoDetectColorScheme setting enables automatic switching between light and dark themes based on your OS settings. Define your preferred themes for each mode:

{
  "window.autoDetectColorScheme": true,
  "workbench.preferredDarkColorTheme": "One Dark Pro",
  "workbench.preferredLightColorTheme": "GitHub Light"
}

This setup eliminates manual theme switching when moving between different lighting conditions or times of day.

Conclusion

VS Code themes offer more than cosmetic changes—they’re tools for creating a comfortable, productive coding environment. Start with marketplace themes for inspiration, then use VS Code’s built-in customization options to fine-tune colors that don’t quite work for you. The combination of quality base themes and granular customization controls means you’re never stuck with defaults that slow you down or strain your eyes. Your ideal setup is just a few settings away.

FAQs

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.