10 Best WebStorm Themes
Note: This post was updated in September 2023 to represent the changes to the UI introduced in WebStorm 2023.2.
It’s important you feel comfortable in your IDE. Fortunately, WebStorm is very customizable, so you can configure it how you like. One way to do this is to change the theme you’re using, which will alter the look and feel of the IDE. In this blog post, we’ve put together some of our team’s favorite themes to use.
All the themes mentioned in this blog post are either available out of the box or can be installed for free directly from your IDE.
- Go to Settings | Plugins, find the theme plugin you want to use, and install it. It will be automatically applied to your IDE. You can narrow down the plugin search so that only themes are shown by adding
/tag:Themeto the Search field. - To change the theme at any time, go to Settings | Appearance & Behavior | Appearance and select the theme you want to use in the Theme dropdown. As a better alternative you can use the shortcut ^` (macOS) or Ctrl+` (Windows, Linux) to bring up the Switch… popup and choose Theme from there.
Built-in WebStorm themes
Dark
The Dark theme replaces Darcula, which used to be the default theme pre-installed in WebStorm. Being pre-installed many people never feel the need to change it, as they like how it looks. It is slightly darker than the Darcula theme, for a more balanced contrast.
Why people like it:
The dark colors emit less light. This makes it easy to look at for long periods and helps prevent eye strain. The whites and other colors in Dark are less bright than some dark themes available, which people may prefer. You can read a little about the history behind our first dark theme, Darcula here.
Ideal for:
- Low-light environments
- Sensitive eyes
Light
Light is another theme that comes pre-installed with WebStorm. It’s the polar opposite of the dark theme, providing a brighter IDE interface. It can be helpful to use light themes if you’re working in very bright conditions or alongside other applications that are only available in a light format.
Why people like it:
There is something to be said about working in a familiar environment. It is a simple, classic look that people enjoy.
Ideal for:
- Bright environments
- Desktops with a lot of other light-themed apps
Dark Purple Theme
Dark Purple is another dark theme available for WebStorm. It offers a darker contrasting interface to some of the other dark themes available replacing the blues and oranges with various reds and purples.
Why people like it:
The stronger contrasts are particularly appreciated by users with visual impairments. The purples and pinks are aesthetically calming. This theme is a favorite among many of our team members.
Ideal for:
- Low-light environments
- People who are looking for higher-contrast colors
One Dark Theme
One Dark Theme is another dark theme that is well-designed for coding. It is less bright than some of the other dark themes, which can make it easier on the eye.
Why people like it:
For some people, the washed-out dark accents and less contrasting bright colors are easier to look at for long periods of time.
Ideal for:
- Low-light conditions
- Tired eyes
Visual Studio Code Dark Plus Theme
Visual Studio Code Dark Plus Theme is based on the default look of Visual Studio Code. If you’re used to the look and feel of Visual Studio Code and want to use it in WebStorm, this theme provides a similar effect.
Why people like it:
This theme is close to VS Code’s dark theme. Its deeper darks mean there is further contrast between the UI text and the editor windows. The color scheme contains stronger colors than some of the other dark themes available.
Ideal for:
- Low-light conditions
- People coming from VS Code
Monokai Pro Theme
Monokai Pro theme is an adaptation of the Sublime Text editor scheme. It is based on Monokai Pro, which is designed to help the user focus. It uses shades of colors specifically chosen to provide a non-distracting user interface. This theme contains six different dark-scheme variants.
Why people like it:
Monokai Pro Theme is well thought-out, with sensible color-coded text elements that make browsing your code easy. With the different variations in the theme pack, it’s easy to find one you’re comfortable with.
Ideal for:
- Low-light conditions
- Reviewing lots of code
Vuesion Theme
Vuesion Theme’s color scheme is based on the Vuesion project. It brings modern best practices in engineering and design to your IDE. It will give your IDE a well-organized, clean feel.
Why people like it:
Vuesion Theme tries something different from other “dark” themes available. There is much more use of teal green that people familiar with Vue will recognize. The highlighting in the editor contrasts nicely, and the whole feel is very Vue-ish: clean, crisp, and green.
Ideal for:
- Low-light conditions
- Long stints in the editor
Gradianto Theme
Sometimes, adding some color to the IDE can help your mood. Gradianto Theme comes in a selection of gradients found in nature that aim to be easy on the eyes while being colorful and bright.
Why people like it:
Gradianto is simple and pleasing to the eye. It isn’t as harsh as some other dark themes as it uses color tones instead of black tones, so it is neither too bright nor too dark.
Ideal for:
- All light conditions
- Sensitive eyes
Hiberbee Theme
Hiberbee Theme takes the best of Monokai and macOS and puts them together into one super-clear, well-contrasting dark theme.
Why people like it:
Often, the dark themes use very bright neon-type colors to ensure there’s good contrast between the text. Hiberbee Theme uses bright colors that contrast nicely but without neon-like hues. The color scheme is also intuitive, with certain tags, classes, or parts of the code highlighted in complementary colors.
Ideal for:
- Low-light conditions
- People looking for high-contrast non-neon colors
Cyan Light Theme
The Cyan Light Theme is a perfect compromise for anyone who prefers a light theme but doesn’t like all the associated bright white tones. It favors light gray over white for a very comfortable working environment.
Why people like it:
Unlike most light themes, Cyan Light uses shades of off-white and cyan tones for contrast. The typography is restrained and simple, with keywords, identifiers, fields, and variables rendered in dark colors to differentiate them subtly but visibly.
Ideal for:
- Bright light conditions
- Sensitive eyes
How to select a theme
Selecting a theme that is best for you is not about comparing the ratings or looking for the theme with the most downloads. It’s about understanding your needs and how you spend your time in the IDE. With over 250 themes available on JetBrains Marketplace, there may be a theme that suits your needs better than the ones we’ve recommended in this article. Here are a few things to consider.
Your environment
The environment you’re coding in (and we don’t mean the development environment here) can have an impact on what environment (this time, the development environment) you’ll feel most comfortable working in. For example, if you prefer to work deep into the night under the light of your computer screen, using a dark theme can go a long way toward stopping eye strain.
Eye sensitivity
Some people find some colors hard to look at, and others can’t distinguish the differences between certain colors. We are all different. Understanding what color scheme you can comfortably spend long hours in front of may take a bit of trial and error to lock in, but once you understand what you prefer, you can look for something with these traits.
How you work
If you multitask across several apps, switching from looking at a bright Google doc to a dark-themed IDE editor can soon lead to fatigue and headaches. It’s worthwhile to look for a theme that will complement your process. It is possible to sync the theme with your operating system by checking the Sync with OS option in the Theme settings. If the OS is configured to switch the theme according to the time of day, then the IDE will also switch the theme automatically at the same time.
Develop your own theme
If you can’t find the perfect theme on JetBrains Marketplace, you can always create your own. You can find a detailed tutorial on creating a custom theme in our documentation. If you think other people will benefit from your theme, why not add it to JetBrains Marketplace?
That’s all for today! We hope this has inspired you to look at the themes available to make your IDE even nicer. If there’s a theme you really like, let us know in the comments.
The WebStorm team
Subscribe to WebStorm Blog updates
