[Bug] color inconsistency after VSCode v1.43.0 & v1.43.1

[AbdelrahmanHafez]

Sample code

const adventurer = {
  name:'Alice',
  cat: {
    name:'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());

Filename and Language selected

index.js JavaScript

Atom Original theme Screenshot

VSCode, 5 months ago

VSCode theme Screenshot

VSCode, now

Versions used

• VSCode version: 1.43.1
• Theme version: 2.2.0

Extra information

So, both screenshots are from VSCode. The one on top is taken 5 months ago, the object keys color is grey, the object itself is colored red when it's followed by a dot notation.

I think it may be related to #119, but setting "editor.semanticHighlighting.enabled": false didn't seem to fix the issue for me, and even after both VSCode, and the extension updates, the issue still occurs.

Not sure if the official Dark One theme in Atom has changed, or this is not intended.

[akamud]

Hi @AbdelrahmanHafez, thanks for opening the issue. Indeed, this is something that Atom has changed over the years, as you can see from this screenshot:

My goal has always been to provide an experience as close to Atom as possible. So a side-effect is that this has also changed in VSCode 2.2.0. If you want to bring back the old behavior, you can customize the colors as stated in the README. The correct scope for this change is this:

  "editor.tokenColorCustomizations": {
    "[Atom One Dark]": {
      "textMateRules": [
        {
          "scope": "meta.object-literal.key.js",
          "settings": {
            "foreground": "#ABB2BF"
          },
        }
      ]
    }
}

You should see it as grey again:

The other differences, like in console.log, may only be fixed when I support the new semanticHighlighting in a next release.

[AbdelrahmanHafez]

Thank you!

[saurookadook]

Came across this today after updating and wanted to add another suggestion to @akamud's above to change "variable.other.object.js":

"editor.tokenColorCustomizations": {
    "[Atom One Dark]": {
        "textMateRules": [
            {
                "scope": "variable.other.object.js",
                "settings": {
                    "foreground": "#E06C75"
                },
            },
            {
                "scope": "meta.object-literal.key.js",
                "settings": {
                    "foreground": "#ABB2BF"
                },
            },
        ]
    }
 },

(Thanks for pointing in the right direction, @akamud; it made finding the right thing to change very easy 🙂)

[sergeyfilimonov]

@AbdelrahmanHafez @akamud @saurookadook thank you so much!