You can change the color of class names in Visual Studio Code by editing your settings.json file. Add a custom rule to the editor.tokenColorCustomizations object that targets the entity.name.type.class scope, specifying your desired hexadecimal color value.
Accessing User Settings JSON
The most reliable way to customize syntax highlighting is through the raw JSON configuration file rather than the graphical interface. This approach provides precise control over specific token scopes and ensures your changes persist across workspace updates. Open Visual Studio Code and press Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS to open the Command Palette. Type "Preferences: Open Settings (JSON)" into the search bar and select the option to open the file directly. This action reveals the settings.json file where you can append custom configuration objects without affecting other default settings.
Locating the Token Color Customization Object
Once inside the JSON file, look for the key "editor.tokenColorCustomizations". If this key does not exist, you need to create it. This object acts as a container for all your theme overrides. It is important to note that this setting applies globally unless you nest it within a workspace-specific configuration. The structure allows you to override specific scopes defined by the active color theme. Most modern themes use TextMate grammars to define these scopes, which means we will target specific text attributes using standard scope names.
Understanding Scope Names
To target class names specifically, you must identify the correct TextMate scope. In most programming languages like JavaScript, Python, or Java, class names are categorized under entity.name.type.class. Some themes might use support.class or storage.type.class, but entity.name.type.class is the most common standard for user-defined classes. You can verify the exact scope name of any text element by placing your cursor on the word, pressing Ctrl+Shift+I (or Cmd+Shift+I), and reading the popup window that displays the grammar scope. This diagnostic step prevents guessing and ensures accuracy.
Adding the Custom Color Rule
Inside the editor.tokenColorCustomizations object, add a new property called textMateRules. This array holds your custom rules. Each rule should be an object containing a scope string and a settings object. Within the settings object, specify the foreground color using a hex code. For example, to make class names bright orange, you would use #FF8C00. Ensure you escape any special characters if necessary, though hex codes are generally safe. The JSON structure should look like this:
{
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "entity.name.type.class",
"settings": {
"foreground": "#FF8C00"
}
}
]
}
}This configuration tells VS Code to find every token matching the class type scope and apply the specified foreground color. You can add multiple rules to the array to style different elements simultaneously. Remember to check for valid JSON syntax, such as ensuring commas separate objects correctly and that brackets are balanced. Invalid JSON will cause the editor to fail loading the theme, so save the file only after verifying its structure.
Verifying the Changes
After saving the settings.json file, the changes should apply immediately. Refresh your code editor view to see the updated colors. If the class names do not change, verify that your active theme supports the scope you targeted. Some minimalistic themes may strip certain scopes for aesthetic reasons, making overrides ineffective. In such cases, try switching to a more comprehensive theme like "Default Dark Modern" to test if the override works. If it does, the issue lies with the original theme's definition of class tokens. You can also inspect the scope again using the keyboard shortcut mentioned earlier to ensure no typos exist in your scope string.
Troubleshooting Common Issues
If the color does not update, consider whether another rule is overriding yours. Rules defined later in the array take precedence, so place your class rule at the end if needed. Additionally, some extensions inject their own syntax highlighting which might bypass standard TextMate rules. Disable recent extensions to isolate conflicts. If you are working with a specific language like TypeScript, ensure the language server is not enforcing its own styles via extension settings. Always backup your settings.json before making extensive changes to avoid losing custom configurations.
Frequently Asked Questions
How do I reset my token color customizations?
Delete the editor.tokenColorCustomizations block from your settings.json file entirely. This restores the default behavior of the currently selected color theme. Restarting Visual Studio Code is usually unnecessary as the editor reads settings dynamically upon file save.
Can I change class names per workspace instead of globally?
Yes, by opening the workspace settings via Ctrl+Shift+P and selecting "Preferences: Open Workspace Settings (JSON)", you can apply the same JSON structure there. These settings will only affect the current project folder and override global user settings.
What if my theme uses a different scope for classes?
Use the Inspector Scopes tool by pressing Ctrl+Shift+I on a class name. If the scope is different, simply update the scope string in your JSON rule to match the inspected value exactly.
Does this work for interfaces and enums too?
No, those have distinct scopes. Interfaces typically use entity.name.type.interface and enums use entity.name.type.enum. You must add separate rules in the textMateRules array for each type you wish to style differently.
Why is my hex code showing up as black?
Ensure you include the hash symbol (#) before the six-digit hex code. Without it, VS Code may interpret the string incorrectly or ignore it. Also, verify that the color contrast is sufficient against the background theme color.