Sublime Text 2: Custom Sidebar Theme

Published on , in Tooling with no comments .

For a couple of months now I’ve been using Sublime Text 2. If you don’t know it then you should definitely check it out. In my opinion (and in many others), it’s the best text editor out there.

It’s beyond the scope of this post to go into any details of why it’s so good but one of the main reasons is it’s flexibility. You can customise pretty much anything. It’s settings files are JSON format text files so you can view all the defaults and them override them in your own user settings file and even apply settings on a per file type and per project basis.

Another reason it’s so flexible is that you can download and install plugins. These plugins can range from code snippets for Laravel or jQuery, to removing trailing white space and looking up documentation for PHP and other languages. You can also easily create your own snippets.

I love everything about Sublime Text (well, almost) and can’t wait for the arrival of version 3, currently in beta.

The only thing I’d say I don’t like about it is the appearance of the sidebar in the default theme. Sublime Text ships with a few different colour schemes. My personal preference these days is a dark theme. By default Sublime Text uses a very nice dark colour scheme so it’s the one I’ve stuck with. However the default theme uses a light sidebar which doesn’t really fit the default colour scheme (or any dark colour scheme) that well since it has a very light grey background colour.

Thanks to the immense flexibility of Sublime Text we can fix this easily.

One thing you can do is simply download and install an alternative theme. The Soda theme would appear to be the most popular but many others are available.

With the exception of the sidebar appearance, I’m perfectly happy with the default theme so I’m not going to use another. Instead I’ll override the default theme styles for the sidebar.

Just like the settings, these are also JSON format text files. The file for the default theme can be found by going to the “Packages/Theme - Default” directory and looking for a file called “Default.sublime-theme”. What you could do is copy and paste the entire thing into the “Packages/User” directory but I’d recommend just to override the necessary styles.

To change the sidebar to better fit the dark colour scheme I have the following lines in my file.


[
    // Close Icon
    {
        "class": "close_button",
        "layer0.texture": "Theme - Default/light_x.png",
        "layer0.opacity": 0.5,
        "layer0.inner_margin": 0,
        "content_margin": [8, 8]
    },
    {
        "class": "close_button",
        "attributes": ["dirty"],
        "layer0.texture": "Theme - Default/dirty_indicator.png"
    },
    {
        "class": "close_button",
        "attributes": ["hover"],
        "layer0.opacity": 1.0
    },
    // Document Tree
    {
        "class": "tree_row",
        "layer0.texture": "Theme - Default/row_highlight_wide.png",
        "layer0.opacity": 0.0,
        "layer0.inner_margin": [1, 1]
    },
    {
        "class": "tree_row",
        "attributes": ["selected"],
        "layer0.opacity": 0.8
    },
    // Main sidebar styles
    {
        "class": "sidebar_container",
        "layer0.tint": [38, 38, 38],
        "layer0.opacity": 1.0,
        "layer0.draw_center": false,
        "layer0.inner_margin": [0, 0, 1, 0],
        "content_margin": [0, 0, 0, 0]
    },
    {
        "class": "sidebar_tree",
        "row_padding": [8, 3],
        "indent": 12,
        "indent_offset": 17,
        "indent_top_level": false,
        "layer0.tint": [23, 23, 20],
        "layer0.opacity": 1.0,
        "dark_content": false
    },
    {
        "class": "sidebar_heading",
        "color": [130, 130, 130],
        "font.bold": true,
        "shadow_color": [130, 130, 0],
        "shadow_offset": [0, 0]
    },
    {
        "class": "sidebar_heading",
        "parents":
        [
            { "class": "tree_row", "attributes": ["selected"] }
        ],
        "shadow_color": [160, 174, 192]
    },
    {
        "class": "sidebar_label",
        "color": [193, 193, 193]
    },
    {
        "class": "sidebar_label",
        "parents": [{"class": "tree_row", "attributes": ["selected"]}],
        "color": [242, 242, 242]
    }
]

An image of my custom sidebar for Sublime Text
The before (left) and after (right) shots the the sidebar. Much better, don't you agree?

Color values are RGB. I’ve set the background colour of the sidebar to match the background of the tabs by adding “layer0.tint” : [23, 23, 20] (see line 47). I’ve also used a different close button icon (shown next to the open file list which isn't in this screenshot) since the default doesn’t work well with a dark bakground colour. I’m also using a blue version of the image used to highlight the selected item in the sidebar document tree, although the default grey image still looks good. The text colour has been changed to match the colours used in the tabs - a light grey normal state, and a lighter grey/off white for the selected item.

Do you use sublime text? If so what are your favourite plugins and themes? If not then why not give it a try?

Leave a Comment