logo

Tweaking Sublime Text themes to take advantage of Retina displays

Sublime Text already supports Retina displays on OS X, however it seems that the story is currently a bit different on Windows.

Update - Monday, November 14, 2016: To make this a whole lot easier, I’ve forked buymeasoda/soda-theme into moodmosaic/soda-theme. If you clone moodmosaic/soda-theme, it will show nicely on Retina displays on Windows.

Problem

You experience fuzzy fonts when using Sublime Text with Retina displays on Windows, even after updating to a newer version of Sublime Text.

Manual solution

The above technique has been tested with Sublime Text's Default Theme, and Soda Theme (both dark and light variants).

Soda Theme requires the following images to be excluded from the above process: tab-active, tab-hover, tab-inactive, tabset-background.

Automated solution

If done manually, this can take some time. - Here is a way to automate this with F#:

If you don't have the F# compiler and runtime, install it from here.

On a clean system without any edition of Visual Studio, the compiler, runtime, and F# Interactive will be deployed without IDE tooling.

Save the following F# program to a file:

module Sublime.Text.Windows

open System
open System.IO

type Theme = { Path : string; DpiAgnostics : string list }

let patch theme =
    Directory.GetFiles(theme.Path, "*@2x.*", SearchOption.AllDirectories)
    |> Seq.filter
        (fun candidate ->
            theme.DpiAgnostics
            |> Seq.exists
                (fun agnostic ->
                    Path.GetFileNameWithoutExtension(candidate) = agnostic)
            |> not)
    |> Seq.iter
        (fun hiDpi ->
            let lowDpi = hiDpi.Replace("@2x", String.Empty)
            File.Delete lowDpi
            File.Copy(hiDpi, lowDpi))
    ()

Assuming the above program is saved as Program.fs in X:\Tools.

You should see something like:

namespace FSI_0002.Sublime.Text.Windows
  type Theme =
    {Path: string;
     DpiAgnostics: string list;}
  val patch : theme:Theme -> unit

Once you open Sublime.Text.Windows, execute the patch function by supplying a value for theme.

Soda Theme

let sodaTheme = {
    Path = @"replace_this_with_the_soda_theme_path";
    DpiAgnostics = [
            "tab-active@2x"
          ; "tab-hover@2x"
          ; "tab-inactive@2x"
          ; "tabset-background@2x" ]
} // In one line for SublimeREPL.
patch sodaTheme

Default Theme

Default Theme is .zipped in \Packages\Theme - Default.sublime-package and has to be unzipped first, patched, and then zipped back again.

let defaultTheme = {
    Path = @"replace_this_with_the_unzipped_theme_path";
    DpiAgnostics = []
} // In one line for SublimeREPL.
patch defaultTheme

Enjoy Sublime Text with Retina displays on Windows!