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. Note that pre-defined schemes are not editable. You have to create a copy of a scheme, and then change it as required.
- Open the IDE Settings, and under the Editor node, click Colors & Fonts.
- Select the desired scheme from the Scheme name drop-down list.
- If you need to change certain settings of the selected scheme, create its copy. To do that, click
Save as button, and type the new scheme name in the dialog box.
6.0+Under the Colors and Fonts node, change the font families used in the editor and in the console:
- Define font family for the editor and console. When you just open the Font or Console Fonts
pages under the Colors and Fonts node, WebStorm performs analysis of all the available fonts,
and presents them in the Available fonts list.
Click the horizontal arrow icons to make up the list of fall-back fonts (section Selected fonts), which will be used when some of the glyphs are missing in the selected editor or console font.
Click the vertical arrow icons to change the order in which the selected fall-back fonts will be used.
- Define font family for the editor and console. When you just open the Font or Console Fonts pages under the Colors and Fonts node, WebStorm performs analysis of all the available fonts, and presents them in the Available fonts list.
- Under the Colors and Fonts node, open pages to configure specific color preferences and font types for the different supported languages and WebStorm components.
Define the desired font type using the Bold and Italic check boxes. Next, select the check box Foreground, and right click the color preview to customize:
Refer to the description of the Color Picker dialog box for details.Observe results in the preview pane:
You can view how the new scheme looks in the editor. To do that, just click Apply without closing the Settings dialog box.