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. Note that pre-defined schemes are not editable. You have to create a copy of a scheme, and then change it as required.
To configure color and font scheme
- Open 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.
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 displays Editor Font area where you can configure primary and secondary fonts, their size and line spacing.
- Under the Colors and Fonts node, open pages to configure specific color preferences and font types for the different supported languages and WebStorm components.
Important! Make sure the check box Inherit attributes from <component> is NOT selected:
In the list of language components select Keyword.
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: