Иконки файлов в сайдбаре Sublime Text 3

Установил новую тему для Sublime Text 3 только ради иконок файлов в Sidebar. Но на деле оказалось всё не так радужно. Как должно быть:

Как у меня:

Да и иконка .sass не та:

То есть Sublime Text не понимает эти типы файлов. И во всех темах есть этот косяк. Главный трабл в том что я специально скачал чистую portable версию, и даже в ней не работает. Да и вообще есть несоответствия с многими иконками. В чём может быть проблема?

Ответ

Во-первых, скачаем выбранную Вами Material Theme, перейдём в папку icons и посмотрим, какая иконка соответствует JavaScript.

Такая, как на Вашем скриншоте. В истории коммитов копаться неохота, однако предположу, что девелоперы сменили иконку, забыв отразить это в скриншотах на заглавной.
Если Вам не нравятся предлагаемые разработчиками тем, можете установить вручную в качестве иконки для используемых Вами языков программирования/разметки и прочих файлов любое изображение.
Для начала переместим требуемые изображения в какую-нибудь папку. Ссылки на некоторые наборы иконок выложены в данном треде на форуме Sublime Text, мы воспользуемся файлами из Material Theme, пусть для Sass там выбрана на мой взгляд неудачная иконка. Preferences → Browse Paskages... → User. Создаём папку Theme - Default, если она ещё не создана. Название для папки не я придумал, оно обычно используется. Копируем туда всё — или только изображения, которые пригодятся, — из папки icons Material Theme.
Preferences → Browse Paskages... → User → Theme - Default → создаём папку Preferences, в которой будут располагаться файлы, о которых зайдёт речь ниже. В один всё у меня вместить не получается, придётся с каждой иконкой связывать отдельный файл с расширением tmPreferences

Ruby
В новый файл Ruby.tmPreferences вставляем XML-конструкцию ниже, и сохраняем его:
scope source.ruby settings icon Theme - Default/file_type_ruby
Между вторыми тегами указывается путь к файлу иконки и его имя без расширения.

Sass
Предположу, что Вы получили неудовлетворительные результаты, поскольку не подключили отсутствующий по умолчанию в сборке Sublime Text 3 синтаксис Sass. Через Package Control устанавливаем плагин, который в Package Control (имена плагинов в репозиториях, на сайте Package Control и самом Package Control могут отличаться) называется просто Sass
Теперь можно связывать sass-файлы с иконками. Создаём файл Sass.tmPreferences и вставляем в него код.
scope source.sass settings icon Theme - Default/file_type_sass

Markdown
Здесь между первыми тегами недостаточно по аналогии вписать source.markdown или source.md, и такое может случиться для других языков разметки/программирования. Потребуется вставить «область видимости», scope. Как её получить, я очень подробно расписал в данном ответе. Итак, достаём область видимости:

Сколько бы записей в ней не содержалось, нас интересует только первая, text.html.markdown.gfm, которую мы и вставляем в файл Markdown.tmPreferences
scope text.html.markdown.gfm settings icon Theme - Default/file_type_markdown

Чтобы не вставлять код каждый раз вручную, рекомендую скачать набор из 70 tm.Preferences файлов для распространённых компьютерных языков

Изображения
К примеру, у бинарных, исполняемых файлов или картинок области видимости посмотреть не получится. Чтобы изменить им иконки, необходимо добавить файлы со следующими названиями в папку, где лежит файл активной темы с расширением tmTheme, у меня он располагается по пути 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
Из названий понятно для чего они предназначены. Напротив наших изображений теперь будет стоять иконка с названием file_type_image.png

Если сделали всё по данной инструкции, у файлов с соответствующими расширениями в сайдбаре должны появиться вот такие иконки.


Буквально во всех темах, которые мне доводилось увидеть, за редким исключением используются одни и те же иконки. В светлых темах многие из них плохо видны, допустим, тот же оранжевый значок JS на жёлтом фоне.

А иконки, взятые со сторонних сайтов, выглядят не очень красиво. Легко сменить цвета самому можно, например, в GIMP при помощи функции Hue-Saturation. Открываем в этом графическом редакторе файл иконки → Tools → Color Tools → Hue-Saturation, и двигаем слайдеры, — изменение цвета достигается перемещением ползунка Hue

После того, как подобрали колор, яркость и насыщенность, File → Overwrite file_type_%Ваш тип файла%.png

Примеры изменённых мной таким образом иконок:
file_type_js.png file_type_markdown.png file_type_source.png file_type_yaml.png

Возможные баги
Если вы скачали новую тему или схему, вне зависимости от того, будете ли использовать её или нет, иконки в сайдбаре могут пропасть. В консоли при этом выдаётся примерно следующая ошибка:
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
Устраняется проблема в 2 шага:
Ctrl+Shift+P → Package Control: Remove Package → выбираем нашу тему/цветовую схему и удаляем её. Можно сообщить о проблеме разработчику темы/схемы. У меня портились файлы с расширением tm.Preferences, о которых говорилось выше. Вместо icons/file_type_ruby появлялись кракозябры.

Откройте любой tm.Preferences файл, посмотрите, есть ли там какие-то кракозябры, и если да, то сделайте массовую замену кракозябр на корректные символы в папке, где хранятся tm.Preferences файлы, с помощью поиска Ctrl+Shift+F
После данных действий иконки вновь появлялись в моём сайдбаре.