Olivier Lacan

Software bricoleur, word wrangler, scientific skeptic, and logic lumberjack.

Increasing the Sidebar Font Size in Sublime Text

Written on August 09, 2016 in Orlando, Florida

I still use Sublime Text. If you do too, great, I'm sure you love it. That said if you own a screen larger than 13" it's very likely you find the default font size in the sidebar madeningly small.

I used to wear glasses with a very strong prescription. The sidebar font size in Sublime drove me nuts because it's one of those things so clearly created by someone who has excellent vision — or someone who just doesn't know what's good for them. Squinting at a screen is good for no one.

Last year I had LASIK. No more glasses. Near "perfect" vision. Still, the Sublime Text sidebar font size gives me headaches. On this 9th day following the anniversary of my bionic eyes, let's fix this damn sidebar for good.

PackageResourceViewer

This step assumes you have Package Control installed. If you don't, go do it, trust me, you're missing on a world of Sublime goodness.

It appears that the files we need to modify (at least in Sublime 3) are now zipped and not as easy to edit as they were in Sublime 2. If you're still on Sublime 2 the file names should be the same and you probably won't need this step.

On Sublime 3, run Shift + Command/Control + P. Select Package Control: Install Package, then type PackageResourceViewer and press Enter to install it.

Screenshot of how to open the Install Package mode

Now that it's installed, you can summon PackageResourceViewer with the prv command inside of the Shift + Command/Control + P prompt.

Open Resource

Let's open the resource we need to modify in order to fix this damn sidebar. First Shift + Command/Control + P, then type prv open and Enter.

Screenshot of how to run prv open

You should see a list of resources. At this point your current theme name is going to matter a lot. If you're using the default theme (you animal!) you can just type Default.sublime-theme and Enter to modify that. If you're anything like me, you have a roster of different themes that you rotate through. I use the Themr package to list and switch themes, so before remembering which theme I was currently using I had to check Themr's List themes command. That said one quick scroll through your user preferences (Command/Control + .) and you should be able to figure out the name of the theme you're using.

When you know for sure which theme you're using, type its name in the prv open listing and it should filter it down to a few results. You're looking for a .sublime-theme file. I'm using Sodarized Dark. So first I had to open the Theme - Sodarized directory, then select the Sodarized Dark.sublime-theme file.

Screenshot of how to open the Install Package mode

Screenshot of how to open the Install Package mode

If you pick the wrong file, the final step will have no immediate effect so it'll be easy to come back to this one and try a different file.

Modifying the Theme

Screenshot of an open .sublime-theme file

We're almost done! Wooh! Use your trusty old Command + F to find the sidebar_label property. This is what defines the style for the text label that displays file and directory names in the sidebar.

Screenshot of the sidebar_label property

To start adjusting the font size you'll need to add a new property called "font.size".

Before I changed it, my Sodarized Dark sidebar_label settings looked like this:


1
2
3
4
5
6
{
    "class": "sidebar_label",
    "color": [52, 106, 127],
    "shadow_color": [0, 0, 0],
    "shadow_offset": [0, -1]
}

After, they looked like this:


1
2
3
4
5
6
7
{
    "class": "sidebar_label",
    "color": [52, 106, 127],
    "shadow_color": [0, 0, 0],
    "shadow_offset": [0, -1],
    "font.size": 16
}

Don't forget to add a comma (,) at the end of the previous property's line (shadow_offset in this case) otherwise you'll cause a syntax error.

Sweating the Details

I recommend playing with the font.size value. I settled on 16 but only after messing with the sidebar_tree property's row_padding values that determine the padding (spacing) within each sidebar row.

I also found that changing them from their default value of [8, 3] to [8, 5] made the sidebar rows much easier to read.

I'd recommend making a backup of the original values. Otherwise you can always remove the Theme package you were modifying and re-install it from Package Control. That should restore the default theme settings.

My sidebar before:

Screenshot of my sidebar using the default settings

My sidebar after:

Screenshot of my sidebar using the improved settings

It may not look like much, but in the context of a larger screen, it matters and my eyes thank me for spending the time to finally address this issue.

Conclusions

This post was drawn from personal frustration and it's very much an expansion of this excellent StackOverflow response. I have to admit that it's a bit baffling how difficult this ordeal was to accomplish such a basic change that would surely benefit many Sublime Text users. If there's a much simpler way to achieve this (using a simple Package perhaps) then let me know and I'll be glad to shorten this.

In the meantime, remember that it's important to take some time to chip away at the rough edges of your tools every day. You don't need to switch editors because something isn't perfect in the one you're using. You can often find solutions that don't involve uppending your entire workflow for a few weeks.

That said, there should be a breaking point. I could have switched to Atom for less, and I have. I just haven't found the productivity equilibrium to satisfy me in another editor yet. That doesn't mean it won't happen.