Shared Colors for Visual Studio

Note

This article applies to Visual Studio 2015. If you're looking for the latest Visual Studio documentation, use the version selector at the top left. We recommend upgrading to Visual Studio 2019. Download it here

When you are designing UI that uses common Visual Studio shell elements, or you would like your interface element to be consistent with similar features, use existing token names in package definition files to choose and assign colors. This ensures that your UI stays consistent with the overall Visual Studio environment and that it updates automatically when themes are added or updated.

This article describes common UI elements and the token names that they use, which you can reference when building similar UI. For specific information about how to access these color tokens, see The VSColor Service.

Make sure to use token names correctly:

  • Use token names based on function, not on the color itself. The common shared colors are associated with specific interface elements and are only intended to be used for the same or similar features. For example, don't reuse the color of a pressed combo box for a spinning progress animation just because you like the color. The functions of the combo box and the animation are different, and if the color associated with the combo box changes, it may no longer be an appropriate color for your animation element. Consistent use of color helps orient your users and prevent confusion.

  • Use background and text colors in the correct combination. Background colors that are intended to be used with text will have an associated text color. Don't use text colors other than what is specified for that background. If there is not an associated text color, don't use that background color for any surface on which you expect to display text. Other combinations of text and background colors may result in an unreadable interface.

  • Use control colors that are appropriate for their location. In certain states, some Visual Studio controls do not have separate border and background colors. Instead, they pick up those colors from the surfaces behind them. Make sure that you always use the token names that are appropriate for the location where you are placing the control.

Important

Do not use tokens found in the categories "Start Page" or "Cider."

Command structures

Menus

Menus can occur at several places within Visual Studio: the main menu bar, embedded in document or tool windows, or on right-click in various locations throughout the IDE. Implementations of menus associated with other UI elements are discussed in the section for the respective element. You should always use the standard menu implementation provided by the Visual Studio environment. However, in some rare instances you might not have access to the standard Visual Studio menus. In these situations, use the following token names to ensure that your UI is consistent with other menus in Visual Studio.

Menus redline

Use …

  • whenever you need to create a custom menu.

  • when you have a new UI component that you want to match the Visual Studio menus.

Do not use … the background color alone. Always use the background/foreground combination as specified.

Menu titles consist of a background, a border, and the title text, as well as an optional glyph, usually when the menu is found in a command bar.

Menu title redline

Use… whenever you are creating a custom menu title.

Do not use…

  • for anything that you don't want to always match the menu title.

  • in any background/foreground combination other than specified.

    Default

    Component

    Element

    Token name: Category.color

    Menu title default

    Menu title

    Background

    None

    Foreground (Text)

    Environment.CommandBarTextActive

    Menu title with glyph default

    Menu title with glyph

    Foreground (Glyph)

    Environment.CommandBarMenuGlyph

    Border

    None

    Hover

    Component

    Element

    Token name: Category.color

    Menu title on hover

    Menu title

    Background

    Environment.CommandBarMouseOverBackgroundBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Text)

    Environment.CommandBarTextHover

    Menu title with glyph on hover

    Menu title with glyph

    Foreground (Glyph)

    Environment.CommandBarMenuMouseOverGlyph

    Border

    Environment.CommandBarBorder

    Pressed

    Component

    Element

    Token name: Category.color

    Menu title pressed

    Menu title

    Background

    Environment.CommandBarMenuBackgroundGradientBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Text)

    Environment.CommandBarTextActive

    Menu title with glyph pressed

    Menu title with glyph

    Foreground (Glyph)

    Environment.CommandBarMenuMouseDownGlyph

    Border

    Environment.CommandBarMenuBorder

    Only left, top, and right sides.

    Disabled

    Component

    Element

    Token name: Category.color

    Menu title with glyph disabled

    Menu title with glyph

    Background

    None

    Foreground (Text)

    Environment.CommandBarTextInactive

    Foreground (Glyph)

    Environment.CommandBarTextInactive

    Border

    None

An individual menu item consists of the menu text and an optional icon, check box, or submenu glyph. Its background and text color change on hover. This color token is a background/foreground pair.

Menu items redline

Use… for any drop-down list that is launched from a menu bar or command bar.

Do not use…

  • for any drop-down list that occurs in another context.

  • in any background/foreground combination other than specified.

    Default

    Component

    Element

    Token name: Category.color

    Menu default

    Menu

    Background

    Environment.CommandBarMenuBackgroundGradientBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Text)

    Environment.CommandBarTextActive

    Foreground (Submenu glyph)

    Environment.CommandBarMenuSubmenuGlyph

    Border

    Environment.CommandBarMenuBorder

    Icon channel background

    Environment.CommandBarMenuIconBackground

    Separator

    Environment.CommandBarMenuSeparator

    Shadow

    Environment.DropShadowBackground

    Menu checked

    Checked

    Check mark

    Environment.CommandBarCheckBox

    Check mark background

    Environment.CommandBarSelectedIcon

    Menu selected

    Selected

    Icon background

    Environment.CommandBarSelected

    Icon border

    Environment.CommandBarSelectedBorder

    Hover

    Component

    Element

    Token name: Category.color

    Menu hover

    Menu item

    Background

    Environment.CommandBarMenuItemMouseOver

    Foreground (Text)

    Environment.CommandBarMenuItemMouseOver

    Foreground (Submenu glyph)

    Environment.CommandBarMenuMouseOverSubmenuGlyph

    Menu hover checked

    Checked

    Check mark

    Environment.CommandBarCheckBoxMouseOver

    Check mark background

    Environment.CommandBarHoverOverSelectedIcon

    Menu hover selected

    Selected

    Icon background

    Environment.CommandBarHoverOverSelected

    Icon border

    Environment.CommandBarHoverOverSelectedIconBorder

    Disabled

    Component

    Element

    Token name: Category.color

    Menu disabled

    Menu item

    Foreground (Text)

    Environment.CommandBarTextInactive

    Foreground (Submenu glyph)

    Environment.CommandBarMenuSubmenuGlyph

    Menu disabled checked

    Checked

    Check mark

    Environment.CommandBarCheckBoxDisabled

    Check mark background

    Environment.CommandBarSelectedIconDisabled

Command bar

The command bar can appear in multiple places within the Visual Studio IDE, most notably the command shelf and embedded in tool or document windows.

In general, always use the standard command bar implementation provided by the Visual Studio environment. Using the standard mechanism ensures that all visual details will appear correctly and that interactive elements, will behave consistently with other Visual Studio command bar controls. However, if it is necessary for you to build your own command bar, make sure you style it correctly using the following token names.

Command bar redline

Overflow button redline

Use… in places where you need an embedded command bar but are unable to use the standard Visual Studio command bar implementation.

Do not use…

  • for UI elements that are not similar to a command bar.

  • for command bar components other than the ones for which token names are specified.

Command bar group

A command bar group consists of a related set of command bar controls and might contain any number of buttons, split buttons, drop-down menus, combo boxes, or menus. Colors for those controls are regulated by separate token names and are discussed individually elsewhere in this guide. A separator line is used to divide a command bar group into related subgroups.

Command bar group redline

Use… in places where you need an embedded command bar but are unable to use the standard Visual Studio command bar implementation.

Do not use…

  • for UI elements that are not similar to a command bar.

  • for command bar components other than the ones for which token names are specified.

    Default (no other states)

    Element

    Token name: Category.color

    Background

    Environment.CommandBarGradientBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Border

    Environment.CommandBarToolBarBorder

    Drag handle

    Environment.CommandBarDragHandle

    Separator

    Environment.CommandBarToolBarSeparator

    Environment.CommandBarToolBarSeparatorHighlight

Command icons

Command icon redline

Command icon redline

Use… for any buttons that will be placed on a command bar.

Do not use…

  • for controls that have their own token names.

  • in any background/foreground combination other than specified.

    Default

    Component

    Element

    Token name: Category.color

    Command icon default

    Default

    Background

    N/A (inherits from command bar background)

    Foreground (Text)

    Environment.CommandBarTextActive

    Border

    N/A

    Command icon default selected

    Selected

    Background

    Environment.CommandBarSelected

    Foreground (Text)

    Environment.CommandBarTextSelected

    Border

    Environment.CommandBarSelectedBorder

    Hover and keyboard focused

    Component

    Element

    Token name: Category.color

    Command icon hover

    Standard on hover

    Background

    Environment.CommandBarMouseOverBackgroundBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Text)

    Environment.CommandBarTextHover

    Border

    Environment.CommandBarBorder

    Command icon hover selected

    Selected on hover

    Background

    Environment.CommandBarHoverOverSelected

    Foreground (Text)

    Environment.CommandBarTextHoverOverSelected

    Border

    Environment.CommandBarHoverOverSelectedIconBorder

    Pressed

    Component

    Element

    Token name: Category.color

    Command icon pressed

    Pressed command icon

    Background

    Environment.CommandBarMouseDownBackgroundBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Text)

    Environment.CommandBarTextMouseDown

    Border

    Environment.CommandBarBorder

    Disabled

    Component

    Element

    Token name: Category.color

    Command icon disabled

    Disabled command icon

    Background

    N/A (inherits from command bar background)

    Foreground (Text)

    Environment.CommandBarTextInactive

    Border

    N/A

Combo box

Important

Combo boxes are similar to drop-downs, but include an editable text region. If your drop-down does not include an editable text region, use the color tokens found under Drop-down.

Combo box redline

Use …

  • when building custom combo boxes.

  • when creating a command bar control that is similar to a combo box.

    Do not use …

    • for anything you don’t want always to match the command bar UI.
  • when you have access to a styled combo box.

    Default

    Component

    Element

    Token name: Category.color

    Combo box input field

    Input field

    Background

    Environment.ComboBoxBackground

    Foreground (Text)

    Environment.ComboBoxText

    Border

    Environment.ComboBoxBorder

    Separator

    No separator

    Combo box drop-down button

    Drop-down button

    Background

    N/A (inherits)

    Foreground (Glyph)

    Environment.ComboBoxGlyph

    Combo box/drop-down list

    Drop-down list

    Background

    Environment.ComboBoxPopupBackgroundBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Text)

    Environment.ComboBoxItemText

    Border

    Environment.ComboBoxPopupBorder

    Hover

    Component

    Element

    Token name: Category.color

    Combo box input field on hover

    Input field

    Background

    Environment.ComboBoxMouseOverBackgroundBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Text)

    Environment.ComboBoxMouseOverText

    Border

    Environment.ComboBoxMouseOverBorder

    Separator

    Environment.ComboBoxMouseOverSeparator

    Combo box/drop-down button on hover

    Drop-down button

    Background

    Environment.ComboBoxButtonMouseOverBackground

    Foreground (Glyph)

    Environment.ComboBoxMouseOverGlyph

    Combo box/drop-down list on hover

    Drop-down list

    Background (Menu item)

    Environment.ComboBoxItemMouseOverBackground

    Foreground (Text)

    Environment.ComboBoxItemMouseOverText

    Border (Menu item)

    Environment.ComboBoxItemMouseOverBorder

    Focused

    Component

    Element

    Token name: Color.category

    Combo box input field focused

    Input field

    Background

    Environment.ComboBoxFocusedBackground

    Foreground (Text)

    Environment.ComboBoxFocusedText

    Border

    Environment.ComboBoxFocusedBorder

    Separator

    Environment.ComboBoxFocusedButtonSeparator

    Combo box/drop-down button focused

    Drop-down button

    Background

    Environment.ComboBoxFocusedButtonBackground

    Foreground (Glyph)

    Environment.ComboBoxFocusedGlyph

    Pressed

    Component

    Element

    Token name: Color.category

    Combo box input field pressed

    Input field

    Background

    Environment.ComboBoxMouseDownBackground

    Foreground (Text)

    Environment.ComboBoxMouseDownText

    Border

    Environment.ComboBoxMouseDownBorder

    Separator

    Environment.ComboBoxMouseDownSeparator

    Combo box/drop-down button pressed

    Drop-down button

    Background

    Environment.ComboBoxButtonMouseDownBackground

    Foreground (Glyph)

    Environment.ComboBoxMouseDownGlyph

    Disabled

    Combo box input field disabled

    Input field

    Background

    Environment.ComboBoxDisabledBackground

    Foreground (Text)

    Environment.ComboBoxDisabledText

    Border

    Environment.ComboBoxDisabledBorder

    Separator

    No separator

    Combo box/drop-down button disabled

    Drop-down button

    Background

    None

    Foreground (Glyph)

    Environment.ComboBoxDisabledGlyph

Drop-down

Important

Drop-downs are similar to combo boxes, but lack editable text regions. If your drop-down includes an editable text region, use the color tokens found under Combo box.

Drop-down redline

Use … when you are creating custom drop-down list controls.

Do not use …

  • for anything that is not similar to a drop-down list.

  • for combo boxes or split buttons.

    Default

    Component

    Element

    Token name: Category.color

    Drop-down selection field

    Selection field

    Background

    Environment.DropDownBackground

    Foreground (Text)

    DropDownText

    Border

    DropDownBorder

    Separator

    No separator

    Drop-down button

    Drop-down button

    Background

    None

    Foreground (Glyph)

    Environment.DropDownGlyph

    Drop-down list

    Drop-down list

    Background

    Environment.DropDownPopupBackgroundBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Text)

    Environment.ComboBoxItemText

    Border

    Environment.DropDownPopupBorder

    Shadow

    Environment.DropShadowBackground

    Hover

    Component

    Element

    Token name: Category.color

    Drop-down selection field on hover

    Selection field

    Background

    Environment.DropDownMouseOverBackgroundBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Text)

    Environment.DropDownMouseOverText

    Border

    Environment.DropDownMouseOverBorder

    Separator

    Environment.DropDownButtonMouseOverSeparator

    Drop-down button on hover

    Drop-down button

    Background

    Environment.DropDownButtonMouseOverBackground

    Foreground (Glyph)

    Environment.DropDownMouseOverGlyph

    Drop-down list on hover

    Drop-down list

    Background (Menu item)

    Environment.ComboBoxItemMouseOverBackground

    Foreground (Text)

    Environment.ComboBoxItemMouseOverText

    Border (Menu item)

    Environment.ComboBoxItemMouseOverBorder

    Pressed

    Component

    Element

    Token name: Category.color

    Drop-down selection field pressed

    Selection field

    Background

    Environment.DropDownMouseDownBackground

    Foreground (Text)

    Environment.DropDownMouseDownText

    Border

    Environment.DropDownMouseDownBorder

    Separator

    Environment.DropDownButtonMouseDownSeparator

    Drop-down button pressed

    Drop-down button

    Background

    Environment.DropDownButtonMouseDownBackground

    Foreground (Glyph)

    Environment.DropDownMouseDownGlyph

    Disabled

    Component

    Element

    Token name: Category.color

    Drop-down selection field disabled

    Background

    Environment.DropDownDisabledBackground

    Foreground (Text)

    Environment.DropDownDisabledText

    Border

    Environment.DropDownDisabledBorder

    Separator

    No separator

    Drop-down button disabled

    Background

    N/A

    Foreground (Glyph)

    Environment.DropDownDisabledGlyph

Split button

Split buttons share many token names with other command bar controls, such as buttons, menus, and command bar text. All necessary action and drop-down button token names are repeated here for convenience. Split button drop-down lists are implementations of command bar Menus.

Split button redline

Use … when you are building a custom split button.

Do not use …

  • for other kinds of buttons.

  • in any background/foreground combination other than specified.

    Default

    Component

    Element

    Token name: Category.color

    Split button

    Split button (default)

    Background

    None

    Foreground (Text)

    Environment.CommandBarTextActive

    Foreground (Glyph)

    Environment.CommandBarSplitButtonGlyph

    Border

    N/A

    Separator

    N/A

    Hover

    Component

    Element

    Token name: Category.color

    Split button on hover

    Split button (on hover)

    Background

    Environment.CommandBarMouseOverBackgroundBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Text)

    Environment.CommandBarTextHover

    Foreground (Glyph)

    Environment.CommandBarSplitButtonMouseOverGlyph

    Border

    Environment.CommandBarBorder

    Separator

    Environment.CommandBarSplitButtonSeparator

    Pressed

    Component

    Element

    Token name: Category.color

    Split button pressed

    Split button (pressed)

    Background

    Environment.CommandBarMouseDownBackgroundBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Text)

    Environment.CommandBarTextMouseDown

    Foreground (Glyph)

    Environment.CommandBarSplitButtonMouseDownGlyph

    Border

    Environment.CommandBarBorder

    Separator

    N/A

    Disabled

    Component

    Element

    Token name: Category.color

    Split button disabled

    Split button (disabled)

    Background

    N/A

    Foreground (Text)

    Environment.ComboBoxItemTextInactive

    Foreground (Glyph)

    Environment.CommandBarTextInactive

    Border

    N/A

    Separator

    N/A

‘More options’ and ‘Overflow’ buttons

The "More options" button is used when a command bar group is customizable by either adding or removing related command bar buttons. The "Overflow" button appears when a command bar is truncated due to lack of horizontal space, and on click shows a menu containing the command bar buttons that cannot be displayed. Colors for these two buttons are controlled by the same set of token names.

More options redline

Use … for custom 'More options' or 'Overflow' buttons.

Do not use … for buttons that don't have similar functionality to a 'More options' or 'Overflow' button.

Default

Component

Element

Token name: Category.color

More options

More options

Overflow button

Overflow

Background

Environment.CommandBarOptionsBackground

Foreground (Glyph)

Environment.CommandBarOptionsGlyph

Hover

Component

Element

Token name: Category.color

More options on hover

More options

Overflow on hover

Overflow

Background

Environment.CommandBarOptionsMouseOverBackgroundBegin

While not used in modern themed UI, there are gradient stops and values for this background.

Foreground (Glyph)

Environment.CommandBarOptionsMouseDownGlyph

Pressed

Component

Element

Token name: Category.color

More options pressed

More options

Overflow pressed

Overflow

Background

Environment.CommandBarOptionsMouseDownBackgroundBegin

While not used in modern themed UI, there are gradient stops and values for this background.

Foreground (Glyph)

Environment.CommandBarOptionsMouseDownGlyph

Document windows

There is no need to replicate document windows, because they are provided by the Visual Studio environment. However, you might decide that you want to leverage the colors used in document windows so that your UI always appears consistent with this part of the Visual Studio environment.

When using document window color tokens, you must be careful to use them only for similar elements, and always in pairs. If you do not do so, you will have unexpected results in your UI.

Document window frame

Document windows can be either docked in the IDE or floating as a separate window. When a document window is floating outside the IDE, it still sits in a document well, and has background, border, text, and tab colors that are the same as when it is part of the IDE. However, the document sits inside a frame that has its own background, border, and text colors. When tool windows are docked in the document well, they inherit the behavior and color for their tabs from document window token names.

Docked document window redline

Docked document window

Floating document window redline

Floating document window

Use … anywhere you are creating UI that you want to match the document window.

Do not use … for any UI that you don't want automatically to change if the shell has a theme update.

Default

Component

Element

Token name: Category.color

Document: docked or floating

Background

Depends on document type

Foreground (Text)

Depends on document type

Border

Environment.ToolWindowBorder

Frame focused

Frame: floating, focused

Background

Environment.ToolWindowFloatingFrame

Foreground (Text)

Environment.ToolWindowFloatingFrame

Foreground (Glyph)

Environment.RaftedWindowButtonActiveGlyph

Border

Environment.MainWindowActiveDefaultBorder

Border (Glyph)

Environment.RaftedWindowButtonActiveBorder

Set to transparent

Frame unfocused

Frame: floating, unfocused

Background

Environment.ToolWindowFloatingFrameInactive

Foreground (Text)

Environment.ToolWindowFloatingFrameInactive

Foreground (Glyph)

Environment.RaftedWindowButtonInactiveGlyph

Border

Environment.MainWindowInactiveBorder

Border (Glyph)

Environment.RaftedWindowButtonInactiveBorder

Set to transparent

Hover

Component

Element

Token name: Category.color

Frame focused on hover

Frame: floating, focused

Background (Glyph)

Environment.RaftedWindowButtonHoverActive

Foreground (Glyph)

Environment.RaftedWindowButtonHoverActiveGlyph

Border (Glyph)

Environment.RaftedWindowButtonHoverActiveBorder

Frame unfocused on hover

Frame: floating, unfocused

Background (Glyph)

EnvironmentRaftedWindowButtonHoverInactive

Foreground (Glyph)

Environment.RaftedWindowButtonHoverInactiveGlyph

Border (Glyph)

Environment.RaftedWindowButtonHoverInactiveBorder

Pressed

Component

Element

Token name: Category.color

Frame focused pressed

Frame: floating, focused

Background (Glyph)

Environment.RaftedWindowButtonDown

Foreground (Glyph)

Environment.RaftedWindowButtonDownGlyph

Border (Glyph)

Environment.RaftedWindowButtonDownBorder

Document tabs

Document tabs sit in the tab channel to indicate which documents are currently open, along with which one is the current selected or active document. Tool windows can also be docked in the document tab channel if the user places them there. In this situation, they use the same tab colors as document windows. If you are creating UI that you want to always match the document window colors (including theme updates or if new themes are installed), then reference these color tokens.

Document tab redline

Use … anywhere you are creating UI that you want to match document tabs and automatically pick up theme updates or new theme colors.

Do not use … for any UI that you don’t want to change automatically when the shell has a theme update.

Open document tabs

Each open document has a tab in the document tab channel that displays its name. Documents can be either selected or open in the background, and their tabs reflect these states:

  • The selected tab represents the document that is currently displayed in the document well. A selected tab has a document border that extends across the top edge of the document well.

  • Background tabs are any document tabs that are not the currently selected tab. Once clicked, they become the selected tab and acquire all background, border, and text colors from those token names.

    Open document tab redline

    Use … when you are creating custom document tabs.

    Do not use …

    • for provisional (preview) tabs.
  • for any UI that you don't want to change automatically if the shell has a theme update.

Selected tab

Focused

Component

Element

Token name: Category.color

Selected tab focused

Selected document tab, focused

Background

Environment.FileTabSelectedGradientTop

While not used in modern themed UI, there are gradient stops and values for this background.

Foreground (Text)

Environment.FileTabSelectedText

Border

Environment.FileTabSelectedBorder

Set to same color as background.

Document border

Environment.FileTabDocumentBorderBackground

Unfocused

Component

Element

Token name: Category.color

Selected tab unfocused

Selected document tab, unfocused

Background

Environment.FileTabInactiveGradientTop

While not used in modern themed UI, there are gradient stops and values for this background.

Foreground (Text)

Environment.FileTabInactiveText

Border

Environment.FileTabInactiveBorder

Set to same color as background.

Document border

Environment.FileTabInactiveDocumentBorderBackground

Background tab

Default

Background tab

Background tab default

Background

Environment.FileTabBackground

Foreground (Text)

Environment.FileTabText

Border

Environment.FileTabBorder

Set to same color as background.

Hover

Background tab on hover

Background tab on hover

Background

Environment.FileTabHotGradientTop

While not used in modern themed UI, there are gradient stops and values for this background.

Foreground (Text)

Environment.FileTabHotText

Border

Environment.FileTabHotBorder

Set to same color as background.

Preview tab

The preview tab appears on the right side of the document tab channel when the user clicks an item in the Solution Explorer tool window. It acts as a preview of the document and also gives the user the option to keep the document open on the left side of the document tab channel. Only one preview tab open can be open at a time. Preview tabs have both background and selected states, like open tabs, and can be focused or unfocused in their active state.

Preview tab redline

Use … anywhere you are creating provisional preview and want some element to match the current preview tab color.

Do not use …

  • for any kind of document or tab that is not provisional (preview).

  • for any UI that you don't want to change automatically if the shell has a theme update.

    Selected preview tab: Focused

    Component

    Element

    Token name: Category.color

    Preview tab focused

    Focused preview tab

    Background

    Environment.FileTabProvisionalSelectedActive

    Foreground (Text)

    Environment.FileTabProvisionalSelectedActiveForeground

    Border

    Environment.FileTabProvisionalSelectedActiveBorder

    Set to same color as background.

    Document border

    Environment.FileTabProvisionalSelectedActiveBorder

    Selected preview tab: Unfocused

    Component

    Element

    Token name: Category.color

    Preview tab unfocused

    Unfocused preview tab

    Background

    Environment.FileTabProvisionalSelectedInactive

    Foreground (Text)

    Environment.FileTabProvisionalSelectedInactiveForeground

    Border

    Environment.FileTabProvisionalSelectedInactiveBorder

    Document border

    Environment.FileTabProvisionalSelectedInactiveBorder

    Background preview tab: Default

    Component

    Element

    Token name: Category.color

    Preview background tab

    Preview tab background tab

    Background

    Environment.FileTabProvisionalInactive

    Foreground (Text)

    Environment.FileTabProvisionalInactiveForeground

    Border

    Environment.FileTabProvisionalInactiveBorder

    Set to same color as background.

    Background preview tab: Hover

    Component

    Element

    Token name: Category.color

    Preview background tab on hover

    Preview tab background tab on hover

    Background

    Environment.FileTabProvisionalHover

    Foreground (Text)

    Environment.FileTabProvisionalHoverForeground

    Border

    Environment.FileTabProvisionalHoverBorder

    Set to same color as background.

Document overflow button

The document overflow button is present if there are one or more documents open, regardless of whether there is vertical space in the current configuration to fit all document tabs. The document overflow drop-down menu, which is controlled by the CommandBarMenu colors (see Menus), displays a list of all open documents, both visible and hidden, and the overflow glyph changes depending on whether all the open documents are displayed in the tab channel.

Overflow redline

Use … when you are creating a custom document overflow button.

Do not use …

  • for UI that is not similar to an overflow button.

  • for command bar overflow buttons.

    Default

    Component

    Element

    Token name: Category.color

    Overflow

    Document overflow button

    Background

    Environment.DocWellOverflowButtonBackground

    Foreground (Glyph)

    Environment.DocWellOverflowButtonGlyph

    Border

    N/A

    Hover

    Component

    Element

    Token name: Category.color

    Overflow on hover

    Document overflow button on hover

    Background

    Environment.DocWellOverflowButtonMouseOverBackground

    Foreground (Glyph)

    Environment.DocWellOverflowButtonMouseOverGlyph

    Border

    Environment.DocWellOverflowButtonMouseOverBorder

    Pressed

    Component

    Element

    Token name: Category.color

    Overflow pressed

    Pressed document overflow button

    Background

    Environment.DocWellOverflowButtonMouseDownBackground

    Foreground (Glyph)

    Environment.DocWellOverflowButtonMouseDownGlyph

    Border

    Environment.DocWellOverflowButtonMouseDownBorder

Tool windows

There is no need to replicate tool windows, because they are provided by the Visual Studio environment. However, you might decide that you want to leverage the colors used in tool windows so that your UI always appears consistent with this part of the Visual Studio environment.

Tool window redline

Use … anywhere you are creating UI that you want to match tool windows.

Do not use … for any UI that you don't want to change automatically if the shell has a theme update.

Tool window frame

Tool windows in Visual Studio are used for many different tasks, and can exist in one of several different states. If a tool window is open, it can be assigned to any of the four sides of the document area. Tool windows can also float outside of the IDE, which allows them to be repositioned anywhere within the user's screen. Floating windows always sit on top of the IDE. Finally, tool windows can be docked as document windows and appear as a tab in the document well. Tool windows that have been docked as document windows are colored in part using document window token names.

Tool window frame redline

Use … anywhere you are creating UI that you want to match tool windows.

Do not use … for any UI that you don't want to change automatically if the shell has a theme update.

Docked

Component

Element

Token name: Category.color

Tool window docked

Background

Environment.ToolWindowBackground

Border

Environment.ToolWindowBorder

Floating: focused

Component

Element

Token name: Category.color

Tool window focused

Background

Environment.ToolWindowBackground

Border

Environment.MainWindowActiveDefaultBorder

Floating: unfocused

Component

Element

Token name: Category.color

Tool window unfocused

Background

Environment.ToolWindowBackground

Border

Environment.MainWindowInactiveBorder

Tool window title bar

The title bar border is not a true border, but a thick line across the top of the title bar. It does not have a token name for its unfocused state.

Tool window title bar redline

Use … anywhere you are creating UI that you want to match tool windows.

Do not use … for any UI that you don't want to change automatically if the shell has a theme update.

Focused

Component

Element

Token name: Category.color

Title bar focused

Focused title bar

Background

Environment.TitleBarActiveGradientBegin

While not used in modern themed UI, there are gradient stops and values for this background.

Foreground (Text)

Environment.TitleBarActiveText

Border

Environment.TitleBarActiveBorder

Set to same color as background.

Drag handle

Environment.TitleBarDragHandleActive

Unfocused

Component

Element

Token name: Category.color

Title bar unfocused

Unfocused title bar

Background

Environment.TitleBarInactiveGradientBegin

While not used in modern themed UI, there are gradient stops and values for this background.

Foreground (Text)

Environment.TitleBarInactiveText

Border

N/A

Drag handle

Environment.TitleBarDragHandle

Title bar buttons

Title bar button redline

Use … for buttons that appear in UI that uses color tokens from the tool window title bars.

Do not use …

  • for buttons that appear in other locations.

  • in any background/foreground combination other than specified.

    Default

    Component

    Element

    Token name: Category.color

    Title bar button focused

    Focused

    Background

    N/A

    Foreground (Glyph)

    Environment.ToolWindowButtonActiveGlyph

    Border

    N/A

    Title bar button unfocused

    Unfocused

    Background

    N/A

    Foreground (Glyph)

    Environment.ToolWindowButtonInactiveGlyph

    Border

    N/A

    Hover

    Component

    Element

    Token name: Category.color

    Title bar button focused on hover

    Focused

    Background

    Environment.ToolWindowButtonHoverActive

    Foreground (Glyph)

    Environment.ToolWindowButtonHoverActiveGlyph

    Border

    Environment.ToolWindowButtonHoverActiveBorder

    Title bar button unfocused on hover

    Unfocused

    Background

    Environment.ToolWindowButtonHoverInactive

    Foreground (Glyph)

    Environment.ToolWindowButtonHoverInactiveGlyph

    Border

    Environment.ToolWindowButtonHoverInactiveBorder

    Pressed

    Component

    Element

    Token name: Category.color

    Title bar button focused and pressed

    Focused

    Background

    Environment.ToolWindowButtonDown

    Foreground (Glyph)

    Environment.ToolWindowButtonDownActiveGlyph

    Border

    Environment.ToolWindowButtonDownBorder

    Title bar button unfocused and pressed

    Unfocused

    Background

    Environment.ToolWindowButtonDown

    Foreground (Glyph)

    Environment.ToolWindowButtonDownInactiveGlyph

    Border

    Environment.ToolWindowButtonDownBorder

Tool window tabs

Tool window tab redline

Use … anywhere you are creating UI that you want to match tool windows.

Do not use … for any UI that you don't want to change automatically if the shell has a theme update.

Selected tab

Component

Element

Token name: Category.color

Tool window tab focused

Selected, focused tool window tab

Background

Environment.ToolWindowTabSelectedTab

Foreground (Text)

Environment.ToolWindowTabSelectedActiveText

Border

Environment.ToolWindowTabSelectedBorder

Set to same color as background.

Component

Element

Token name: Category.color

Tool window tab unfocused

Selected, unfocused tool window tab

Background

Environment.ToolWindowTabSelectedTab

Foreground (Text)

Environment.ToolWindowTabSelectedText

Border

Environment.ToolWindowTabSelectedBorder

Set to same color as background.

Background tab

Component

Element

Token name: Category.color

Tool window background tab

Background tool window tab

Background

Environment.ToolWindowTabGradientBegin

Gradient stops set to the same color value in Visual Studio 2013.

Environment.ToolWindowTabGradientEnd

Gradient stops set to the same color value in Visual Studio 2013.

Foreground (Text)

Environment.ToolWindowTabText

Border

Environment.ToolWindowTabBorder

Component

Element

Token name: Category.color

Tool window background tab on hover

Background tool window tab on hover

Background

Environment.ToolWindowTabMouseOverBackgroundBegin

Gradient stops set to the same color value in Visual Studio 2013.

Environment.ToolWindowTabMouseOverBackgroundEnd

Gradient stops set to the same color value in Visual Studio 2013.

Foreground (Text)

Environment.ToolWindowTabMouseOverText

Border

Environment.ToolWindowTabMouseOverBorder

Set to same color as background.

Auto-hide tabs

Auto-hide redline

Use … anywhere you are creating UI that you want to match auto-hidden tool window tabs.

Do not use … for any UI that you don’t want to change automatically if the shell has a theme update.

Default

Component

Element

Token name: Category.color

Auto-hide tab

Default auto-hide tab

Background

Environment.AutoHideTabBackgroundBegin

While not used in modern themed UI, there are gradient stops and values for this background.

Foreground (Text)

Environment.AutoHideTabText

Border

Environment.AutoHideTabBorder

Hover

Component

Element

Token name: Category.color

Auto-hide tab on hover

Auto-hide tab on hover

Background

Environment.AutoHideTabMouseOverBackgroundBegin

While not used in modern themed UI, there are gradient stops and values for this background.

Foreground (Text)

Environment.AutoHideTabMouseOverText

Border

Environment.AutoHideTabMouseOverBorder

Common shared controls

When you use a standard Visual Studio command bar in your feature, you will have access to styled shell controls, and you should not re-template these common controls. However, if you need to build a custom command bar, you might need to build custom controls as well. In that case, make sure to use the correct token names for each of the following controls so that your UI is consistent with the rest of Visual Studio.

Whenever possible, use the common search control provided by the Visual Studio environment. Search box colors are found in the "SearchControl" category in the ShellColors.pkgdef file, which contains token names for the input field, action button, drop-down button, and drop-down menu.

A search box can be one of several states, some of which are mutually exclusive:

  • "Focused" or "unfocused" refers to whether or not the cursor is in the text box.

  • "Active" or "inactive" refers to whether the user has input a search query in the text box.

  • "Hover" means that the user has moused over the search box with the mouse (this state overrides all other states).

  • "Disabled" means that search functionality is turned off for the current context.

    Search box redline

    Use … when you are designing a custom search box.

    Do not use …

    • for anything that is not a search box.
  • for anything that you do not want always to match the search box UI.

    Focused

    Component

    Element

    Token name: Category.color

    Search input field focused

    Input field

    Background

    SearchControl.FocusedBackground

    Foreground (Text)

    SearchControl.FocusedBackground

    Border

    SearchControl.FocusedBorder

    Separator

    SearchControl.FocusedDropDownSeparator

    Search action button focused

    Action button

    Background

    None

    Foreground (Search glyph)

    SearchControl.SearchGlyph

    Foreground (Stop glyph)

    SearchControl.StopGlyph

    Foreground (Clear glyph)

    SearchControl.ClearGlyph

    Border

    N/A

    Search drop-down button focused

    Drop-down button

    Background

    SearchControl.FocusedDropDownButton

    Foreground (Glyph)

    SearchControl.FocusedDropDownButtonGlyph

    Border

    SearchControl.FocusedDropDownButtonBorder

    Unfocused

    Component

    Element

    Token name: Category.color

    Search input field unfocused

    Active input field

    Background

    SearchControl.SearchActiveBackground

    Foreground (Text)

    SearchControl.SearchActiveBackground

    Border

    SearchControl.UnfocusedBorder

    Separator

    SearchControl.DropDownSeparator

    Search input field unfocused and inactive

    Inactive input field

    Background

    SearchControl.Unfocused

    Foreground (Text)

    SearchControl.Unfocused

    Border

    SearchControl.UnfocusedBorder

    Separator

    SearchControl.DropDownSeparator

    Search action button unfocused

    Action button

    Background

    N/A

    Foreground (Search glyph)

    SearchControl.SearchGlyph

    Foreground (Stop glyph)

    SearchControl.StopGlyph

    Foreground (Clear glyph)

    SearchControl.ClearGlyph

    Border

    N/A

    Search drop-down button unfocused

    Drop-down button

    Background

    SearchControl.UnfocusedDropDownButton

    Foreground (Glyph)

    SearchControl.UnfocusedDropDownButtonGlyph

    Border

    SearchControl.UnfocusedDropDownButtonBorder

    Pressed

    Component

    Element

    Token name: Category.color

    Search action button pressed

    Action button

    Background

    SearchControl.ActionButtonMouseDown

    Foreground (Glyph)

    SearchControl.ActionButtonMouseDownGlyph

    Border

    SearchControl.ActionButtonMouseDownBorder

    Search drop-down button pressed

    Drop-down button

    Background

    SearchControl.MouseDownDropDownButton

    Foreground (Glyph)

    SearchControl.MouseDownDropDownButtonGlyph

    Border

    SearchControl.MouseDownDropDownButtonBorder

    Highlighted (Text only)

    Component

    Element

    Token name: Category.color

    Search input field highlight

    Input field with text highlighted

    Background

    SearchControl.Selection

    Foreground (Text)

    SearchControl.FocusedBackground

    Border

    None

    Separator

    SearchControl.FocusedDropDownSeparator

    Disabled

    Component

    Element

    Token name: Category.color

    Search input field disabled

    Input field

    Background

    SearchControl.Disabled

    Foreground (Text)

    SearchControl.Disabled

    Border

    SearchControl.DisabledBorder

    Separator

    SearchControl.DropDownSeparator

    Search action button disabled

    Action button

    Background

    None

    Foreground (Glyph)

    SearchControl.ActionButtonDisabledGlyph

    Border

    None

    Search drop-down button disabled

    Drop-down button

    Background

    None

    Foreground (Glyph)

    SearchControl.DisabledDownButtonGlyph

    Border

    None

Search drop-down lists

The search box dropdown menu has the potential to be slightly more complex than other dropdown menus in Visual Studio. The "suggested searches" and "search options" sections can appear alone or together in the menu and each one is colored separately. A line also separates these two sections when they appear together and a border surrounds the entire dropdown menu.

Search drop-down redline

Use …

  • when you are creating a custom search dropdown list.

  • the correct token names for the correct list components.

    Do not use …

    • for dropdown lists that appear in other contexts.
  • in any background/foreground combination other than specified.

    Default (no other states)

    Element

    Token name: Category.color

    Border

    SearchControl.PopupBorder

    Separator

    SearchControl.PopupSectionHeaderSeparator

    Shadow

    Environment.DropShadowBackground

    Default

    Component

    Element

    Token name: Category.color

    Search suggested

    Suggested searches

    Background

    SearchControl.PopupItemsListBackgroundGradientBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Text)

    SearchControl.PopupItemText

    Search check box

    Search options (check box)

    Search options

    Search options (link)

    Background

    SearchControl.PopupSectionBackgroundGradientBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Check box text)

    SearchControl.PopupCheckboxText

    Foreground (Link text)

    SearchControl.PopupButtonText

    Header background

    SearchControl.PopupSectionHeaderGradientBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Header text)

    SearchControl.PopupSectionHeaderText

    Hover

    Component

    Element

    Token name: Category.color

    Search suggested on hover

    Suggested searches

    Background

    SearchControl.PopupControlMouseOverBackgroundGradientBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Text)

    SearchControl.PopupMouseOverItemText

    Border

    SearchControl.PopupControlMouseOverBorder

    Search check box on hover

    Suggested searches (check box)

    Search options on hover

    Search options

    Background

    SearchControl.PopupControlMouseOverBackgroundGradientBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Check box text)

    SearchControl.PopupCheckboxMouseDownText

    Foreground (Link text)

    SearchControl.PopupButtonMouseDownText

    Border

    SearchControl.PopupControlMouseOverBorder

    Pressed

    Component

    Element

    Token name: Category.color

    Search suggested pressed

    Suggested searches (check box)

    Search options pressed

    Search options

    Check box background

    SearchControl.PopupControlMouseDownBackgroundGradientBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    SearchControl.PopupControlMouseDownBackgroundGradientEnd

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Check box text)

    SearchControl.PopupCheckboxMouseDownText

    Link background

    SearchControl.PopupButtonMouseDownBackgroundGradientBegin

    While not used in modern themed UI, there are gradient stops and values for this background.

    Foreground (Link text)

    SearchControl.PopupButtonMouseDownText

The hyperlink is one control that does not have a foreground/background pair. In all cases, use the foreground hyperlink color, which will appear correctly on dark, gray and white backgrounds. If you do not use the color token for the hyperlink control, you will see the default system color for "pressed,"" which will flash red. That is the signal that the control is not using the correct environment color token.

Hyperlink redline

Use … when you need to create a custom hyperlink.

Do not use … for anything that is not a hyperlink.

Default

Component

Element

Token name: Category.color

Hyperlink default

Foreground (Text)

Environment.PanelHyperlink

Hover

Component

Element

Token name: Category.color

Hyperlink on hover

Foreground (Text)

Environment.PanelHyperlinkHover

Pressed

Component

Element

Token name: Category.color

Hyperlink pressed

Foreground (Text)

Environment.PanelHyperlinkPressed

Disabled

Component

Element

Token name: Category.color

Hyperlink disabled

Foreground (Text)

Environment.PanelHyperlinkDisabled

Infobar

Infobars are used to provide more information about a given context and always appear at the top of a document window or tool window.

Infobar redline

Use … when creating custom infobars.

Do not use … for UI elements that are not similar to an infobar.

Component

Element

Token name: Category.color

Infobar

Infobar

Background

Environment.InfoBackground

Foreground (Text)

Environment.InfoText

Border

Environment.ToolWindowBorder

Scroll bar

Scroll bars are styled by the Visual Studio environment, and will not need to be themed. However, you might decide that you want to leverage the colors used in scroll bars so that your UI always appears consistent with this part of the Visual Studio environment.

Scroll bar redline

Use … when you are creating UI that you want to match Visual Studio scrollbars.

Do not use ... for anything you don't want to always match scrollbar UI.

Default

Component

Element

Token name: Category.color

Scroll bar

Scrollbar

Scrollbar

Environment.ScrollBarBackground

Foreground (Thumb)

Environment.ScrollBarThumbBackground

Scroll bar arrow

Scroll arrow

Background

Environment.ScrollBarArrowBackground

Set to same color as scroll bar.

Foreground (Glyph)

Environment.ScrollBarArrowGlyph

Hover

Component

Element

Token name: Category.color

Scroll bar on hover

Scrollbar

Scrollbar

Environment.ScrollBarBackground

Foreground (Thumb)

Environment.ScrollBarThumbMouseOverBackground

Scroll bar arrow on hover

Scroll arrow

Background

Environment.ScrollBarArrowMouseOverBackground

Set to same color as scroll bar.

Foreground (Glyph)

Environment.ScrollBarArrowGlyphMouseOver

Pressed

Component

Element

Token name: Category.color

Scroll bar pressed

Scrollbar

Scrollbar

Environment.ScrollBarBackground

Foreground (Thumb)

Environment.ScrollBarThumbPressedBackground

Scroll bar arrow pressed

Scroll arrow

Background

Environment.ScrollBarArrowPressedBackground

Set to same color as scrollbar.

Foreground (Glyph)

Environment.ScrollBarArrowGlyphPressed

Tree view

Several tool windows, including the Solution Explorer, Server Explorer, and Class View, implement a hierarchical organizational scheme whose colors are controlled by color names in the TreeView category. All items in a tree view have background and text colors. Items that have nested child elements also have glyphs that indicate whether the item is expanded or collapsed.

Tree view redline

Use … anywhere you need to implement a hierarchical organizational view.

Do not use …

  • for anything that is not similar to a tree view.

  • in any background/foreground combination other than specified.

    Default

    Component

    Element

    Token name: Category.color

    Tree view

    Background

    TreeView.Background

    Foreground (Text)

    TreeView.Background

    Foreground (Glyph)

    TreeView.Glyph

    Border

    None

    Hover

    Component

    Element

    Token name: Category.color

    Tree view on hover

    Background

    TreeView.Background

    Foreground (Text)

    TreeView.Background

    Foreground (Glyph)

    TreeView.GlyphMouseOver

    Border

    None

    Drag over

    Component

    Element

    Token name: Category.color

    Tree view dragover

    Background

    TreeView.DragOverItem

    Foreground (Text)

    TreeView.DragOverItem

    Foreground (Glyph)

    TreeView.DragOverItemGlyph

    Border

    None

    Selected

    Component

    Element

    Token name: Category.color

    Tree view focused

    Focused

    Background

    TreeView.SelectedItemActive

    Foreground (Text)

    TreeView.SelectedItemActive

    Foreground (Glyph)

    TreeView.SelectedItemActiveGlyph

    Border

    TreeView.FocusVisualBorder

    Tree view unfocused

    Unfocused

    Background

    TreeView.SelectedItemInactive

    Foreground (Text)

    TreeView.SelectedItemInactive

    Foreground (Glyph)

    TreeView.SelectedItemInactiveGlyph

    Border

    None

    Hover over selected

    Component

    Element

    Token name: Category.color

    Tree view focused on hover

    Focused

    Background

    TreeView.SelectedItemActive

    Foreground (Text)

    TreeView.SelectedItemActive

    Foreground (Glyph)

    TreeView.SelectedItemActiveGlyphMouseOver

    Border

    NoneTreeView.FocusVisualBorder

    Tree view unfocused on hover

    Unfocused

    Background

    TreeView.SelectedItemInactive

    Foreground (Text)

    TreeView.SelectedItemInactive

    Foreground (Glyph)

    TreeView.SelectedItemActiveGlyphMouseOver

    Border

    None

Button controls

Button control redline

Use … for buttons in the document well that you want to integrate with Visual Studio themes (Light, Dark, Blue, or a system High Contrast theme).

Do not use … for buttons that will display against a custom background that is not part of a Visual Studio theme.

Default

Component

Element

Token name: Category.color

Button

Button

CommonControls.Button

Button border

CommonControls.ButtonBorder

Disabled

Component

Element

Token name: Category.color

Button disabled

Button

CommonControls.ButtonDisabled

Button border

CommonControls.ButtonBorderDisabled

Hover

Component

Element

Token name: Category.color

Button on hover

Button

CommonControls.ButtonHover

Button border

CommonControls.ButtonBorderHover

Pressed

Component

Element

Token name: Category.color

Button pressed

Button

CommonControls.ButtonPressed

Button border

CommonControls.ButtonBorderPressed

Focused

Component

Element

Token name: Category.color

Button focused

Button

CommonControls.ButtonFocused

Button border

CommonControls.ButtonBorderFocused

Check box controls

Check box redline

Use … for check box controls contained within the document well.

Do not use … for any UI that is not a check box control.

Default

Component

Element

Token name: Category.color

Check box

Background

CommonControls.CheckBoxBackground

Border

CommonControls.CheckBoxBorder

Text

CommonControls.CheckBoxText

Glyph

CommonControls.CheckBoxGlyph

Disabled

Component

Element

Token name: Category.color

Check box disabled

Background

CommonControls.CheckBoxBackgroundDisabled

Border

CommonControls.CheckBoxBorderDisabled

Text

CommonControls.CheckBoxTextDisabled

Glyph

CommonControls.CheckBoxGlyphDisabled

Hover

Component

Element

Token name: Category.color

Check box on hover

Background

CommonControls.CheckBoxBackgroundHover

Border

CommonControls.CheckBoxBorderHover

Text

CommonControls.CheckBoxTextHover

Glyph

CommonControls.CheckBoxGlyphHover

Pressed

Component

Element

Token name: Category.color

Check box pressed

Background

CommonControls.CheckBoxBackgroundPressed

Border

CommonControls.CheckBoxBorderPressed

Text

CommonControls.CheckBoxTextPressed

Glyph

CommonControls.CheckBoxGlyphPressed

Focused

Component

Element

Token name: Category.color

Check box focused

Background

CommonControls.CheckBoxBackgroundFocused

Border

CommonControls.CheckBoxBorderFocused

Text

CommonControls.CheckBoxTextFocused

Glyph

CommonControls.CheckBoxGlyphFocused

Drop box/combo box controls

Drop-down/combo box redline

Use … for drop-downs and combo boxes that are part of the document well.

Do not use …

  • for any UI that is not a drop-down or combo box.

  • for a Drop-down or Combo box in the command bar.

    Default

    Component

    Element

    Token name: Category.color

    Drop-down/combo box

    Background

    CommonControls.ComboBoxBackground

    Border

    CommonControls.ComboBoxBorder

    Text

    CommonControls.ComboBoxText

    Separator

    CommonControls.ComboBoxSeparator

    Glyph

    CommonControls.ComboBoxGlyph

    Glyph background

    CommonControls.ComboBoxGlyphBackground

    Disabled

    Component

    Element

    Token name: Category.color

    Drop-down/combo box disabled

    Background

    CommonControls.ComboBoxBackgroundDisabled

    Border

    CommonControls.ComboBoxBorderDisabled

    Text

    CommonControls.ComboBoxTextDisabled

    Separator

    CommonControls.ComboBoxSeparatorDisabled

    Glyph

    CommonControls.ComboBoxGlyphDisabled

    Glyph background

    CommonControls.ComboBoxGlyphBackgroundDisabled

    Hover

    Component

    Element

    Token name: Category.color

    Drop-down/combo box on hover

    Background

    CommonControls.ComboBoxBackgroundHover

    Border

    CommonControls.ComboBoxBorderHover

    Text

    CommonControls.ComboBoxTextHover

    Separator

    CommonControls.ComboBoxSeparatorHover

    Glyph

    CommonControls.ComboBoxGlyphHover

    Glyph background

    CommonControls.ComboBoxGlyphBackgroundHover

    Pressed

    Component

    Element

    Token name: Category.color

    Drop-down/combo box pressed

    Background

    CommonControls.ComboBoxBackgroundPressed

    Border

    CommonControls.ComboBoxBorderPressed

    Text

    CommonControls.ComboBoxTextPressed

    Separator

    CommonControls.ComboBoxSeparatorPressed

    Glyph

    CommonControls.ComboBoxGlyphPressed

    Glyph background

    CommonControls.ComboBoxGlyphBackgroundPressed

    Focused

    Component

    Element

    Token name: Category.color

    Drop-down/combo box focused

    Background

    CommonControls.ComboBoxBackgroundFocused

    Border

    CommonControls.ComboBoxBorderFocused

    Text

    CommonControls.ComboBoxTextFocused

    Separator

    CommonControls.ComboBoxSeparatorFocused

    Glyph

    CommonControls.ComboBoxGlyphFocused

    Glyph background

    CommonControls.ComboBoxGlyphBackgroundFocused

    Text input selection

    Component

    Element

    Token name: Category.color

    Drop-down/combo box text input

    Highlight

    CommonControls.ComboBoxTextInputSelection

    Pressed – List item view

    Drop-down/combo box list view

    Background

    CommonControls.ComboBoxListBackground

    CommonControls.ComboBoxListBackgroundHover

    CommonControls.ComboBoxListItemBackgroundPressed

    CommonControls.ComboBoxListItemBackgroundFocused

    Border

    CommonControls.ComboBoxListBorder

    CommonControls.ComboBoxListBorderHover

    CommonControls.ComboBoxListBorderPressed

    CommonControls.ComboBoxListBorderFocused

    Item text

    CommonControls.ComboBoxListItemText

    CommonControls.ComboBoxListItemTextHover

    CommonControls.ComboBoxListItemTextPressed

    CommonControls.ComboBoxListItemTextFocused

    Background shadow

    CommonControls.ComboBoxListBackgroundShadow

Tabular data (grid) controls

Tabular data controls, also known as grid controls, are common controls for Visual Studio that can be used to present large amounts of data in multiple columns. Standard tabular data controls can be found in multiple places within Visual Studio: the Error List tool window, IntelliTrace reports, and memory heap view, among others. Always use the standard tabular data controls provided. In some rare instances, you might not have access to the standard tabular data controls. In these situations, use the following token names to ensure that your UI is consistent with other tabular data controls in Visual Studio.

Tabular data (grid control) redline

Use … for tabular or grid controls.

Do not use … for any UI that is not a tabular or grid control.

Column headers

Column headers consist of a background, a border, the title text, and an optional glyph usually used when a grid is sorted by that column.

State

Element

Token name: Category.color

Default

Background

Header.Default

Foreground (Text)

Environment.CommandBarTextActive

Foreground (Glyph)

Header.Glyph

Border

Header.SeparatorLine

Hover

Background

Header.MouseOver

Foreground (Text)

Environment.CommandBarTextHover

Foreground (Glyph)

Header.MouseOverGlyph

Border

Header.SeparatorLine

Pressed

Background

CommonControls.CheckBoxBackgroundPressed

Foreground (Text)

CommonControls.CheckBoxBorderPressed

Foreground (Glyph)

CommonControls.CheckBoxTextPressed

Border

CommonControls.CheckBoxGlyphPressed

List view items

List view items consist of a background and the content. The content can be text, an icon, or both.

State

Element

Token name: Category.color

Default

Background

Transparent

Foreground (Text)

Environment.CommandBarTextActive

Border

None

Selected (active)

Background

TreeView.SelectedItemActive

Foreground (Text)

TreeView.SelectedItemActiveText

Border

None

Selected (inactive)

Background

TreeView.SelectedItemInactive

Foreground (Text)

TreeView.SelectedItemInactiveText

Border

None

Manifest Designer

The Manifest Designer was designed as a way to make it easier to edit the manifest file in Windows 8 and Windows Phone 8 projects. While there is no shared framework available for consumption, it might be appropriate for you to match the design layout and colors of the orientation/navigation tabs and overall structure. For more information about layout details, see Layout for Visual Studio.

Manifest Designer redline

Use …

  • for designers that are similar to the Manifest Designer.

  • in place of using common tab controls at the top of an editor within the document well.

Do not use …

  • if you have more than six tabs.

  • for any UI that is not structured like the Manifest Designer.

    State

    Component

    Element

    Token name: Category.color

    Default (selected)

    Tab

    Background

    ManifestDesigner.TabActive

    Border

    None

    Description pane

    Background

    ManifestDesigner.DescriptionPane

    Content page

    Background

    ManifestDesigner.Background

    Dialog helper text

    ManifestDesigner.WatermarkText

    This token name does not match its function.

    Non-selected

    Tab

    Background

    ManifestDesigner.Tab.Inactive

    Hover

    Tab

    Background

    ManifestDesigner.Tab.Mouseover

Tagging

Visual Studio supports tagging, which allows a user to declare searchable keywords for tracking purposes. For example, project managers and developers can use Team Foundation Server (TFS) to tag work items. The tables below give color names for both the tag itself and the "close icon" glyph that appears in hover and selected states.

Tagging redline

Use … for UI that supports tagging.

Do not use … for any other type of UI.

Tag

Component

Element

Token name: Category.color

Tag

Default

Background

Tag.Background

Foreground (Text)

Tag.Background

Tag on hover

Hover

Background

Tag.HoverBackground

Foreground (Text)

Tag.HoverBackgroundText

Tag pressed

Pressed

Background

Tag.PressedBackground

Foreground (Text)

Tag.PressedBackgroundText

Tag selected

Selected

Background

Tag.SelectedBackground

Foreground (Text)

Tag.SelectedBackgroundText

Glyph (close icon)

Default

Component

Element

Token name: Category.color

Tag (glyph)

Default (tag default)

Background

N/A

Foreground (Glyph)

Tag.TagHoverGlyph

Hover

Component

Element

Token name: Category.color

Tag (glyph) on hover

Hover (tag default)

Background

Tag.TagHoverGlyphHoverBackground

Foreground (Glyph)

Tag.TagHoverGlyphHover

Border

Tag.TagHoverGlyphHoverBorder

Pressed

Component

Element

Token name: Category.color

Tag (glyph) pressed

Pressed (tag default)

Background

Tag.TagHoverGlyphPressedBackground

Foreground (Glyph)

Tag.TagHoverGlyphPressed

Border

Tag.TagHoverGlyphPressedBorder

Tag selected/glyph default

Component

Element

Token name: Category.color

Tag selected

Default (tag selected)

Background

N/A

Foreground (Glyph)

Tag.TagSelectedGlyph

Tag selected/glyph hover

Component

Element

Token name: Category.color

Tag selected on hover

Hover (tag selected)

Background

Tag.TagSelectedGlyphHoverBackground

Foreground (Glyph)

Tag.TagSelectedGlyphHover

Border

Tag.TagSelectedGlyphHoverBorder

Tag selected/glyph pressed

Component

Element

Token name: Category.color

Tag selected pressed

Pressed (tag selected)

Background

Tag.TagSelectedGlyphPressedBackground

Foreground(Glyph)

Tag.TagSelectedGlyphPressed

Border

Tag.TagSelectedGlyphPressedBorder

Shell

Background

The environment background consists of two layers. The bottom layer is a solid color that covers the entire IDE. The top layer fits under the command shelf and between the tool window auto-hide channels on the left and right edges of the IDE. As of Visual Studio 2013, the top and bottom background layers are set to the same color in the Light and Dark themes.

Shell background redline

Use … for places that you want to match the background of the Visual Studio environment.

Do not use …

  • as a fill for places that are not background surfaces.

  • as a background on which you wish to place foreground elements.

    Component

    Element

    Token name: Category.color

    Bottom layer

    Background

    Environment.EnvironmentBackground

    Component

    Element

    Token name: Category.color

    Top layer

    Background

    Gradient stops set to the same color value in Visual Studio 2013 Light and Dark themes.

    Environment.EnvironmentBackgroundGradientBegin

    Environment.EnvironmentBackgroundGradientEnd

    Environment.EnvironmentBackgroundGradientMiddle1

    Environment.EnvironmentBackgroundGradientMiddle2

Command shelf

Two sets of token names are used for the command shelf backgrounds: one set for where the menu bar sits and one for where the command bars sit. An individual command bar group has its own background color values, which are discussed in more detail in the "command bar" section. Menu bar and command bar text is discussed in the menu and command bar sections, respectively.

Command shelf redline

Use …

  • for areas where you place menus or toolbars.

  • with the correct background/?foreground token name combination.

Do not use … for areas that are not similar to a command shelf.

Component

Element

Token name: Category.color

Menu bar

Background

Gradient stops set to the same color value in Visual Studio 2013 Light and Dark themes.

Environment.CommandShelfHighlightGradientBegin

Environment.CommandShelfHighlightGradientMiddle

Environment.CommandShelfHighlightGradientEnd

Command bar

Background

Gradient stops set to the same color value in Visual Studio 2013 Light and Dark themes.

Environment.CommandShelfBackgroundGradientBegin

Environment.CommandShelfBackgroundGradientMiddle

Environment.CommandShelfBackgroundGradientEnd

Toolbox

The toolbox is one of the common tool windows that is most frequently used in Visual Studio. It is essentially a tree control with a special theme and styling applied.

Toolbox redline

Use … when you are designing a tool window that you want to always be consistent with the shell toolbox.

Do not use … for anything that is not similar to the toolbox UI, or if you are unsure whether your UI will have problems if the shell toolbox colors change.

Default

Component

Element

Token name: Category.color

Toolbox parent node

Parent node

Toolbox child node

Child node

Background

Environment.ToolboxContent

Headings

Environment.ToolWindowBackground

Individual items, or entire window if no available controls

Border

None

Foreground (Glyph)

Environment.ToolboxContent

Foreground (Text)

Environment.ToolboxContent

Hover

Component

Element

Token name: Category.color

Toolbox child node on hover

Toolbox hover on child node

Background

Environment.ToolboxContentMouseOver

Individual items only

Border

None

Foreground (Text)

Environment.ToolboxContentMouseOver

Individual items only

Selected

Component

Element

Token name: Category.color

Toolbox parent node focused

Focused parent node

Toolbox child node focused

Focused child node

Background

TreeView.SelectedItemActive

From Tree view category

Border

TreeView.FocusVisualBorder

From Tree view category

Foreground (Glyph)

TreeView.SelectedItemActive

From Tree view category

Foreground (Text)

TreeView.SelectedItemActive

From Tree view category

Toolbox parent node unfocused

Unfocused parent node

Toolbox child node unfocused

Unfocused child node

Background

TreeView.SelectedItemInactive

From Tree view category

Border

None

Foreground (Glyph)

TreeView.SelectedItemInactive

From Tree view category

Foreground (Text)

TreeView.SelectedItemInactive

From Tree view category