Search code examples
javascriptsublimetext3color-scheme

Change color of JS Variable in Sublime 3


I'm looking for the possibility of changing the color of a JavaScript variables in Sublime 3, because at the moment they got the same color like JQuery function calls and other stuff. I'm not looking for a theme. I tried a lot in the theme file (Monokai Bright (SL).tmTheme) I actual using, but I don't find the right name and scope for variables.

Thought it was:

<dict>
  <key>name</key>
  <string>Variable</string>

  <key>scope</key>
  <string>variable</string>

  <key>settings</key>
  <dict>
  <key>foreground</key>
      <string>#000000</string>
  </dict>
</dict>

But that wasn't the right one. I searched a lot and hope someone here can help me.


Solution

  • The default JavaScript syntax that comes with Sublime doesn't have any rules for highlighting variables. However, the JavaScriptNext - ES6 Syntax package, available through Package Control, does have variable highlighting. It is scoped as variable.other.readwrite.js, but in my theme I just use the selector variable.other. However, there are other types besides readwrite, so I also have different colors for variable.other.property, variable.other.object, variable.other.class, and variable.other.constant.

    Take a look through the .tmLanguage file to see what scopes are available. Another tool I've found to be extremely useful when theming is ScopeAlways, which displays the current scope in the bottom bar.