WebStorm 2018.1 Help

Configuring Colors and Fonts

With WebStorm, you can maintain your preferable colors and fonts layout for syntax and error highlighting in the editor, search results, Debugger and consoles via font and color schemes.

WebStorm comes with a number of pre-defined color schemes. You can select one of them, or create your own one, and configure its settings to your taste.

It is important to mention the Language Defaults settings page, which contains the settings that are common for all the supported languages. It's enough to change one of the settings there, and then inherit this setting from the defaults.

To configure colors and fonts

  1. Press Ctrl+Alt+S or choose File | Settings (for Windows and Linux) or WebStorm | Preferences (for macOS) from the main menu, and then go to Editor | Font.
  2. Select the desired scheme from the Scheme name drop-down list.
  3. Under the Color Scheme node, define the font families used in the editor and in the console. When you open the Font page, or Console Fonts under the Color Scheme node, WebStorm displays the Editor Font area where you can configure the primary and secondary fonts, their size and line spacing.
    ws_configure_colors_and_fonts_settings_editor_font_page.png
  4. Under the Color Scheme node, open the corresponding pages to configure specific color preferences for the supported languages and WebStorm components.

To navigate to the relevant Colors & Fonts settings for the symbol at the caret

  • Press Ctrl+Shift+A, type Jump in the search string, and choose Jump to Colors and Fonts:
    ws jump to colors and fonts

Changing the language defaults

The node Language Defaults is actually language-agnostic. It contains the settings that are common to the majority of the supported languages (keywords, dots, commas, parenthesis etc.)

Select the node Language Defaults, and in the list of textual components, select Keyword. The background of keywords is black; let's make it dark blue.

To do that, select the checkbox to the left of the field name Background, and then click the white swatch. The Color Picker opens — all you need to do is select the desired color and click OK:

ws_configure_colors_and_fonts_settings_editor_color_scheme_language_defaults.png

So far, the changes to the language defaults are made; now let's look how they can be inherited.

Example: changing font for JavaScript

Click the JavaScript node.

In the list of language components, select Keyword. As you can see, keywords now have the background of the above selected color:

ws_use_inherited_attributes.png

Clicking the link below this checkbox leads you to the respective page under the Colors Scheme node, in this case to Language Defaults.

Next, clear Inherit values from, and define the desired font type using the Bold and Italic checkboxes. In this case, these textual components will change for the selected language only!

Observe the results in the preview pane.

ws configure colors and fonts settings editor language inherit defaults cleared

What happens if there is a function/method with a long list of uniformly highlighted parameters? One can easily make WebStorm distinguish each parameter from the others using the semantic highlighting.

To configure semantic highlighting

  1. Press Ctrl+Alt+S or choose File | Settings (for Windows and Linux) or WebStorm | Preferences (for macOS) from the main menu, and then go to Editor | Color Scheme | Language Defaults.
  2. In the list of the supported components, choose Semantic highlighting.
  3. In the right-hand pane, select the Semantic highlighting checkbox:
    ws configure colors and fonts settings editor language semantic highlighting
  4. After that, all the parameters in a lengthy list will get the colors from the suggested swatches. If one is not happy with the suggested colors, click on a swatch to choose the suitable color.
Last modified: 11 May 2018

See Also