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

How to change text or syntaxt colors VS Code editor
How to change text or syntaxt colors VS Code editor

Share this Article!

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?

https://youtu.be/NnoerZPnm4k
How to Change Color of Text and Syntax in VSCode Editor?

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
Visual Studio Code editor

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.

VS Code JSON settings
VS Code JSON settings

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.

color of Text and Syntax in VSCode
color of Text and Syntax in VSCode

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:
color of Text and Syntax in VSCode
  • 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.
color of Text and Syntax in VSCode
color of Text and Syntax in VSCode
  • After that, paste this line into the Scope section of the JSON source code as shown in the image below.
color of Text and Syntax in VSCode
color of Text and Syntax in VSCode

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

Related Tutorials About VS Code Fonts

https://youtu.be/NnoerZPnm4k
How to Change Color of Text and Syntax in VSCode Editor?

How to Change Font Size in Visual Studio Code

https://youtu.be/NnoerZPnm4k
How to Change Color of Text and Syntax in VSCode Editor?

Share this Article!

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe Our YouTube Channel!

Follow for Latest Updates