Skip to main content

The best Sublime Text theme

Posted in Design and Development

I’ve recently started using Operator Mono as my coding font and was frustrated to learn that I couldn’t use it with any old colour scheme – it has to be one that supports italics.

So the hunt was on to find a colour scheme that felt comfortable and also supported italics. I tried a whole bunch and the colour scheme I landed on was one that felt a bit nostalgic: Monokai Pro. Monokai is the default font on Sublime Text and was everywhere back in 2011, when it seemed like the whole world moved to Sublime.

Monokai Pro takes Monokai and adds italics and a bunch of different colour filters:

  • Purple (the default theme)
  • Blue (‘Octagon’)
  • Browny-red (‘Ristretto’)
  • Grey (‘Spectrum’)
  • Green (‘Machine’)
  • Yellow (‘Classic’)

They all look great, but Spectrum feels most in keeping with the rest of macOS so it’s my favourite.

Colour scheme does not necessarily equal theme

Sublime Text is still my text editor of choice and the colour scheme only affects the main code editor window. The rest of the user interface (sidebar, status bar, tabs, etc.) is covered by a theme.

I’ve used One Dark theme, Spacegrey and Spaceblack, but a few years ago I settled on Ayu Mirage. But since macOS Mojave landed with Dark Mode, that blue tinge of Ayu hasn’t felt just right.

Like Goldilocks, I’m a bit of a fuss-pot, so aside from italics support, there are a few things I want from a theme:

  • A dark grey background without much in the way of colour – I want it to feel like my other Dark Mode apps on macOS
  • Icons in the sidebar/file-tree make it feel too busy, so if the theme uses these I want to be able to turn them off
  • Arrows (preferably chevrons) instead of folder icons to represent folders
  • Control over the sidebar spacing, font size and ideally the font itself
  • No old-Chrome style sloping tabs – they always felt out of place on Chrome, never mind being aped by other apps

The contenders

I still really like Ayu, I just want a grey variant. And the option to turn sidebar icons off. And arrows instead of folder icons in the sidebar…

Brogrammer sounds awful but is actually quite a nice setup. But there are no options to turn off those sidebar file icons, the tabs take up too much space and the red and white highlight colours are too in-your-face.

Predawn nearly made it as it’s more customisable, but an option to make that weird peach colour go away would be lovely.

The winner

I should read documentation more. As I’ve said, I like Monokai Pro a lot, but I totally missed that it was a theme, not just a colour scheme! It turns out it’s quite a theme, too:

  • The colour filters listed above carry through to the whole UI – very cohesive!
  • You can choose the sidebar font, its size and spacing
  • You can turn off icons in the sidebar
  • The Spectrum theme feels very in keeping with the rest of my OS in Dark Mode
  • It has triangles rather than chevrons to indicate folders, but I can forgive it that

In case you’re interested, here are the settings I’m using:

"font_face": "Operator Mono Light",
"monokai_pro_minimal": false,
"monokai_pro_file_icons": false,
"monokai_pro_file_icons_monochrome": true,
"monokai_pro_highlight_open_folders": false,
"monokai_pro_sidebar_row_padding": 2,
"monokai_pro_sidebar_font_size": 14,
"monokai_pro_label_font_size": 12,
"monokai_pro_sidebar_lighter": true,
"monokai_pro_small_scrollbar": true,
"monokai_pro_ui_font_face": "SF Compact Text Regular",
"monokai_pro_style_title_bar": true,
"monokai_pro_panel_font_size": "16",
"monokai_pro_sidebar_headings": false

Accessibility in your inbox

I send an accessibility-centric newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Images as the first thing in a button or link

    If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.

  2. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.