How to Change Color of Text and Syntax in VSCode Editor 2023

How to Change Color of Text and Syntax in VSCode Editor

Are you a new web developer and just started using Visual Studio Code? If you don’t know how to change the color of Text and Syntax in VSCode Editor, then this article is exactly for you.

In this post, you will learn how to change the color of text and syntax in VSCode Editor 2023. Visual Studio Code by Microsoft is one of the most popular tools and software among web developers and software engineers.

Visual Studio Sode Syntax Highlighting Colors

Moreover, Most new developers are not satisfied with the default theme and color scheme of VS Code editor. They want to change the visual studio code syntax highlighting colors according to their own color choice.

The article will explain the step-by-step process for code newbies to change the color of text and syntax in VSCode. You just need to paste the given source code and change the color of any tag to syntax in the visual studio code syntax highlighting colors.

How do I change the Color of Text and Syntax in VSCode?

To change the Color of Text and Syntax in VSCode follow the steps given below:

1. Open VS Code editor to change the syntax colors.
2. Go to Settings, which is in the bottom left corner of the VS Code window.
3. In the search field type JSON, and click on the ‘Edit in settings.json’ option.
4. Copy and paste the given source code in the settings.json, code editor tab.
5. Press ‘Ctrl+shift+P’ from the keyboard to open VS Code command palette.
6. Search: ‘Inspect Editor Tokens and Scopes’
7. Take the cursor on the text or tag, if you want to change the colors.
8. To change the syntax colors, follow the steps in the below video tutorials.

I have explained all the steps in the video tutorials for your understanding. You can watch the below video if your visual studio code syntax highlighting not working.

How to Change Text Color in Visual Studio Code?

Step – 1

Open your VS Code editor and go to the settings option. The settings option is located in the bottom left corner of the Visual Studio code editor window as shown in the image below.

Step – 2

In the search field type JSON, and click on the ‘Edit in settings.json’ option. It will open a new tab where you can copy and paste the given JSON source code.

Step – 3

Source Code – How to change text color in Visual Studio code?

Now, it’s time to copy and paste the given source code into the settings.json, code editor tab. Just paste the given JSON source code in the settings.json tab window and modify this code according to the instruction given in the above video tutorial.

"editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": [
                 "support.function.session.php", 
                 ],
                 "settings": {
                 "foreground": "#569CD6",
                 }
            },
        ]
    }

The below image shows, where to paste the above JSON code to modify the text and syntax of VS Code editor.

Step – 4

Modification of JSON Code to change the color of Text and Syntax in VSCode

• Press ‘Ctrl+shift+P’ from the keyboard to open VS Code command palette and Search: ‘Inspect Editor Tokens and Scopes‘. As shown in the image below:

• After that, take the mouse cursor on the text or tag, you want to change the colors. And copy the line before the ‘textmate scopes’ line and paste it into the Scope section of the JSON source code as shown in the image below.

• After that, paste this line into the Scope section of the JSON source code as shown in the image below.

To change the colors of multiple syntaxes repeat the above steps again.

Related Tutorials About VS Code Fonts

How to Change Font Size in Visual Studio Code