How to make unsaved Sublime files stand out

It’s Saturday morning and I am playing Flexbox Froggy at HackerYou, sitting with two other students. I am stuck on the last level, which is proving that I am still not fully understanding flexbox. I want to go back to floats.

Theoretically flexbox is supposed to be better than floats, and I really like not having to remember to clearfix and clear things.

I’ve learned one of my biggest issues is forgetting to save my files. And it usually takes me a while to understand why my code changes are not showing, because the tiny dot that tells you that you have an unsaved file is light grey and so unnoticeable!

With the image at this size it is easy to see I have not saved my contact.html file, but what if it could stand out more?

I went to google for help and came across this Stack Overflow thread about adjusting the colour.

1. Add a line of json to your settings: Sublime Text -> Preferences -> Settings

"highlight_modified_tabs": true,

This makes it orange and so much easier to see (orange because of the theme I am using, Wes Bos’ Cobalt2 theme)

But what if it was red?

I wasn’t able to get the second part of that thread working, which I realized was because I am not using the default theme for my tabs and side bar (I use Code-Lover for the document part). So I went to Twitter to ask Wes if it was possible for me to change them.

Fork? Hmm… I’m still learning GitHub, so I downloaded a zip file of the code and located the files; there are 6 of them:

file-dirty-selected.png
file-dirty-selected@2x.png
tab-highlight-inactive.png
tab-highlight-inactive@2x.png
tab-highlight.png
tab-highlight@2x.png

I changed the saturation levels in Photoshop (-45) to make them red, saved the files.

There are a couple other steps we need to do and a few things that need to be changed.

2. Unzip the theme file and drag it in the Packages folder

After you unzip the folder and drag it into your Packages (Preferences -> Browse Packages) you need to rename the folder, this was the fix to an issue I was struggling with for an hour… okay two hours. I renamed it Theme — Erkbalt.

Then rename the .sublimetheme file (erkbalt.sublimetheme) and open it in Sublime. I had to edit every time it said Theme — Cobalt2 to what I called the folder. Thankful for the cmd+d shortcut!

3. Open the Settings file again, add this line and save the file

"theme": "erkbalt.sublime-theme",

Done!

Sadly it’s that easy but it took me almost 3 hours to figure out. Hopefully someone finds this useful and it saves them time.