Being a developer, I love VSCode. Using VSCode for a couple of years now, for Windows that is, was always a smooth sailing.
PS. — I design and game too. So Windows is ❤
Where the Problem began.
Shifted to Pop_OS for a project, installed VSCode and as I began writing code, I noticed my editor tab having ‘multiple color blocks’. The blank area without any code/text had a different (darker) color than the area having the code/text.
Putting computer to sleep and waking it introduced another issue. VSCode terminal and code preview areas were filled with noise… white noise. No metaphors here. Actual white noise.
Counter Checking with Windows
After this, I booted my Windows installation to check if its the new update but everything worked fine. No color blocks, no noisy white dots.
What I found.
This Linux issue is occuring on almost all the distros I tried:
- Ubuntu 18.04 LTS
- Pop-OS 19.10 (Nvidia and Intel/AMD)
- Elementary OS
- Mint... and quite a few more.
Why is it happening?
Though I figured out a fix, I couldn't figure out the depth of why or how it was occuring. It sure is related to how app on linux renders colors and color profile, as the fixes include color correct rendering and forcing a color profile.
If you find something else being the reason, please do respond to the post with your findings.
The Solution. (VSCode v1.43.x & Later)
Microsoft is keen on messing with the solutions with every update. For now:
- In VSCode, open Command Palette (Ctrl+Shift+P) and search for "Configure Runtime Arguments". Select it and press Enter.
- There should already be an entry:
"disable-color-correct-rendering": true
Just remove that entry or comment it out with //.
If there are any more entries, do remove those.
BOOM! Issue fixed.
For those of you, willing to read the whole process, here is a thorough compilation of the issue:
Link to my Medium story
Legacy/Older Solutions (Work for versions earlier than 1.43.x)
This issue is a weird rendering issue with VSCode on Linux. I found a very simple fix:
- In VSCode, open Command Palette (Ctrl+Shift+P) and search for "Configure Runtime Arguments". Select it and press Enter.
- There should already be an entry:
"disable-color-correct-rendering": true
Add a comma (,) after this entry. Even if there is no entry, just put a code block ({}) and follow along.
- Paste in
"disable-hardware-acceleration": true,
(in the next line, if there is already an entry) inside the same code block.
- Save the file. Restart VSCode
BOOM! Issue fixed.
Still Not Fixed?
The issue might still not be fixed for everyone (as it wasn't for me). Just follow along the steps:
- Open Command Palette (Ctrl+Shift+P) and search for "Configure Runtime Arguments" and press Enter. Now just add this line at the end
"force-color-profile": "srgb",
It will display a zig-zag line underneath the entry and say "Property force-color-profile is not allowed.". Just ignore it and save the file.
- Restart VSCode. Voila!!! Issue is fixed.
Top comments (1)
Second one solved my issue on Ubuntu 20.4. Thanks