Display Style and Colors

UI Color Configuration

The colors used for the user interface are selected with the Appearance > Display Mode, Appearance > Light Theme and Appearance > Dark Theme preferences. The default on Windows and macOS is to use the light or dark theme as the OS is set, tracking the OS's light or dark display setting as it changes. On Linux, Wing cannot tell the OS setting and instead uses a dark display theme by default. To match the native look for the OS as much as possible, set the Appearance > Look > User Interface Look preference to Emulate Windows or Emulate macOS. The emulated look follows the OS's light or dark setting, except on Windows 10 and earlier, where it is always light.

Editor Color Configuration

By default, the editor matches the display theme described above. This can be changed with the Appearance > Light Theme > Light Editor and Appearance > Dark Theme > Dark Editor preferences, by selecting Use Selected and choosing one of the available light or dark themes. This affects editor background color and the color of markers on text such as the selection, debug run marker, caret line highlight, bookmarks, diff/merge annotations, and other configurable colors. Themes also define 20 additional colors that appear in the preferences menus that are used for selecting colors.

Most of the defaults set by the theme preference can be overridden on a value-by-value basis in preferences. For example, the Editor > Selection/Caret > Selection Color preference is used to change the text selection color to a value other than the one specified in the selected theme. Each such preference allows selection of a color from the current theme, or an arbitrary color from a color chooser dialog.

Colors set in the editor and debugger color preferences may be translucent. Their color chooser has an alpha channel, where 0 is fully transparent and 255 is opaque. A translucent selection, occurrence highlight, caret line highlight, debug run marker, bookmark, active range or coverage highlight blends with other highlights on the same text. Where Wing cannot draw a color translucently, it uses the color as it would appear on the background.

In Wing, the colors used for syntax highlighting code in the editor can be configured separately, as described in Custom Syntax Coloring.

Importing a VS Code Theme

A color theme made for Visual Studio Code can be added as a display theme with Import VS Code Theme, which is also a button under the themes on the Appearance page of Wing's Preferences. It takes either a theme's .json file or a .vsix extension file that contains one or more themes. Wing maps the theme's user interface colors and its syntax colors onto its own, adjusting any colors that would be hard to read, and then offers to use the new theme as the Light or Dark theme.

Imported themes are written to the palettes and syntax sub-directories of the Settings Directory, named with a vscode- prefix, so they can be edited further as described below. Importing the same theme again offers to replace it.

Making a Theme from Colors

New Theme from Colors, which is also a button under the themes on the Appearance page of Wing's Preferences, makes a whole display theme from six colors: the background, foreground and accent, and the colors used for keywords, strings and function names. Wing works out the other surfaces, highlights and syntax colors from these, keeping text readable, and shows a preview as the colors are changed. Start from Current Theme takes the colors from the current light or dark theme. The theme is saved as a light or dark theme in the same directories as an imported theme, named with a custom- prefix.

Saving the Current Colors as a Theme

Save Current Colors as Theme saves the colors in use as a new display theme, including any colors set one at a time in preferences and any changes to syntax coloring made in preferences. The theme is written in the same way and to the same directories as a theme made from colors, so it can be edited further, shared by copying its .plt file and its syntax directory, or used with Start from Current Theme to make a new theme from colors.

Adding a Custom Theme

Additional themes can be defined and stored in the palettes sub-directory of the Settings Directory. This directory must be created if it does not already exist. Example themes are included in your Wing installation in resources/palettes. A theme added, changed, or removed in this way is seen the next time Preferences is opened, and it appears in the theme selectors on the first preferences page.

A theme's colors are written as #RRGGBB, or as #RRGGBBAA for a translucent color with alpha AA from 00 (transparent) to FF (opaque). The background color is always opaque, and the foreground and editor-background colors are used as they appear on it. Themes that Wing writes give a translucent color as an opaque color for earlier versions of Wing, followed by a #@rgba line with the translucent color, for example #@rgba selection: #3060A080.