Sublime Text 3 sidebar file icons

First, download the Material Theme you have selected, go to the icons folder and see which icon corresponds to JavaScript.

Such as in your screenshot. In the history of commits, reluctance to dig, but I suppose that the developers changed the icon, forgetting to reflect this in the screenshots on the capital one.

If you don’t like the themes suggested by the developers, you can manually set any image as an icon for the programming / markup languages ​​and other files you use.

To begin, move the required images to a folder. Links to some sets of icons are laid out in this thread on the Sublime Text forum, we will use the files from the Material Theme , even if the unsuccessful icon is selected for Sass . Preferences → Browse Paskages... → User . Create a folder Theme - Default , if it has not yet been created. The name for the folder is not I came up with, it is usually used. We copy everything there - or only images that are useful - from the icons folder Material Material Theme.

Preferences → Browse Paskages... → User → Theme - Default → create the Preferences folder, which will contain the files that will be discussed below. I can't fit everything into one, I’ll have to link a separate file with the tmPreferences extension with each icon.

Ruby

Ruby.tmPreferences XML construct below into the new Ruby.tmPreferences file, and save it:

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>scope</key> <string>source.ruby</string> <key>settings</key> <dict> <key>icon</key> <string>Theme - Default/file_type_ruby</string> </dict> </dict> </plist> 

Between the second <string></string> tags, the path to the icon file and its name without extension are indicated.

Sass

I will assume that you received unsatisfactory results, because you did not connect the Sass syntax, which is absent in the Sublime Text 3 assembly by default. Through Package Control, install the plugin , which in the Package Control (the names of the plugins in the repositories, on the Package Control website and the Package Control itself may be different) is simply called Sass .

Now you can associate sass files with icons. Create the Sass.tmPreferences file and paste the code into it.

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>scope</key> <string>source.sass</string> <key>settings</key> <dict> <key>icon</key> <string>Theme - Default/file_type_sass</string> </dict> </dict> </plist> 

Markdown

Here, between the first <string></string> tags it is not enough to write source.markdown or source.md by analogy, and this can happen for other markup / programming languages. You will need to insert the "scope", scope. How to get it, I described in great detail in this answer. So, we get a scope:

No matter how many records it contains, we are only interested in the first one, text.html.markdown.gfm , which we insert into the Markdown.tmPreferences file:

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>scope</key> <string>text.html.markdown.gfm</string> <key>settings</key> <dict> <key>icon</key> <string>Theme - Default/file_type_markdown</string> </dict> </dict> </plist> 

In order not to insert the code every time manually, I recommend downloading a set of 70 tm.Preferences files for common computer languages .

Images

For example, binary, executable files or images of the visibility area will not work. To change their icons, you need to add files with the following names to the folder where the file of the active theme with the tmTheme extension is tmTheme ; I have it in the path Preferences → Browse Paskages... → User .

 file_type_binary.png file_type_default.png file_type_image.png file_type_markup.png file_type_source.png file_type_text.png 

From the names it is clear what they are for. Opposite our images will now be an icon with the name file_type_image.png

If you have done everything according to this manual, the following icons should appear in the files with the corresponding extensions in the sidebar.

Literally in all the themes that I have seen, with rare exceptions, the same icons are used. In light themes, many of them are poorly visible, for example, the same orange JS badge on a yellow background.

And icons taken from third-party sites do not look very nice. You can easily change colors yourself, for example, in GIMP using the Hue-Saturation function. In this graphic editor, open the file → Tools → Color Tools → Hue-Saturation , and move the sliders - the color change is achieved by moving the Hue slider:

After you have selected color, brightness and saturation, File → Overwrite file_type_%Ваш тип файла%.png .

Examples of icons changed by me like this:

 file_type_js.png file_type_markdown.png file_type_source.png file_type_yaml.png 

Possible bugs

If you downloaded a new theme or scheme, regardless of whether you use it or not, the icons in the sidebar may disappear. In the console, the following error is displayed:

 Errors parsing theme: Rule is missing a class name Unable to decode Packages/User/Theme - Default/arrow_down_over.png pre session restore time: 0.3078 

The problem is eliminated in 2 steps:

1. Ctrl + Shift + P → Package Control: Remove Package → select our theme / color scheme and delete it. You can report a problem to the developer of the topic / scheme.
2. My files with tm.Preferences , mentioned above, have been tm.Preferences . Instead of icons/file_type_ruby , cracks appeared.

Open any tm.Preferences file, see if there are any krakozyabra there, and if so, make a mass replacement krakozyabr the correct characters in the folder where the tm.Preferences files are stored, using the search Ctrl + Shift + F.

After these actions, the icons reappeared in my sidebar.