How to Turn Off Grayed Out Code in VSCode: Simple Step-by-Step Fix

1. Introduction: Why VSCode Grays Out Code

When working in Visual Studio Code (VSCode), you might have noticed that some parts of your code appear faded or gray. This usually indicates unused variables, inactive code, or unreachable statements. While helpful for debugging, it can be visually distracting — especially when you’re trying to focus on the logic of your program.
In this detailed guide, you’ll learn how to turn of grayed out code in vscode, what causes it, and how to adjust it for specific languages.

2. What Does “Grayed Out Code” Mean in VSCode?

VSCode highlights certain parts of your code in gray when the editor or an extension marks them as inactive or unnecessary. Common reasons include:

• Unused imports or variables.
• Conditional blocks that aren’t currently active.
• Deprecated or unreachable code.
• Code regions ignored by preprocessors (like #if in C++ or C#).

This behavior is controlled by both VSCode’s editor settings and the language extensions you’ve installed.

3. Why You Might Want to Turn It Off

While the graying feature is useful, there are several valid reasons to disable it:

• It can make your code look messy or cluttered.
• It reduces text contrast, which strains your eyes.
• It sometimes marks code as “inactive” incorrectly.
• It may clash with your custom theme or color preferences.

Luckily, you can easily change this behavior with a few quick settings.

4. The Fastest Way to Turn Off Grayed Out Code

Here’s the quickest way to remove gray or dimmed text in VSCode:

Step 1: Open Settings

• Press Ctrl + , (comma) or
• Go to File → Preferences → Settings.

Step 2: Search for “Unused”

In the top search bar, type “unused”.

Step 3: Disable Unused Code Highlighting

Find the setting:

Editor › Unused: Enabled

Uncheck this option.
Once you do that, inactive or grayed-out code will immediately appear in normal color.

5. Turning Off Grayed Out Code Using settings.json

For developers who prefer direct configuration, you can turn off the dimming effect by editing your settings.json file.

Steps:

1. Open the Command Palette (Ctrl + Shift + P).
2. Type “Preferences: Open Settings (JSON)”.
3. Add the following line: "editor.unused.enabled": false
4. Save and reload VSCode (Ctrl + Shift + P → “Reload Window”).

This will completely turn off the grayed-out effect for all files and languages.

6. Adjust Opacity Instead of Turning It Off

If you don’t want to fully disable the feature, you can adjust how visible the gray effect is.

Add this line in settings.json:

"editor.unused.opacity": 1

Setting it to 1 means inactive code will look normal (full color).
You can also use values like 0.7 or 0.8 if you still want a softer, less noticeable effect.

7. Disable Grayed Out Code for Specific Languages Only

You may want to keep the feature for some languages but disable it for others (for example, disable for Python but keep for TypeScript).

Here’s how you can do it:

Example for JavaScript and TypeScript:

"[javascript]": {
    "editor.unused.enabled": false
},
"[typescript]": {
    "editor.unused.enabled": false
}

Example for Python:

"[python]": {
    "editor.unused.enabled": false
}

Example for C#:

"[csharp]": {
    "editor.unused.enabled": false
}

This gives you more flexibility and keeps your workspace organized.

8. When Preprocessor Directives Cause Graying

If you’re coding in C# or C++, grayed-out text often appears inside conditional directives like this:

#if DEBUG
Console.WriteLine("Debug build");
#else
Console.WriteLine("Release build");
#endif

When “DEBUG” is not active, that section becomes grayed out.
To stop this dimming behavior:

1. Open Settings.
2. Search for “Dim inactive regions”.
3. Uncheck it (especially under the C# or C++ extension).

9. For Python Users: Stop Pylance from Dimming Code

Python developers often face gray text due to the Pylance language server.
Pylance highlights unused imports, variables, or unreachable code in gray.

To disable it:

1. Open Settings (Ctrl + ,).
2. Search for “Pylance type checking mode”.
3. Set it to off or basic.

Alternatively, in settings.json:

"python.analysis.typeCheckingMode": "off"

This removes the graying caused by Pylance without affecting your editor’s syntax highlighting.

10. Adjusting Colors Through Theme Customization

Sometimes, themes themselves make code appear dimmer.
To override this, you can force full opacity in workbench color customizations.

In your settings.json, add:

"workbench.colorCustomizations": {
    "editorUnnecessaryCode.opacity": "1"
}

This ensures your code is always displayed in full brightness, regardless of theme or extension settings.

11. Disable Graying Applied by Extensions

Some extensions like ESLint, IntelliCode, or SonarLint apply dimming to indicate unused or problematic code.
To find out which one is responsible:

1. Go to Extensions (Ctrl + Shift + X).
2. Temporarily disable each suspected extension.
3. Reload VSCode.

Once you find the one causing the graying, open its settings and look for a “dim unused code” option to turn it off.

12. Troubleshooting: Grayed Code Persists After Changing Settings

If the dimming persists even after changing the settings:

• Run Developer: Reload Window.
• Check if your project has a workspace-specific .vscode/settings.json file overriding your global settings.
• Try resetting your color theme to the default (“Dark+” or “Light+”).
• Restart VSCode completely.

These steps usually clear up any lingering color or highlighting issues.

13. Pros and Cons of Keeping Grayed Out Code

Before you disable the feature completely, it’s worth understanding the benefits and drawbacks.

✅ Pros (when enabled):

• Helps spot unused code quickly.
• Improves project cleanliness.
• Makes debugging and optimization easier.

❌ Cons (when enabled):

• Distracting when coding for long hours.
• Makes code hard to read in dark themes.
• Sometimes gives false warnings for dynamic code.

If the cons outweigh the pros for you, turning it off is the right choice.

14. Alternative: Hide Instead of Dimming

Instead of dimming, some developers prefer to hide inactive code regions.
Extensions like Hide Inactive Code Blocks or Better Comments allow you to collapse or hide these areas instead of graying them out.
You can find these in the VSCode Marketplace, install, and configure them in just a few clicks.

15. Summary: The Quick Way to Turn Off Grayed Out Code in VSCode

To summarize, here’s how you can quickly remove grayed-out code:

1. Go to Settings (Ctrl + ,).
2. Search for “unused”.
3. Uncheck Editor › Unused: Enabled.
4. Or add "editor.unused.enabled": false in settings.json.
5. Optionally, set "editor.unused.opacity": 1 for normal brightness.
6. Reload VSCode.

You can now enjoy a clean, consistent coding environment without distracting gray text.

Conclusion: Customize VSCode to Fit Your Style

VSCode is highly customizable, and controlling how inactive code appears is just one of its powerful personalization options. Whether you choose to turn off grayed out code, adjust its opacity, or limit it to certain languages, the key is to create a workspace that supports your productivity.
By following this guide, you can easily control your editor’s look and make VSCode more comfortable for your daily workflow.

Frequently Asked Questions

1. Why is my code grayed out in VSCode?
Because VSCode or an extension (like Pylance or ESLint) detects it as unused, inactive, or unreachable code.

2. How do I turn off the gray or dim effect in VSCode?
Go to Settings → search “unused” → uncheck Editor › Unused: Enabled, or set "editor.unused.enabled": false in settings.json.

3. My imports are gray in Python — how do I fix it?
They are unused. Either use them in your code or disable highlighting with "python.analysis.typeCheckingMode": "off".

4. Is grayed out text a bug?
No — it’s a visual feature to help identify unused code, not an error.

5. Can I make grayed code brighter instead of removing it?
Yes, set "editor.unused.opacity": 1" or use color customization with "editorUnnecessaryCode.opacity": "1".