In Sublime Text 3 (may work with ST2, never tried) you can edit your theme to specify a different background color for each language in one document.

Highlight code

I’m mainly use Sublime Text for web development, mixing HTML/CSS/PHP and JS.

As it can be confusing to identify one language melt in another, Sublime Text can be customized to change anything, depending of the current language.

Edit your theme

To edit your theme, you just have to copy the current, or download a custom one.

Download a custom theme

There is many user-made theme for Sublime Text, but I recommend to use tmTheme Editor. Using it, you can search, edit and download your theme.

Customize background

As you can see, Sublime’s theme are based on XML
To customize a specific language, we just have to specify the scope

<dict>
    <key>name</key>
    <string>JS code</string>
    <key>scope</key>
    <string>source.js</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#293134</string>
    </dict>
</dict>

In this example, I set a “name” key to “JS code”
A scope key to “source.js”
and my settings: a background color.

That’s all.

So, for my three scope:

<dict>
    <key>name</key>
    <string>• JS code</string>
    <key>scope</key>
    <string>source.js</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#293134</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>• PHP code</string>
    <key>scope</key>
    <string>source.php</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#2a2a2a</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>• HTML code</string>
    <key>scope</key>
    <string>source.html</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#000</string>
    </dict>
</dict>
  • JS has a grey background (#293134)
  • PHP has a darker background (#2a2a2a)
  • HTML has a black background (#000)

You can define as many as you want, change the foreground color (text color) and mix. Per example, you can set a different color for JS or PHP function names.

If you have any other tips for Sublime Text Theme, share it with me using comments.

If you find this article useful, share it with your friends!

2 thoughts on “Sublime Text: Background per language

  1. This is exactly what I am looking for. Where do you put this information in? I have tried so many things and none of them have worked.

    I am trying to highlight ASP.

    Thank You

  2. Firstable thank you so much for this tip.
    However, in ST3 there are some changes at the moment (theme and color syntax, files extensions) and i think it will be nice to update this article :)

    If someone need change this backgrounds, you must perform the following steps:

    Install https://packagecontrol.io/packages/PackageResourceViewer
    Unpack your Color Scheme (not theme!)
    Edit .sublime-color-scheme – for example, for PHP you need something like this below:
    “rules”:
    [
    {
    “name”: “PHP Bg”,
    “scope”: “source.php”,
    “background”: “var(grey)”
    }
    ]

    This is just example. People who needs this, should read ST3 doc how works sublime color schemes
    Sorry if my english is poor. I just wanna help to other coders :)

Comments are closed.