Fixing VSCode Color Bug on Linux

Being a developer, I love VSCode. Due to my tendency to overprepare, I always checklist before beginning any project. 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 ❤

Is VSCode a good code editor?

For a code editor, VSCode is among the best you can find. As for me, its the best tool for my developer self. Coming from loaded IDEs such as PyCharm and WebStorm, VSCode feels so much more versatile and light weight. Don’t get me wrong, JetBrains did an amazing job with its IDEs. They might probably be the last IDEs you’ll ever need for development.

But, I like to make my things a bit more personal. The extensions on VSCode allow so many features that I almost never miss IDEs. The level of customization you can do is also ming blowing. Themes, intellisense, adding compilers, extensions, even font selection… Everything just flows. 👌

Where the Problem began.

Recently for a startup project, I had to shift to Linux for code development. Since the project had quite a few dependancies and was to run on custom Linux, I decided to get a bootable copy of Linux for myself. Testing about 11 Linux distros from “Best Looking” to “Best Experience”, I decided on Pop-OS as my final distro. After booting to linux, I immediately installed VSCode, set-it up and began wiritng code, I noticed my editor tab having ‘multiple color blocks’. The blank area without any code/text (I tested both code snippets and markdown files) had a different (dark) color than the area having the code/text.

Different Color block in blank areas

I thought it might be some random issue so I gave the machine a quick reboot. Yet it was still there.

As soon as I opened the terminal in VSCode, it also had that weird color shifted block/area.

I put my laptop to sleep, got on my phone to make some calls to my developer friends only to find out that they were experiencing the same with no solution.

Same issue with different theme

I decided to go throught the internet and VSCode issue reports myself as it was pretty annoying. Voila! As I woke my laptop from sleep, the VSCode terminal and code preview areas were filled with noise… white noise. No metaphors here. Actual white noise.

Noisy White Pattern with color shifts still happening

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.

No Issues on Windows.

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

The different (darker) color blocks are the same color as the background color of the extensions description (highligted in white rectangles).

Notice the color shifts in blocks

Yet it doesn’t replicate it on Windows.

No Shift in Windows.

But, this issue is not present in Material Theme (Default option in extension).

No color shifts.

Why it is happening?

I couldn’t figure out the depth of why or how it was occuring but it sure is related to how app on liux 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 story with your findings.

The Solution. (VSCode v1.43.x & Later)

Microsoft is keen on messing with the solutions with every update. For now:

1. In VSCode, open Command Palette (Ctrl+Shift+P) and search for “Configure Runtime Arguments”. Select it and press Enter.
2. There should already be an entry:

"disable-color-correct-rendering": true

Just remove that entry.

• If there are any more entries, do remove those.

BOOM! Issue fixed.

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:

1. In VSCode, open Command Palette (Ctrl+Shift+P) and search for “Configure Runtime Arguments”. Select it and press Enter.
2. 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.

3. Paste in

"disable-hardware-acceleration": true,

(in the next line, if there is already an entry) inside the same code block.

4. Save the file. Restart VSCode

BOOM! Issue fixed.

Link to original solution.

Still Not Fixed?

The issue might still not be fixed for everyone (as it wasn’t for me). Just follow along the steps:

1. Open Command Palette (Ctrl+Shift+P) and search for “Configure Runtime Arguments” and press Enter.
2. 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.

3. Restart VSCode.

Voila!!! Issue is fixed.