How to Change Color of Text and Syntax in VS Code Editor 2022

How to change text or syntaxt colors VS Code editor
How to change text or syntaxt colors VS Code editor
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

How to Change Color of Text and Syntax in VS Code 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 VS Code Editor, then this article is exactly for you.

In this post, you will learn how to change the color of text and syntax in VS Code Editor 2022. The 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 VS Code. 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 Syntax in Visual Studio?

To change the text and syntax colors in visual studio code follow the steps given below:

  1. Open VS Code editor to change the syntax colors.
  2. Go to Settings, which is on 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, 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?

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

Recommended for You!

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.

visual studio code editor settings options
visual studio code editor settings options

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.

settings.json option in visual studio code.
settings.json option in visual studio 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 in 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.

settings.json to change colors of text and syntax in VS Code
settings.json to change colors of text and syntax in VS Code

Step – 4

Modification of JSON Code to Change the Syntax Colors in VS Code

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

 'Inspect Editor Tokens and Scopes' in VS Code
‘Inspect Editor Tokens and Scopes in VS Code
  • 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’ and paste it into the Scope section of the JSON source code as shown in the image below.

settings.json to change colors of text and syntax in VS Code
settings.json to change colors of text and syntax in VS Code
  • After that, paste this line into the Scope section of the JSON source code as shown in the image below.

The JSON source code modification VS Code
The JSON source code modification

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

Support Me!!!

I Love to Drink Coffee!

Need Your Support!

Hey, If this free content is helpful to you, Please Consider buying me a coffee as a tip. Your little help will appreciate me create more free content for you!

Related Tutorials About VS Code Fonts

Change Syntax Colors VS Code

How to Change Font Size in Visual Studio Code

Change Font size

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

10 Responses

  1. Hi,
    Could you show how to change color for multiple items?
    Say for instance I want to have different colors for both commands, parameters etc.?
    I tried adding your syntax multiple times but It’s generating errors in settings.json.

  2. hi,
    yes you can do that just copy the scop block to the end of the function.. after that add a comma and paste it again change the name of scop and the color and that’s it.
    for example on the HTML page:
    “editor.tokenColorCustomizations”: {
    “textMateRules”: [
    {
    “scope”: [
    “entity.other.attribute-name.html”,
    ],
    “settings”: {
    “foreground”: “#085eaf”,
    },
    },
    {
    “scope”: [
    “entity.name.tag.html”,
    ],
    “settings”: {
    “foreground”: “#08af40”,
    },
    }
    ],
    },

  3. hi if the keyword that i want to change (for exampe ‘Number function’ have same scope as ‘log’ or ‘prompt’ and … then all of them will change. what should i do
    thanks

Leave a Reply

Your email address will not be published.