WebStorm
 
2022.2
Shortcuts: Windows
Get WebStorm
You are viewing the documentation for an earlier version of WebStorm.
  1. Reference
  2. Settings/Preferences
  3. Appearance & Behavior
  4. File Colors

File Colors

Last modified: 21 July 2022

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

tip

For more information on how to work with the feature, refer to Scopes and file colors.

Item

Description

Enable file colors

Select this checkbox to enable the feature.

Use in editor tabs

Enable colors in editor tabs.

Use in project View

Enable colors in the Project tool window and in search results (for example, in the Find in Files dialog Ctrl+Shift+F).

Manage scopes

Click 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).

Item

Tooltip

Description

the Add button

Add

Click 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 button

Remove

Click this button to remove the selected color-scope association.

the Move up button/the Move down button

Up / Down

Use these buttons to sort the color-scope associations and change the order in which they are applied.

Share through VCS

Select 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

tip

For more information on how to work with the feature, refer to Scopes and file colors.

See also

Procedures