PhpStorm 2016.2 Help

Configuring Colors and Fonts

On this page:

Basics

With PhpStorm, 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.

PhpStorm 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.

Configuring colors and fonts

To configure color and font scheme

  1. Open Settings, and under the Editor node, click Colors & Fonts.
  2. Select the desired scheme from the Scheme name drop-down list.
  3. If you need to change certain settings of the selected scheme, create its copy. To do that, click the Save as button, and type the new scheme name.
  4. 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, PhpStorm displays Editor Font area where you can configure primary and secondary fonts, their size and line spacing.
      editor_font
  5. Under the Colors and Fonts node, open pages to configure specific color preferences and font types for the different supported languages and PhpStorm components.

Example

Changing font for JavaScript

Click JavaScript node.

Important! Make sure the Inherit attributes from <component> check box is cleared:

inheritAttributesFrom

In the list of language components select Keyword.

Define the desired font type using the Bold and Italic check boxes. Next, select the Foreground check box, and right click the color preview to customize:

createColorScheme1.png

Refer to the description of the Color Picker dialog box for details.

Observe results in the preview pane:
createColorScheme2.png

See Also

Last modified: 2 September 2016