Day in and day out, engineers (and designers) all over the world crunch, break and write lines of code using a number of IDE’s available. From Sublime Text and Atom to WebStorm or Vim, the one thing I realized in my search, is that most IDE themes are made by developers. But there’s a huge design aspect to it that most designers and developers are missing out on long-term.
As someone who occasionally ends up working in Sublime Text, I was never satisfied with the ones I’d come across, because they didn’t have color schemes I enjoyed or could comfortably stare at for hours on end. My issue was that most of the colors don’t work well together, require my eyes to strain, are too bright or dull, or don’t pair well with the syntax itself.
Now if you’re thinking that may sound like a personal opinion, you’d get a star sticker from me, because it is. But I can assure you, personal opinion aside, there’s more to the colors than how lovely some of us find “fuchsia” at 60–100% brightness on our screens. And given the fact that I don’t stare at them for nearly as long as developers do, I was especially empathetic to their situation.
So last week, I released Toothpaste, a theme I created for Sublime Text (at the time). I figured if the developers were awesome enough to put together the IDE in the first place, are the counterparts to my role as a designer and we all collectively can benefit from something like this, why not bring it to life?
I had wanted to design a new theme for Sublime Text for a while now, but I didn’t want to just slop some colors together. The theme needed to be designed. So I asked myself what the purpose of a theme is and what problem solves, if done right, for the individual using it. And I got to work…
Readability results in productivity
@imcatnoone Really like that the value is emphasized more than the unit. Increased readability at a glance! pic.twitter.com/eLBcwaIJN7
— Achal Varma (@_achalv) February 1, 2016
The color choice for the elements needed to enhance the code, making it more readable and not bothersome for the eyes. I emphasized areas that needed to be more than others, ensured strings that are repetitious and seen often are a tad muted and stayed away from any colors that would end up being too vibrant no matter the conditions of the computer.
For those who have apps like F.lux installed, the colors needed to have enough contrast to counter the yellow hue and still appear equally pleasing like the pastels they are. The theme also needed to look and feel pleasing if you turned your screen brightness down to 60%.
@imcatnoone like I look at this stuff all day which means even a 1% increase in productivity from a better thought out colour scheme is huge
— jonas (@jnsdls) February 1, 2016
The color choice for the elements needed to enhance the code, making it more readable and not bothersome for the eyes.
- Code that needed to be in your face would never be “too” in your face with the pastel colors
- Differentiation between elements so you’re not wasting time finding what you’re looking for
- Comments are as muted as possible as they are an aid only relevant when referencing
- Anything that is continually repeated is a muted color as to not potentially cause you to take a break and delay work time for optical reasons.
- For those who prefer their screen brightness at 60% or have apps like F.lux installed, the colors needed to have enough contrast to counter the yellow hue and still appear equally pleasing like the pastels they are.
Considering I don’t know many programming languages, you can imagine how fun* this was to sort out the tidbits of as many languages as possible.
Universal
By universal I mean the theme needed to still abide by the aforementioned points on as many programming languages as possible. As of right now, it shines like the chrysler building for HTML, CSS, Javascript, PHP, Ruby and some other gems. I’d be lying like a rug if I said I knew about all of the programming languages out there. So there’s a pretty high chance if you’re one using one of the lonely-langs, you’re a smidget out of luck. However, please open a ticket for it in the repo or ping me, and I’ll check it out!
I knew that in order for it to really benefit as many people as possible, it needed to be on as many IDE’s as possible. So I made sure my repo was set to public and folks could go to town revising it however and if they wished. Not long after, I received a number of tweets from (insert twitter handles here) asking if they could recreate it for their favorite editors. My heart grew 3x its size!
Collaboration The repo was opened to anyone contributing from the beginning and folks in the community became super excited once I pushed it out into the public and they saw it. It was great to to have everyone contribute, learn from and see the project become even better with their input. Because realistically, designing a product isn’t nearly as great without the help of an engineer.
Now, not even 7 days later, Toothpaste is available for Sublime Text, Atom, Xcode, WebStorm and I anticipate more are coming. As of today, it has a total of 85* stars, 12 merged pull requests, 7 authors have pushed who have pushed 36 commits to all branches, and a whole lot of fun. It was also featured on Github’s Trending CSS page!
@jnsdls @codetheory @imcatnoone pic.twitter.com/401xKIbwux
— Adam Swinden (@AdamSwinden) February 1, 2016
All in all, I learned a ton. I’ve seen more programming languages than I ever have, actually learned how to properly use Terminal, got my feet wet in some interesting Javascript, confused the hell out of myself with CSS (because CSS) and saw a very strong point emphasized throughout all of this.
Working with the developers who contributed shed light on how quickly and efficiently a product can come to life when constant communication, respect for each others disciplines are at the forefront and egos of designers and developers are left at the door. Despite the occasional disagreements in approach or the differences in metrics we may measure sometimes, the possibilities are limitless when the two work hand in hand toward the same goal and shared values.
Want to chat more about this post? Interested in contributing to Toothpaste? Please feel free to ping me via Twitter or by sending an email my way. Want to read more posts of mine on design, startups, building products and more? Sign up for my newsletter. I don’t spam.
*I think Toothpaste would have reached more folks if there wasn’t a painful hiccup getting Toothpaste submitted to Sublime and Atom’s package control. But that was a byproduct of me learning Terminal at the very moment I needed it. As it stands, I have 0 idea how many folks in total downloaded Toothpaste. Lesson learned, on all accounts.