Appearance

Use this page to change the overall look and feel of your IDE.

Option	Description
Theme	Select the UI theme from the list. By default, you can choose between a light, a dark, and a high-contrast theme. You can install other themes as plugins. For more information, refer to User interface themes.
Sync with OS	Select this checkbox to let WebStorm detect the current system settings and use the default dark or light theme accordingly. Sync with OS is not supported on Linux.
Zoom	Use this selector to zoom in and out the entire IDE, increasing or decreasing the size of all UI elements at once. You can also access this setting from the main menu: select View \| Appearance \| Zoom IDE.
Use custom font	Specify custom font family and size to use in the WebStorm UI.

Accessibility

Option	Description
Support screen readers	Enable screen reader support for WebStorm. For more information, refer to Accessibility.
Use contrast scrollbars	Make the editor scrollbar more visible.
Adjust colors for red-green vision deficiency	Adjust UI colors to better perceive colors in case of protanopia and deuteranopia.

UI Options

Option	Description
Show tree indent guides	Display vertical lines that mark indent levels in tree views, for example, in the Project tool window. These lines can help you better understand the hierarchy of the components in your project.
Use smaller indents in trees	Decrease the amount of space between the tool window border and the text in tree views, for example, in the Project tool window.
Enable mnemonics in menu	Underline hotkeys that you can press to execute a menu action.
Enable mnemonics in controls	Underline hotkeys that you can press to use controls in dialogs.
Use project colors in main toolbar	Use colored headers to simplify navigation between several open projects. For more information, refer to Configure the toolbar color.
Smooth scrolling	Scroll the UI smoothly, pixel-by-pixel, instead of line-by-line. This also enables animated smooth scrolling for Windows and Linux by default. You can disable it to use precise scrolling instead: press `Control+Shift+A`, find and open the Smooth Scroll Options dialog, and disable the Animated smooth scrolling checkbox. In this dialog, you can also set the duration of the scroll animation and change the appearance of the animation based on https://cubic-bezier.com/#.17,.67,.83,.67.
Drag-and-drop with Alt pressed only	Avoid accidentally moving files, editor tabs, tool window buttons, and other UI components. When enabled, hold the `Alt` key to move things around. By default, this option is disabled and you can move everything without any extra keys.
Always show full path in window header	Show the full path to the project and to the current file in the main window header. When disabled, the header will show only the name of the project and file.
Display icons in menu items	Show icons to the left of the items in the main menu and context menus.
Background Image…	Configure a custom background image for the IDE.

Antialiasing

Option	Description
IDE	Select which antialiasing mode you want to apply to the IDE (including menus, tool windows, and so on): Subpixel: this option is recommended for LCD displays and takes advantage of the fact that each pixel on a color LCD is composed of red, green and blue sub-pixels. This allows smoothing text and rendering it with greater detail. Greyscale: this option is recommended for non-LCD displays or displays positioned vertically. It deals with text at the pixel level. No antialiasing: this option can be used for displays with high resolution, where non-antialiased fonts are rendered faster and may look better.
Editor	Select which antialiasing mode you want to apply to the editor: Subpixel: this option is recommended for LCD displays and takes advantage of the fact that each pixel on a color LCD is composed of red, green and blue sub-pixels. This allows smoothing text and rendering it with greater detail. Greyscale: this option is recommended for non-LCD displays or displays positioned vertically. It deals with text at the pixel level. No antialiasing: this option can be used for displays with high resolution, where non-antialiased fonts are rendered faster and may look better.

Option

Description

IDE

Select which antialiasing mode you want to apply to the IDE (including menus, tool windows, and so on):

Subpixel: this option is recommended for LCD displays and takes advantage of the fact that each pixel on a color LCD is composed of red, green and blue sub-pixels. This allows smoothing text and rendering it with greater detail.
Greyscale: this option is recommended for non-LCD displays or displays positioned vertically. It deals with text at the pixel level.
No antialiasing: this option can be used for displays with high resolution, where non-antialiased fonts are rendered faster and may look better.

Editor

Select which antialiasing mode you want to apply to the editor:

Subpixel: this option is recommended for LCD displays and takes advantage of the fact that each pixel on a color LCD is composed of red, green and blue sub-pixels. This allows smoothing text and rendering it with greater detail.
Greyscale: this option is recommended for non-LCD displays or displays positioned vertically. It deals with text at the pixel level.
No antialiasing: this option can be used for displays with high resolution, where non-antialiased fonts are rendered faster and may look better.

Tool Windows

Item	Description
Show tool window bars	Show the tool window bars around the edges of the main window. For more information, refer to Tool window bars and buttons.
Side-by-side layout on the left	Show the tool windows that are attached to the top and bottom edges on the left side in two columns. For more information, refer to Optimize for wide-screen monitors.
Side-by-side layout on the right	Show the tool windows that are attached to the top and bottom edges on the right side in two columns. For more information, refer to Optimize for wide-screen monitors.
Widescreen tool window layout	Optimize the layout of tool windows for wide-screen displays: maximize the height of vertical tool windows by limiting the width of horizontal tool windows. For more information, refer to Optimize for wide-screen monitors.
Remember size for each tool window	Remember individual width of every tool window when you reopen or switch between them. When this option is disabled, tool windows have the unified default width, and their sizes remain constant when you switch between them.
Show tool window numbers	This feature is not available in the new UI. Show tool window quick-access numbers on the tool window buttons. You can hold the `Alt` key and press the corresponding number key to switch tool windows regardless of this setting: `Alt+1` for the Project tool window, and so on. Mnemonics for tool windows show the corresponding key bindings only when the shortcut is configured to `Alt+com.jetbrains.webhelp.shortcuttery.shortcuts.Key$Custom@6a3c4747`, where `number` is an integer number in the range from 0 to 9. With a different shortcut, there will be no mnemonic for the tool window button.

Presentation Mode

Item	Description
Zoom	Zoom in or out the entire IDE in the presentation mode.

Last modified: 18 September 2023