How to change syntax color in Visual Studio Code?

You can efficiently change syntax colors in Visual Studio Code by selecting a different built-in or marketplace color theme, or by precisely customizing individual syntax highlighting rules through your settings.

Visual Studio Code provides robust options to tailor the appearance of your code, making it more readable and visually appealing. Syntax coloring, a key component of this, highlights different parts of your code (like keywords, strings, and comments) in distinct colors, improving code comprehension.

Exploring and Applying Built-in and Marketplace Themes

The simplest and most common way to change syntax colors is by applying a different color theme. VS Code comes with several pre-installed themes, and many more are available for free in the Visual Studio Code Marketplace. These themes bundle both workbench colors (for the UI elements) and syntax highlighting colors.

Steps to Change a Color Theme

Changing your active color theme is straightforward:

Open the Command Palette: Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS).
Search for Themes: Type theme and select Preferences: Color Theme from the dropdown.
Preview and Select: Use your up and down arrow keys to navigate through the list of available themes. VS Code will instantly preview each theme, showing you how your code will look.
Confirm Selection: Press Enter to apply the theme you prefer.

Installing New Themes from the Marketplace

If the built-in themes don't quite match your aesthetic, the VS Code Marketplace offers thousands of community-contributed themes.

Open Extensions View: Click on the Extensions icon in the Activity Bar on the side (or press Ctrl+Shift+X / Cmd+Shift+X).
Search for Themes: In the search bar, type color theme or the name of a specific theme you're looking for (e.g., Dracula, One Dark Pro).
Install a Theme: Browse the results. When you find a theme you like, click the Install button next to its name.
Apply the New Theme: After installation, VS Code will often prompt you to activate the newly installed theme. If not, follow the steps in "Steps to Change a Color Theme" above, and your new theme will appear in the list.

Fine-Tuning Syntax Highlighting with Custom Rules

For those who want more precise control, you can customize individual syntax highlighting rules, either by overriding specific token colors in your settings.json file or by referencing existing TextMate themes. The easiest way to achieve custom theming is to start with an existing theme and then customize it further.

Customizing Individual Token Colors via `settings.json`

This method allows you to change the color or style of specific language elements (tokens) without creating an entirely new theme. You can apply these customizations globally or to specific themes.

Open User Settings (JSON):
- Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS).
- Type settings json and select Preferences: Open User Settings (JSON).
Add editor.tokenColorCustomizations: Inside your settings.json file, add or modify the editor.tokenColorCustomizations object. This setting allows you to define rules for TextMate scopes.

Define Custom Rules: You can target specific themes or apply rules universally. Use the textMateRules array to specify a scope (what you're targeting) and settings (how it should look).

Example Customization:

{
    "editor.tokenColorCustomizations": {
        // Apply these rules to a specific theme, e.g., "Default Dark+"
        // To apply to all themes, omit "[Default Dark+]"
        "[Default Dark+]": {
            "textMateRules": [
                {
                    "scope": "comment",
                    "settings": {
                        "foreground": "#008000", // Dark green for comments
                        "fontStyle": "italic"    // Make comments italic
                    }
                },
                {
                    "scope": "string.quoted",
                    "settings": {
                        "foreground": "#FFA500" // Orange for strings
                    }
                },
                {
                    "scope": "keyword.control",
                    "settings": {
                        "foreground": "#FF00FF", // Magenta for control keywords (if, for, while)
                        "fontStyle": "bold"      // Make control keywords bold
                    }
                },
                {
                    "scope": [
                        "variable.parameter",
                        "variable.other.property"
                    ],
                    "settings": {
                        "foreground": "#ADD8E6", // Light blue for parameters and properties
                        "fontStyle": "underline"
                    }
                }
            ]
        }
    }
}

Common Scopes for Customization:

Scope	Description	Example Use Case
`comment`	Code comments	Change color and style of comments
`string` / `string.quoted`	String literals	Adjust string color
`keyword`	Language keywords (`if`, `for`, `var`, etc.)	Make keywords stand out
`variable`	Variables, parameters	Differentiate variables from other text
`entity.name.function`	Function names	Highlight function declarations and calls
`support.function`	Built-in functions/libraries	Style standard library functions
`constant`	Constants (e.g., `true`, `false`, numbers)	Emphasize numerical or boolean values
`punctuation`	Brackets, commas, semicolons	Change color of punctuation marks

Tip for Finding Scopes: If you want to customize a specific element but don't know its scope, open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and select Developer: Inspect Editor Tokens and Scopes. Click on the element in your code, and VS Code will display its TextMate scope hierarchy, which you can then use in your settings.json.

Referencing an Existing TextMate Theme (`.tmTheme` files)

VS Code supports TextMate themes, which are typically .tmTheme files. You can find these themes from various communities (like those for Sublime Text or Atom) or even create your own. This approach is more for a comprehensive theme definition rather than individual overrides.

To use a .tmTheme file:

Locate or Create: Find an existing .tmTheme file or create one.
Place the File: You can place this file in a custom folder, often within a VS Code extension, or directly reference it.
Reference in Settings: While direct referencing in settings.json is possible, it's more common for users to package .tmTheme files within a simple VS Code extension for easier management and sharing. The recommendation is to begin with an existing TextMate theme and then customize it as needed.

Creating Your Own Custom Theme (Advanced)

For ultimate control, you can create a full-fledged VS Code extension that includes your custom color theme. This involves defining uiTheme (for workbench UI colors) and tokenColors (for syntax highlighting) within a package.json file. This is generally for developers who want to publish their theme or require very specific, extensive customizations that go beyond what tokenColorCustomizations offers.

You can learn more about creating a new color theme in the official VS Code Extension API documentation.

By leveraging these methods, you can transform the look and feel of your Visual Studio Code editor to suit your personal preferences and enhance your coding experience.