Sublime Text 3 edit color scheme values

Question

I have the following javascript code in my Sublime Text 3 Editor:

function get(db, segment_name, callback) {
  var query = {
    segment_name: segment_name
  };
}

Image:

I am using colorSchemeEditor to edit my theme's xml, since I want to change the color of the "segment_name" key in the query object above. I have some trouble changing this particular value, it does find a scope, (see answer here), but when I change the foreground color in the xml file, it does not change the color, I have changed several other colors using this technique. Here is the corresponding xml snippet the plugin says belongs to this scope:

<dict>
  <key>name</key>
  <string>ES7 Bind Operator</string>
  <key>scope</key>
  <string>source.js constant.other.object.key.js string.unquoted.label.js</string>
  <key>settings</key>
  <dict>
    <key>fontStyle</key>
    <string>italic</string>
    <key>foreground</key>
    <string>#CDD3DE</string>
  </dict>
</dict>

When I try to change the #CDD3DE value and save, it does not apply the new color. I have tried using several different syntax definitions on the file as well, including plain javascript, Javascript ES6 syntax and javascript Babel.

I have also tried editing the theme using the downloadable application in the linked answer.

Is my scope in the theme's xml wrong? Any other solutions?

Answer 1

I was able to change the color after adding 3 more listings in my themes xml file like this:

<dict>
  <key>name</key>
  <string>Object Properties</string>
  <key>scope</key>
  <string>source.js meta.group.braces.round.js meta.group.braces.square.js meta.group.braces.curly.js constant.other.object.key.js string.unquoted.label.js</string>
  <key>settings</key>
  <dict>
    <key>foreground</key>
    <string>#CDD3DE</string>
  </dict>
</dict>

<dict>
  <key>name</key>
  <string>Object Properties 2</string>
  <key>scope</key>
  <string>source.js meta.group.braces.curly.js constant.other.object.key.js string.unquoted.label.js, </string>
  <key>settings</key>
  <dict>
    <key>foreground</key>
    <string>#CDD3DE</string>
  </dict>
</dict>

<dict>
  <key>name</key>
  <string>Object Properties 3</string>
  <key>scope</key>
  <string>source.js meta.group.braces.curly meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js</string>
  <key>settings</key>
  <dict>
    <key>foreground</key>
    <string>#CDD3DE</string>
  </dict>
</dict>

This could probably be improved upon by changing the "name" key on the listings and/or consolidate the listings and maybe add more scopes to keep things consistent. The scopes added were the ones I found when editing a single javascript file.