Use this page to change the overall look and feel of your IDE.
|Theme||Use this drop-down list to select the desired theme from the list.|
|Adjust colors for red-green vision deficiency||Select this option to adjust the IDE colors (code highlighting in the editor, text notifications, etc.) for people with the red-green color deficiency.|
|Override default fonts by (not recommended)||Select this checkbox to enable specifying font family and size to be used instead of the default one. |
When first installed, WebStorm takes Windows default font size and style.
|Cyclic scrolling in list||Select this checkbox to enable scrolling through a list by jumping from the last item to the first one and vice versa.|
|Show icons in quick navigation||Select this checkbox to have icons shown in the quick navigation pop-up menu (Ctrl/Ctrl+Shift/Ctrl+Shift+Alt+N).|
|Automatically position mouse cursor on default button||Select this checkbox to have the mouse pointer placed at the default button when a dialog box opens. If the checkbox is not selected, the pointer location does not change.|
|Hide navigation popups on focus loss||If this checkbox is selected, the navigation pop-up frames (go to class/file/symbol) close, when any other WebStorm component gets the focus. |
If this checkbox is not selected, the navigation pop-up frames persist on changing the focus, and the only way to close such pop-up lays with pressing Escape.
|Drag-n-Drop with ALT pressed only||If this checkbox is not selected (by default), WebStorm allows moving editor tabs, tool window buttons, files and folders in the Project Tool Window, using drag-n-drop. |
Select this checkbox to avoid accidental moving of a file or folder, or a UI component. Thus drag-n-drop only works while ALT key is pressed.
|Background Image||This option allows you to configure a custom background image for the IDE.|
|Tooltip initial delay (ms)||Use this slider to specify the time to pass between the moment you hover the mouse over an item in the editor and the moment when the tooltip with its value appears. This settings is especially important during debugging. If the delay is too short using the mouse becomes inconvenient because every mouse move across the screen brings forward a number of tooltips with the values of all the variables.|
|IDE|| From this drop-down list, select which antialising mode you want to apply to the IDE (including menus, tool windows, etc.): |
|Editor|| From this drop-down list, select which antialiasing mode you want to apply to the Editor: |
|Animate windows||Select this checkbox to have undocked tool windows slide with the animation effect. |
This option applies only when a tool window is undocked.
|Show memory indicator||Select this checkbox to show the Memory Indicator on the Status Bar.|
|Disable mnemonics in menu||Select this checkbox to hide underlining of hot keys in the WebStorm menus.|
|Disable mnemonics in controls||Select this checkbox to hide underlining of hot keys in the WebStorm controls.|
|Display icons in menu items||If this checkbox is selected (by default), the icons are displayed to the left of the menu commands. |
If this checkbox is not selected, the menu commands are displayed without icons.
|Side by side layout on the left/right||When these checkboxes are selected, the way the tool windows are positioned is optimized for a wide-screen display. |
Side-by-side layout is OFF:
Side by side layout is ON:
Toggle layout by Ctrl+MouseClick on splitter between the tool windows.
This only applies to the tool windows located on the left and right sides, but not at the top and bottom of the WebStorm window.
|Smooth scrolling|| Select this option to enable by-pixel scrolling instead of by-line scrolling when you turn your mouse wheel. |
That this is effective for macOS and for Windows with some mouse devices.
|Show tool window bars||Select this checkbox to display tool window bars.|
|Show tool window numbers|| Select this checkbox to show tool window quick access numbers on the tool window buttons. |
You can use the Alt+number shortcuts regardless of this setting and change the shortcuts on the Keymap page.
Note that the tool window mnemonics show up only when the corresponding keybindings have the format
|Allow merging buttons on dialogs||If this checkbox is selected, the multiple commands in a dialog box are grouped under a single button with a down arrow. You can view all merged commands by clicking the drop-down list, or pressing Shift+Alt+Enter. |
If this checkbox is not selected, the buttons will be shown in a row. Compare:
|Small labels in editor tabs||If this checkbox is selected, the font size on the editor tabs is set to the smaller value. |
If this checkbox is not selected, the font size on the editor tabs is set to the default value, as in the project tree view.
|Widescreen tool window layout||If this checkbox is selected, the way the tool windows are positioned is optimized for a wide-screen display. |
Widescreen tool window layout is OFF:
Widescreen tool window layout is ON:
|Font size||Use the drop-down list to select the font size for the presentation mode.|