Wes Bos

Designer, Developer & Entrepreneur making the web an awesome place.

ss 2014-10-31 at 9.58.57 AM

Update: November 2014 – these theme has received a major UI upgrade for new Sublime Features and editor tweaks.

I love text editor colour schemes. I’ve tried dozens of them over the years but always found myself coming back to trusty old cobalt. I liked this theme quite a but but I didn’t love it. So, over the years I’ve tweaked and tuned cobalt into a theme that I am very happy with. Its easy on the eyes, works well across many languages and takes note of those little UI elements like the caret, searches and bracket matching.

I have had quite a few friends use my theme and they seem to be sticking with it. So, I’ve decided to release it to the masses. To download it, head on over to the github repo. As always, would love to hear any feedback you may have :)

Quick aside: I wrote a book on sublime text which comes along with a video series. If you like my themes and blog posts on Sublime Text, you will love this!

#cobalt2
A Sublime Text theme based on our old blue friend cobalt.

A refined colour scheme that is easy on the eyes and takes small UI elements into account. Includes full sublime theme (sidebar, search, tabs, etc…) as well as support for SublimeLinter, git diffing and a growing number of plugins.

See below for examples. Read more at http://wesbos.com/cobalt2-theme-sublime-text-2/

Installation

With Package Control

  1. Open package control toolsCommand Palette and type Install Package
  2. Search for Cobalt2 and hit enter
  3. Lastly, open PreferencesSettings - User. Add the following two lines:
"color_scheme": "Packages/Theme - Cobalt2/cobalt2.tmTheme",
"theme": "Cobalt2.sublime-theme",

If these are the last two lines of your settings file, make sure to omit the trailing ,

Screenshots

Sidebar Icons

Dirty Tab and Selected Tab

Indentation Guides — Guide, Stacked Guide and Active Guide

Use "indent_guide_options": ["draw_normal", "draw_active"] for this

GitGutter Support

Autocomplete

Command Palette

GoTo Anything

Tabs, Spaces and Comments

Folding Lines

Searches

Highlighted Line

JavaScript

CSS

PHP

Ruby

Python

Markdown

Contributing

While cobalt2 covers all languages, I write mostly JavaScript and CSS so I welcome any additions for other languages.

Thanks

Some icons from Soda Theme by Ian Hill

Kyle Knight for pushing cobalt2 past the code screen and styling the entire editor.

Seti UI Atom theme for the sidebar icons

Official Colours

Yellow: #ffc600
Blue: #193549
Dusty Blue 35434d
Dark Blue: #15232D

You may also like:

Cobalt2 Theme for iTerm https://github.com/wesbos/Cobalt2-iterm

Sublime Text Power User Book

This entry was posted in Sublime Text, Text Editors. Bookmark the permalink.

25 Responses to cobalt2: a theme for Sublime Text

  1. Thanks.

    I love using Cobalt especially with a Monaco 16pt. font.

  2. Very, very nice. Thanks for releasing it. Looking forward to your book.

  3. Francesco says:

    Just installed it, i have to say that it’s “relaxing”, thanks for sharing :D

  4. Pingback: Bookmarks for January 23rd | Chris’s Digital Detritus

  5. Chad says:

    just installed your color scheme and I must say..I was pulling my hair out trying to find a color scheme that I would like. but yours is wonderful and brilliant. Thanks for this so much! My eyes thank you too!

  6. Jay says:

    Really nice theme, however my sidebar always stays light grey no matter which theme I use. Anyone have any ideas?
    thanks again!

    • wesbos says:

      Make sure you put both of the lines in your settings file:

      "color_scheme": "Packages/Theme - Cobalt2/cobalt2.tmTheme",
      "theme": "Cobalt2.sublime-theme",

      The first one colours your code, the second line colours the editor chrome (things like the sidebar)

  7. leo says:

    amazing theme! gonna be my default theme :)

  8. oluc says:

    Very good theme, adopted!
    Thank you!

  9. wilson sy says:

    how do i download this theme?

    i am confused with this step: Drop in the Theme – Cobalt2 directory here (Right into /Preferences/)
    where can i get the theme-cobalt2 directory?
    The other site (github) says download the ‘repo’. what is it?

    Thanks.

  10. JJ says:

    Love the theme however the sidebar, while styled properly doesn’t have the icons. Is there something extra that is needed for them to show up?

    Thanks

  11. Steven says:

    My side bar icons don’t show up. What should I do?

  12. Zach says:

    I can’t get the “Sidebar Icons” to work? I installed it via package control. The theme and color scheme work, but no “Sidebar Icons”.

    • wesbos says:

      Use "theme": "Cobalt2.sublime-theme" in your settings file

      • Julien G says:

        Hello,

        First of all, thanks a lot for this awesome theme.
        However, as Zach, I cannot find anyway to display the icon sidebar.
        I have this User/Preferences.sublime-settings file (including the lines mentioned above):
        {
        “font_size”: 11,
        “ignored_packages”:
        [
        “Vintage”,
        “LiveReload”
        ],
        “color_scheme”: “Packages/Theme – Cobalt2/cobalt2.tmTheme”,
        “theme”: “Cobalt2.sublime-theme”,
        “translate_tabs_to_spaces”: true,
        “word_separators”: “/\\()\”‘-:,;~!@#$%^&*|+=[]{}`~?”
        }

        If it can help, I’m using Win7 and Sublime Text 2.
        Thanks again :)

      • tilapiatsu says:

        Hello!
        I have properly added “theme”: “Cobalt2.sublime-theme” in my setting file but the Sidebar Icons won’t show up !

        Any clue ?

      • Pranav says:

        I have added `”theme”: “Cobalt2.sublime-theme”` in my settings file, and can see it take effect in the search bar, chrome etc. But the icons dont appear. Have tried restarting ST too.
        Any pointers?

  13. Monting says:

    Thanks for the great work!
    For anyone on ST3 the icons don’t show, make sure you’re on build 3065

    http://www.sublimetext.com/3
    build 3065 – “Added sidebar icons”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>