Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Tools content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

WebStorm - Installing Custom Color Schemes (dayleress/colour-schemes)

2:12 Tools lesson by

In this lesson, we'll walk through installing a custom color scheme into our WebStorm IDE. Dayle Rees's daylerees/colour-schemes has a great collection of themes ready to install in different formats for various editors.

For this example, we will install the Peacocks In Space theme into an OS X WebStorm 11 EAP installation. Note: This process will be very similar (or identical) for previous versions of WebStorm and other editors in the JetBrain's family of editors.


egghead.io comment guidelines

Avatar
egghead.io

In this lesson, we'll walk through installing a custom color scheme into our WebStorm IDE. Dayle Rees's daylerees/colour-schemes has a great collection of themes ready to install in different formats for various editors.

For this example, we will install the Peacocks In Space theme into an OS X WebStorm 11 EAP installation. Note: This process will be very similar (or identical) for previous versions of WebStorm and other editors in the JetBrain's family of editors.

Avatar
Kamuela

This helped me a lot. I was able to install Inconsolata along with Peacock and Snappy, and I am a lot happier than the default situation with WebStorm. But what I'd really like is for WebStorm to have the exact same setup as One Dark or One Light in Atom. I've been looking up how to do this and can't seem to figure it out. Any help possible?

In reply to egghead.io
Avatar
Tony

This is great... but...
WebStorm 2016 doesn't seem to have the same file structure for external themes? I can't find the folder you navigated to.

Where should we be downloading the theme files to?

Avatar
Steve

Thanks to Gustavo V.R. on Stack Overflow for this solution...

http://stackoverflow.com/questions/36163439/install-custom-color-scheme-in-phpstorm-2016-1-on-mac-osx

Modified a bit for our specific case.

WebStorm 2016.1 on Windows - How to install color theme (English)
Go to folder: C:\Users\USERNAME.WebStorm2016.1\config\
Create a new folder: colors
Copy or save *.icls files of your favourite theme-color in the colors folder.
Reopen WebStorm, go to: File->Settings then choose Editor->Colors & Fonts and your new theme-color appears in the select list.

In reply to Tony
Avatar
Sridatta

Great trick. Works like a charm in Intellij Idea too. Thanks a lot

Avatar
Venkata

Not working for Webstorm2016.3

I did everything u did, but the theme wouldn't show up in the dropdown.

Avatar
Erik

Hi Venkata,

Have you restarted WebStorm? If you are still not seeing it, can you confirm that it exists in the expected directory. It sounds like you are on Mac OS X and have successfully downloaded via curl -O from your previous comments. Try entering the colors directory and listing contents via:

cd /Users/YOUR_USERNAME/Library/Preferences/WebStorm2016.3/colors
ls

and make sure that the expected color is there. For example, here is my output from the above commands

$ ls

Base16 Ocean.icls             Earthsong _ EA.icls           One Dark.icls                 Snappy Light - Erik.icls      github.icls
Default - Erik.icls           Monokai _ EA.icls             Peacocks In Space _Erik_.icls WarmNeon _ EA.icls            peacocks-in-space.icls
Default _Erik_.icls           One Dark _Erik_.icls          Relax Your Eyes.icls          earthsong.icls                snappy-light.icls
In reply to Venkata
Avatar
Venkata

Hey Erik, Thanks for the reply!

I have restarted Webstorm multiple times and I also see that it got downloaded to the colors directory! But, it wont show up in Webstorm>Preferences>colors & fonts>Scheme for some reason.

In reply to Erik
Avatar
Venkata

Hi Erik,

I previously installed Material theme, I uninstalled it, I deleted the peacock in space theme too, downloaded it again and restarted webstorm. It is showing up now. Weird!!!!

Thanks for your help. :)

In reply to Erik

I'm going to walk through installing that custom theme for WebStorm, and we're going to be pulling the theme from the Dayle Rees Colour Scheme repo. If you haven't seen this, he has a lot of things here, you can view them in preview. What I'm looking for is going to be peacock in space, peacocks in space. We're going to install this on WebStorm.

I have an existing project here I have open, and just my current settings. So, let's walk through what it takes to get this theme installed on my WebStorm installation. The first thing, we need to find the theme, and there's a folder here for the JetBrains editors. If we just search for, "peacocks in space," this is the file that we want, and we'll just go ahead and copy the .RAR link for that.

Now we're going to download that into the correct directory here, it's going to be library, preferences, and we're going to have a few directories here. We're in WebStorm 11, and we're going to go into the colors directory. We did copy that URL, so we'll download it right here.

Now we need to restart WebStorm, and we're back. So now we're going to need to open up our settings here, and we're just going to go to the colors and font settings. Let's go ahead and just preview some JavaScript. Now, drop down the scheme, and we should see here, "peacocks in space."

Let's go ahead and copy that so we can customize that. We can go ahead and say, "OK, here's our new theme." I always like to bump up the font size on those, so let's do that. We can go up to 15 and then 1.3. Now I can see that we have the peacock in space theme installed on WebStorm, and you can repeat that for any of these color schemes. You just need to download this ICLS file, and restart WebStorm and select it as your current setting.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?