Hey,

Can I change the opacity of those trailing spaces on the left side? I want to make them a bit more darker so they’re barely visible. (but still visible)

This is defined somewhere in the theme - so you would have to fork your theme and change that colour.

Theme or color scheme?

Color scheme,
the key should be “invisibles”…
for example in Monokai color scheme it’s:

    <key>invisibles</key>
    <string>#3B3A32</string>

[quote=“Orlmente”]Color scheme,
the key should be “invisibles”…
for example in Monokai color scheme it’s:

    <key>invisibles</key>
    <string>#3B3A32</string>

[/quote]

Tried, no luck. I’m currently using Brogrammer theme gist.github.com/Aristona/5333530

I’ve tried plently of other themes and color schemes, it always looks the same. Perhabs there is a ST3 related configuration somewhere that is overriding scheme values?

I guess there is no other way?

It can be done but it’s not trivial. I’ve only tested this in ST2 but it works well there:

1. Add new space and tab scopes to your color scheme file (*.thTheme). Here are mine:

<dict>
   <key>name</key>
   <string>Whitespace: spaces</string>
   <key>scope</key>
   <string>meta.whitespace.space.leading, meta.whitespace.space</string>
   <key>settings</key>
   <dict>
      <key>foreground</key>
      <string>#707070</string>
   </dict>
</dict>
<dict>
   <key>name</key>
   <string>Whitespace: tabs</string>
   <key>scope</key>
   <string>meta.whitespace.tab.leading, meta.whitespace.tab</string>
   <key>settings</key>
   <dict>
      <key>foreground</key>
      <string>#555555</string>
   </dict>
</dict>
<dict>
   <key>name</key>
   <string>Whitespace: trailing</string>
   <key>scope</key>
   <string>meta.whitespace.space.trailing, meta.whitespace.tab.trailing</string>
   <key>settings</key>
   <dict>
      <key>foreground</key>
      <string>#FFC700</string>
   </dict>
</dict>

This makes leading and interstitial spaces and tabs a light grey, and trailing spaces and tabs orange (for visibility). You can change your colours to suit here, and/or change the opacity by adding an alpha to the hex colours (eg #70707040).

2. Now you have to add detection for these scopes to each indiviual language syntax file that you use, unfortunately. Here’s an example for JavaScript:

<dict>
   <key>match</key>
   <string>^ +</string>
   <key>name</key>
   <string>meta.whitespace.space.leading</string>
</dict>
<dict>
   <key>match</key>
   <string> +$</string>
   <key>name</key>
   <string>meta.whitespace.space.trailing</string>
</dict>
<dict>
   <key>match</key>
   <string> +</string>
   <key>name</key>
   <string>meta.whitespace.space</string>
</dict>
<dict>
   <key>match</key>
   <string>^\t+</string>
   <key>name</key>
   <string>meta.whitespace.tab.leading</string>
</dict>
<dict>
   <key>match</key>
   <string>\t+$</string>
   <key>name</key>
   <string>meta.whitespace.tab.trailing</string>
</dict>
<dict>
   <key>match</key>
   <string>\t+</string>
   <key>name</key>
   <string>meta.whitespace.tab</string>
</dict>

These have to be added as the first matches in the syntax array (near the top of the file). They could probably be improved but they work pretty well in JavaScript. You’ll have to tweak them for other languages, of course.

I don’t know if language syntax files can be overridden from the /User/ directory, so I believe this has to be done directly in each /Package//.tmLanguage file. But be careful if you update ST, as that will replace your changes.

The process should be the same in ST3, except you’ll have to unpack the appropriate /Packages/.sublime-package files.