Sublime Forum

Sidebar icons in themes

#1

I’ve taken a bit of time to figure out how sidebar icons are working in Sublime for the Soda theme, so I’m copying the content here to be of general use.

This is now a feature of Sublime Text Dev 3062. In the default theme, icons are stored in an icons directory. https://dl.dropboxusercontent.com/u/7323096/icons.zip

From there, the sublime-theme file includes this:

{
    "class": "icon_file_type",
    // layer0.texture is filled in by code with the relevant icon name
    "layer0.opacity": 1.0,
    "content_margin": [8, 8]
},
{
    "class": "icon_folder",
    "layer0.texture": "Theme - Default/icons/folder.png",
    "layer0.opacity": 1.0,
    "content_margin": [8, 8]
},
{
    "class": "icon_folder",
    "parents":
    
        { "class": "tree_row", "attributes": "expanded"] }
    ],
    "layer0.texture": "Theme - Default/icons/folder_open.png",
},
{
    "class": "icon_folder_loading",
    "layer0.texture":
    {
        "keyframes":
        
            "Theme - Default/icons/spinner7.png",
            "Theme - Default/icons/spinner6.png",
            "Theme - Default/icons/spinner5.png",
            "Theme - Default/icons/spinner4.png",
            "Theme - Default/icons/spinner3.png",
            "Theme - Default/icons/spinner2.png",
            "Theme - Default/icons/spinner1.png",
            "Theme - Default/icons/spinner.png",
        ],
        "loop": true,
        "frame_time": 0.075,
    },

    "layer0.opacity": 1.0,
    "content_margin": [8, 8]
},

Adding this to Soda should be straight forward now.

0 Likes
Customise sidebar icons
Theming ST is too hard. Theming documentation collective effort
New Beta Theme - MonokaiHaze
Latest dev update interferes wiexisting custom sidebar icons
Build 3062: Folder Icon misalignment
#2

More!

There are also three files in the “Theme - Default” directory.

  • Icon (Markup).tmPreferences

  • Icon (Source).tmPreferences

  • Icon (Text).tmPreferences

These look like this:

Icon (Markup).tmPreferences:

<?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, text.xml</string>
    <key>settings</key>
    <dict>
        <key>icon</key>
        <string>file_type_markup</string>
    </dict>
</dict>
</plist>

Icon (Source).tmPreferences

<?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</string>
    <key>settings</key>
    <dict>
        <key>icon</key>
        <string>file_type_source</string>
    </dict>
</dict>
</plist>

Icon (Text).tmPreferences

<?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</string>
    <key>settings</key>
    <dict>
        <key>icon</key>
        <string>file_type_text</string>
    </dict>
</dict>
</plist>

These seem to dictate what icon should be displayed based on the source.

0 Likes
#3

I can’t find any reference to a preference to turn icons off either, but that may be hidden?

0 Likes
#4

This looks great! Does the new API allow plugins to change the icons? This could be used to color files and folders based on git status like in Atom (new, modified etc):
f.cloud.github.com/assets/67137 … 33ad23.png

0 Likes
#5

[quote=“gregor.hoch”]This looks great! Does the new API allow plugins to change the icons? This could be used to color files and folders based on git status like in Atom (new, modified etc):
f.cloud.github.com/assets/67137 … 33ad23.png[/quote]

Unfortunately I’m unable to find any API that would allow this. The docs don’t show it and there don’t seem to be references in any of the default plugin files.

0 Likes
#6

So, this only applies to the files under the folders? Or is there a way to make the icons appear for open files?

0 Likes
#7

The icon files I’ve linked to don’t show anyway of changing the icon when open, that’s not to mean there isn’t, but the default theme doesn’t do this.

0 Likes
#8

Cool. Well I at least have things looking normal again. I will have work on custom icons later and dig into understanding the full extent of what we can do now. In general it appears fairly limited, but still cool. It is a shame that the file options are all bundled under Default.sublime-plugin. I thought they could be overridden in the theme, but that doesn’t appear to be so. You can override the icons in the theme, just not file association. Oh well, I need to get some work done now.

0 Likes
#9

Can you not use the scope to do so, like the Icon (Markup).tmPreferences stuff?

0 Likes
#10

Maybe. There might be some dynamics at work here that I don’t understand yet.

I tired to just copy the files to the theme, and then alter the scope, but no dice.

I plan on trying to create my own file types as well, maybe Icons (something).tmPreferences and use a different icon name in it. I may try this later today.

0 Likes
#11

Okay, this actually worked:

create a file Icon (Python).tmPreferences

[code]<?xml version="1.0" encoding="UTF-8"?>

scope source.python settings icon file_type_python [/code]

So a theme doesn’t have to override the defaults. You can probably just create a bunch of your own and use those instead.

0 Likes
How change of icons for images in sidebar?
Sublime text icons
#12

I wonder if a plugin dynamically change these based on if the file is dirty or not?

0 Likes
#13

Maybe if you physically control the tmPreference file and overwrite the original. I have found that I can create new file types, but I can’t override text, source, or markup. I can change the theme icon, but not alter the tmPreference files for the defaults.

0 Likes
#14

Does anyone have dark-theme compatible filetype icons they can share by chance? Also, if someone has the respective settings file they use to use the new light-color file-type icons they could also share that would be great.

0 Likes
#15

I use this for now: github.com/facelessuser/Unnamed … ster/icons. I just colored the insides. I plan on redoing them for my personal use, but this is good enough for now. Didn’t style the spinners lighter, but I don’t actually ever see them now that I have the proper icons in my theme.

0 Likes
#16

It looks amazing after replacing the default icons:

0 Likes
#17

Customising the icons:

  1. If you’re making a custom theme, place files with the appropriate names (file_type_default.png, file_type_source.png, file_type_text.png, file_type_markup.png, file_type_image.png, file_type_binary.png) either next to the .sublime-theme file, or within an icons/ subdirectory.

  2. If you want a custom icon for a particular programming language, then as facelessuser mentioned, you need to create a tmPreferences file that first associates the scope with an icon name (the above example is spot on for Python). You then need to create an actual icon for that name, such as file_type_python.png. The search location for icons is:

/file_type_python.png
/icons/file_type_python.png
file_type_python.png

This means that if you’re making a package for a specific programming language, then you can provide a sidebar icon for those files, while still allowing custom themes to override it.

0 Likes
Sublime Text 3 file icons in sidebar
Theming ST is too hard. Theming documentation collective effort
#18

jps, this looks great, thanks for the update! Is there any way to change the icons from the Python API? That would be really nice for example to color files and folders based on git status (e.g. Green icon for a new file).

0 Likes
#19

Unfortunately there’s no API to control sidebar icons etc as of 3062

0 Likes
#20

Still great… :smile:
Maybe someday. This coloring would work best with svg icons that can be dynamically styled but that might be a whole different thing.

0 Likes