WebStorm 2020.2 Help

File Colors

File | Settings | Appearance and Behavior | File Colors for Windows and Linux

WebStorm | Preferences | Appearance and Behavior | File Colors for macOS Ctrl+Alt+S the Settings/Preferences icon

Use this page to set different background colors for distinguishing between project files of specific scopes.

Highlighting scopes in the editor
ItemDescription
Enable file colorsSelect this checkbox to enable the feature.
Use in editor tabsEnable colors in editor tabs.
Use in project ViewEnable colors in the Project tool window and in search results (for example, in the Find in Path dialog Ctrl+Shift+F).
Manage scopesClick this button to define the required scopes.
Configuring file colors in Settings/Preferences

Configure colors

Similarly to scopes, color associations can be local and shared.

  • Local colors are only visible to you and are not shared through VCS.

  • Shared colors are placed under version control so that people who work on a project can use the same color associations. They are stored in the project folder under .idea in the fileColors.xml file (for example: MyProject/.idea/fileColors.xml).

ItemTooltipDescription
the Add buttonAddClick this button to open a list with the available scopes. Click the right arrow button next to the necessary scope in the list and select a color.
the Remove buttonRemoveClick this button to remove the selected color-scope association.
the Move up button / the Move down buttonUp / Down Use these buttons to sort the color-scope associations and change the order in which they are applied.
SharedSelect this checkbox to share the selected local scope through VCS.

After you apply the changes and close the dialog, you will see colors in the selected areas in the interface:

Scope highlighting in the editor tabs and search results
Last modified: 09 October 2020