Edit

Shared colors for Visual Studio

  • Article
  • 41 minutes to read

Applies to: yesVisual Studio noVisual Studio for Mac noVisual Studio Code

When you're designing UI that uses common Visual Studio shell elements, or you'd 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 might 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 isn't 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 might result in an unreadable interface.

  • Use control colors that are appropriate for their location. In certain states, some Visual Studio controls don't 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

Don't use tokens found in the categories "Start Page" or "Cider."

Common shared controls

When you use a standard Visual Studio command bar in your feature, you'll have access to styled shell controls. You shouldn't 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.

Button controls

Button control redline

Use ... Don't 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). ... for buttons that will display against a custom background that is not part of a Visual Studio theme.

Button: standard state

Standard button
Standard button

Element Token name: Category.color
Button CommonControls.Button
Button border CommonControls.ButtonBorder

Button: default state

Default button
Default button

Element Token name: Category.color
Button CommonControls.ButtonDefault
Button border CommonControls.ButtonBorderDefault

Button: disabled state

Disabled button
Disabled button

Element Token name: Category.color
Button CommonControls.ButtonDisabled
Button border CommonControls.ButtonBorderDisabled

Button: hover state

Button on hover
Button on hover

Element Token name: Category.color
Button CommonControls.ButtonHover
Button border CommonControls.ButtonBorderHover

Button: pressed state

Pressed button
Pressed button

Element Token name: Category.color
Button CommonControls.ButtonPressed
Button border CommonControls.ButtonBorderPressed

Button: focused state

Focused button
Focused button

Element Token name: Category.color
Button CommonControls.ButtonFocused
Button border CommonControls.ButtonBorderFocused

Check box controls

Check box (redline)
Check box (redline)

Use ... Don't use ...
... for check box controls contained within the document well. ... for any UI that isn't a check box control.

Check box: default state

Check box
Default check box

Element Token name: Category.color
Background CommonControls.CheckBoxBackground
Border CommonControls.CheckBoxBorder
Text CommonControls.CheckBoxText
Glyph CommonControls.CheckBoxGlyph

Check box: disabled state

Disabled check box
Disabled check box

Element Token name: Category.color
Background CommonControls.CheckBoxBackgroundDisabled
Border CommonControls.CheckBoxBorderDisabled
Text CommonControls.CheckBoxTextDisabled
Glyph CommonControls.CheckBoxGlyphDisabled

Check box: hover state

Check box on hover
Check box on hover

Element Token name: Category.color
Background CommonControls.CheckBoxBackgroundHover
Border CommonControls.CheckBoxBorderHover
Text CommonControls.CheckBoxTextHover
Glyph CommonControls.CheckBoxGlyphHover

Check box: pressed state

Pressed check box
Pressed check box

Element Token name: Category.color
Background CommonControls.CheckBoxBackgroundPressed
Border CommonControls.CheckBoxBorderPressed
Text CommonControls.CheckBoxTextPressed
Glyph CommonControls.CheckBoxGlyphPressed

Check box: focused state

Focused check box
Focused check box

Element Token name: Category.color
Background CommonControls.CheckBoxBackgroundFocused
Border CommonControls.CheckBoxBorderFocused
Text CommonControls.CheckBoxTextFocused
Glyph CommonControls.CheckBoxGlyphFocused

Drop-down/combo box (redline)
Drop-down/combo box (redline)

Use ... Don't use ...
... for drop-downs and combo boxes in the document well. ... for any UI that isn't a drop-down or combo box.
... for command bar drop-downs or combo boxes.

Drop-downs and combo boxes: default state

Default drop-down/combo box
Default drop-down/combo box

Element Token name: Category.color
Background CommonControls.ComboBoxBackground
Border CommonControls.ComboBoxBorder
Text CommonControls.ComboBoxText
Separator CommonControls.ComboBoxSeparator
Glyph CommonControls.ComboBoxGlyph
Glyph background CommonControls.ComboBoxGlyphBackground

Drop-downs and combo boxes: disabled state

Disabled drop-down/combo box
Disabled drop-down/combo box

Element Token name: Category.color
Background CommonControls.ComboBoxBackgroundDisabled
Border CommonControls.ComboBoxBorderDisabled
Text CommonControls.ComboBoxTextDisabled
Separator CommonControls.ComboBoxSeparatorDisabled
Glyph CommonControls.ComboBoxGlyphDisabled
Glyph background CommonControls.ComboBoxGlyphBackgroundDisabled

Drop-downs and combo boxes: hover state

Drop-down/combo box on hover
Drop-down/combo box on hover

Element Token name: Category.color
Background CommonControls.ComboBoxBackgroundHover
Border CommonControls.ComboBoxBorderHover
Text CommonControls.ComboBoxTextHover
Separator CommonControls.ComboBoxSeparatorHover
Glyph CommonControls.ComboBoxGlyphHover
Glyph background CommonControls.ComboBoxGlyphBackgroundHover

Drop-downs and combo boxes: pressed state

Pressed drop-down/combo box
Pressed drop-down/combo box

Element Token name: Category.color
Background CommonControls.ComboBoxBackgroundPressed
Border CommonControls.ComboBoxBorderPressed
Text CommonControls.ComboBoxTextPressed
Separator CommonControls.ComboBoxSeparatorPressed
Glyph CommonControls.ComboBoxGlyphPressed
Glyph background CommonControls.ComboBoxGlyphBackgroundPressed

Drop-downs and combo boxes list item view: pressed state

Drop-down/combo box pressed list item view
Drop-down/combo box pressed list item view

Element Token name: Category.color
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

Drop-downs and combo boxes: focused state

Drop-down/combo box with focus
Drop-down/combo box with focus

Element Token name: Category.color
Background CommonControls.ComboBoxBackgroundFocused
Border CommonControls.ComboBoxBorderFocused
Text CommonControls.ComboBoxTextFocused
Separator CommonControls.ComboBoxSeparatorFocused
Glyph CommonControls.ComboBoxGlyphFocused
Glyph background CommonControls.ComboBoxGlyphBackgroundFocused

Drop-downs and combo boxes: text input selection

Drop-down/combo box text input selection
Drop-down/combo box text input selection

Element Token name: Category.color
Highlight CommonControls.ComboBoxTextInputSelection

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)
Tabular data/grid control (redline)

Use ... Don't use ...
... for tabular or grid controls. ... 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.

Column header: default state

Element Token name: Category.color
Background Header.Default
Foreground (Text) Environment.CommandBarTextActive
Foreground (Glyph) Header.Glyph
Border Header.SeparatorLine

Column header: hover state

Element Token name: Category.color
Background Header.MouseOver
Foreground (Text) Environment.CommandBarTextHover
Foreground (Glyph) Header.MouseOverGlyph
Border Header.SeparatorLine

Column header: pressed state

Element Token name: Category.color
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.

List view items: default state

Element Token name: Category.color
Background Transparent
Foreground (Text) Environment.CommandBarTextActive
Border None

List view items: active state

Element Token name: Category.color
Background TreeView.SelectedItemActive
Foreground (Text) TreeView.SelectedItemActiveText
Border None

List view items: inactive state

Element Token name: Category.color
Background TreeView.SelectedItemInactive
Foreground (Text) TreeView.SelectedItemInactiveText
Border None

UI text

Instructional text

Instructional text gives a prominent main explanation of what to do in a dialog or document page.

Default instructional text
Default instructional text

Element Token name: Category.color
Foreground (text) Environment.ControlText

Secondary instructional text

In document pages with lots of text and controls, some instructional text uses a different color value. This helps to convey which information is most important and lessen the overall density of the UI elements. (See also the below section on hint text.)

Secondary instructional text
Secondary instructional text

Element Token name: Category.color
Foreground (text) Environment.ControlEditHintText

Hint text

Hint text appears in an empty control, below a control, or on an empty document surface to show the user what to do next. You can use hint text with either Window or Control backgrounds.

Default hint text

Default hint text
Default hint text

Element Token name: Category.color
Foreground (text) Environment.ControlEditHintText

Required hint text

Required hint text
Required hint text

Element Token name: Category.color
Foreground (text) Environment.ControlRequiredHintText
Background Environment.ControlRequiredBackground

Search box control text

See Search boxes for other color tokens related to the Search control.

Search box control text
Search box control text

Element Token name: Category.color
Foreground (text) SearchControl.UnfocusedWatermarkText

The hyperlink is one control that doesn't 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 don't use the color token for the hyperlink control, you will see the default system color for "pressed," which will flash red. That's the signal that the control isn't using the correct environment color token.

Hyperlink (redline)
Hyperlink (redline)

Use ... Don't use ...
... when you need to create a custom hyperlink. ... for anything that isn't a hyperlink.

Hyperlink: default state

Default hyperlink
Default hyperlink

Element Token name: Category.color
Foreground (Text) Environment.PanelHyperlink

Hyperlink: hover state

Hyperlink on hover
Hyperlink on hover

Element Token name: Category.color
Foreground (Text) Environment.PanelHyperlinkHover

Hyperlink: pressed state

Pressed hyperlink
Pressed hyperlink

Element Token name: Category.color
Foreground (Text) Environment.PanelHyperlinkPressed

Hyperlink: disabled state

Disabled hyperlink
Disabled hyperlink

Element Token name: Category.color
Foreground (Text) Environment.PanelHyperlinkDisabled

Infobars

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)
Infobar (redline)

Use ... Don't use ...
... when creating custom infobars. ... for UI elements that aren't similar to an infobar.

Infobar: default state

Default infobar
Default infobar

Element Token name: Category.color
Background InfoBar.InfoBarBackground
Foreground (Text) InfoBar.InfoBar
Border InfoBar.InfoBarBorder

Infobar Close (×) button: default state

Default infobar Close (×) button
Default infobar Close (×) button

Element Token name: Category.color
Background InfoBar.CloseButton
Border InfoBar.CloseButtonBorder
Glyph InfoBar.CloseButtonGlyph

Infobar Close (×) button: hover state

Infobar Close (×) button on hover
Infobar Close (×) button on hover

Element Token name: Category.color
Background InfoBar.CloseButtonHover
Border InfoBar.CloseButtonHoverBorder
Glyph InfoBar.CloseButtonHoverGlyph

Infobar Close (×) button: pressed state

Pressed infobar Close (×) button
Pressed infobar Close (×) button

Element Token name: Category.color
Background InfoBar.CloseButtonDown
Border InfoBar.CloseButtonDownBorder
Glyph InfoBar.CloseButtonDownGlyph

Infobar hyperlink button: default state

Default infobar hyperlink button
Default infobar hyperlink button

Element Token name: Category.color
Foreground (text) InfoBar.Hyperlink

Infobar hyperlink button: hover state

Infobar hyperlink button on hover
Infobar hyperlink button on hover

Element Token name: Category.color
Foreground (text) Infobar.HyperlinkMouseOver
(With underline)

Infobar hyperlink button: pressed state

Pressed infobar hyperlink button
Pressed infobar hyperlink button

Element Token name: Category.color
Foreground (text) Infobar.HyperlinkMouseDown
(With underline)

Infobar inline hyperlink (within a sentence): default state

Default inline infobar hyperlink button
Default inline infobar hyperlink button

Element Token name: Category.color
Foreground (text) InfoBar.Hyperlink

Infobar inline hyperlink (within a sentence): hover state

Infobar inline hyperlink button on hover
Infobar inline hyperlink button on hover

Element Token name: Category.color
Foreground (text) Infobar.HyperlinkMouseOver
(With underline)

Infobar inline hyperlink (within a sentence): pressed state

Pressed infobar inline hyperlink button
Pressed infobar inline hyperlink button

Element Token name: Category.color
Foreground (text) Infobar.HyperlinkMouseDown
(With underline)

Infobar button: default state

Default infobar button
Default infobar button

Element Token name: Category.color
Background InfoBar.Button
Foreground (text) InfoBar.Button
Border InfoBar.ButtonBorder

Infobar button: hover state

Infobar button on hover
Infobar button on hover

Element Token name: Category.color
Background InfoBar.ButtonMouseOver
Foreground (text) InfoBar.ButtonMouseOver
Border InfoBar.ButtonMouseOverBorder

Infobar button: pressed state

Pressed infobar button
Pressed infobar button

Element Token name: Category.color
Background InfoBar.ButtonMouseDown
Foreground (text) InfoBar.ButtonMouseDown
Border InfoBar.ButtonMouseDownBorder

Infobar button: disabled state

Disabled infobar button
Disabled infobar button

Element Token name: Category.color
Background InfoBar.ButtonDisabled
Foreground (text) InfoBar.ButtonDisabled
Border InfoBar.ButtonDisabledBorder

Infobar button: focused state

Focused infobar button
Focused infobar button

Element Token name: Category.color
Background InfoBar.ButtonFocus
Foreground (text) InfoBar.ButtonFocus
Border InfoBar.ButtonFocusBorder

Scroll bars

Scroll bars are styled by the Visual Studio environment, and won't 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)
Scroll bar (redline)

Use ... Don't use ...
... when you're creating UI that you want to match Visual Studio scroll bars. ... for anything you don't want to always match scroll bar UI.

Scroll bar: default state

Default scroll bar
Default scroll bar

Element Token name: Category.color
Scroll bar Environment.ScrollBarBackground
Foreground (Thumb) Environment.ScrollBarThumbBackground

Scroll bar: hover state

Scroll bar on hover
Scroll bar on hover

Element Token name: Category.color
Scroll bar Environment.ScrollBarBackground
Foreground (Thumb) Environment.ScrollBarThumbMouseOverBackground

Scroll bar: pressed state*

Pressed scroll bar
Pressed scroll bar

Element Token name: Category.color
Scroll bar Environment.ScrollBarBackground
Foreground (Thumb) Environment.ScrollBarThumbPressedBackground

Scroll bar arrow: default state

Default scroll bar arrow
Default scroll bar arrow

Element Token name: Category.color
Background Environment.ScrollBarArrowBackground
(Set to same color as scroll bar.)
Foreground (Glyph) Environment.ScrollBarArrowGlyph

Scroll bar arrow: hover state

Scroll bar arrow on hover
Scroll bar arrow on hover

Element Token name: Category.color
Background Environment.ScrollBarArrowMouseOverBackground
(Set to same color as scroll bar.)
Foreground (Glyph) Environment.ScrollBarArrowGlyphMouseOver

Scroll bar arrow: pressed state

Pressed scroll bar arrow
Pressed scroll bar arrow

Element Token name: Category.color
Background Environment.ScrollBarArrowPressedBackground
(Set to same color as scroll bar.)
Foreground (Glyph) Environment.ScrollBarArrowGlyphPressed

Search boxes

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)
Search box (redline)

Use ... Don't use ...
... when you're designing a custom search box. ... for anything that isn't a search box.
... for anything that you don't want to always match the search box UI.

Focused search input field

Focused search input field
Focused search input field

Element Token name: Category.color
Background SearchControl.FocusedBackground
Foreground (Text) SearchControl.FocusedBackground
Border SearchControl.FocusedBorder
Separator SearchControl.FocusedDropDownSeparator

Unfocused, active search input field

Search input field unfocused
Unfocused, active search input field

Element Token name: Category.color
Background SearchControl.SearchActiveBackground
Foreground (Text) SearchControl.SearchActiveBackground
Border SearchControl.UnfocusedBorder
Separator SearchControl.DropDownSeparator

Unfocused, inactive search input field

Unfocused, inactive search input field
Unfocused, inactive search input field

Element Token name: Category.color
Background SearchControl.Unfocused
Foreground (Text) SearchControl.Unfocused
Border SearchControl.UnfocusedBorder
Separator SearchControl.DropDownSeparator

Highlighted search input field (text only)

Highlighted search input field
Highlighted search input field

Element Token name: Category.color
Background SearchControl.Selection
Foreground (Text) SearchControl.FocusedBackground
Border None
Separator SearchControl.FocusedDropDownSeparator

Disabled search input field

Disabled search input field
Disabled search input field

Element Token name: Category.color
Background SearchControl.Disabled
Foreground (Text) SearchControl.Disabled
Border SearchControl.DisabledBorder
Separator SearchControl.DropDownSeparator

Focused search action button

Search action button focused
Focused search action button

Element Token name: Category.color
Background None
Foreground (Search glyph) SearchControl.SearchGlyph
Foreground (Stop glyph) SearchControl.StopGlyph
Foreground (Clear glyph) SearchControl.ClearGlyph
Border N/A

Unfocused search action button

Unfocused search action button
Unfocused search action button

Element Token name: Category.color
Background N/A
Foreground (Search glyph) SearchControl.SearchGlyph
Foreground (Stop glyph) SearchControl.StopGlyph
Foreground (Clear glyph) SearchControl.ClearGlyph
Border N/A

Pressed search action button

Pressed search action button
Pressed search action button

Element Token name: Category.color
Background SearchControl.ActionButtonMouseDown
Foreground (Glyph) SearchControl.ActionButtonMouseDownGlyph
Border SearchControl.ActionButtonMouseDownBorder

Disabled search action button

Search action button disabled
Disabled search action button

Element Token name: Category.color
Background None
Foreground (Glyph) SearchControl.ActionButtonDisabledGlyph
Border None

Focused search drop-down button

Focused search drop-down button
Focused search drop-down button

Element Token name: Category.color
Background SearchControl.FocusedDropDownButton
Foreground (Glyph) SearchControl.FocusedDropDownButtonGlyph
Border SearchControl.FocusedDropDownButtonBorder

Unfocused search drop-down button

Unfocused search drop-down button
Unfocused search drop-down button

Element Token name: Category.color
Background SearchControl.UnfocusedDropDownButton
Foreground (Glyph) SearchControl.UnfocusedDropDownButtonGlyph
Border SearchControl.UnfocusedDropDownButtonBorder

Pressed search drop-down button

Pressed search drop-down button
Pressed search drop-down button

Element Token name: Category.color
Background SearchControl.MouseDownDropDownButton
Foreground (Glyph) SearchControl.MouseDownDropDownButtonGlyph
Border SearchControl.MouseDownDropDownButtonBorder

Disabled search drop-down button

Disabled search drop-down button
Disabled search drop-down button

Element Token name: Category.color
Background None
Foreground (Glyph) SearchControl.DisabledDownButtonGlyph
Border None

Search drop-down lists

The search box drop-down menu has the potential to be slightly more complex than other drop-down 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 list (redline)
Search drop-down list (redline)

Use ... Don't use ...
... when you're creating a custom search drop-down list. ... for drop-down lists that appear in other contexts.
... the correct token names for the correct list components. ... in any background/foreground combination other than specified.

Search drop-down list elements

Element Token name: Category.color
Border SearchControl.PopupBorder
Separator SearchControl.PopupSectionHeaderSeparator
Shadow Environment.DropShadowBackground

Suggested searches: default state

Default suggested searches
Default suggested searches

Element Token name: Category.color
Background SearchControl.PopupItemsListBackgroundGradientBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) SearchControl.PopupItemText

Suggested searches: hover state

Suggested searches on hover
Suggested searches on hover

Element Token name: Category.color
Background SearchControl.PopupControlMouseOverBackgroundGradientBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) SearchControl.PopupMouseOverItemText
Border SearchControl.PopupControlMouseOverBorder

Search options: default state

Search check box
Default search options (check box)

Search options
Default search options (link)

Element Token name: Category.color
Background SearchControl.PopupSectionBackgroundGradientBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Check box text) SearchControl.PopupCheckboxText
Foreground (Link text) SearchControl.PopupButtonText
Header background SearchControl.PopupSectionHeaderGradientBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Header text) SearchControl.PopupSectionHeaderText

Search options: hover state

Search options (check box) on hover
Search options (check box) on hover

Search options (link) on hover
Search options (link) on hover

Element Token name: Category.color
Background SearchControl.PopupControlMouseOverBackgroundGradientBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Check box text) SearchControl.PopupCheckboxMouseDownText
Foreground (Link text) SearchControl.PopupButtonMouseDownText
Border SearchControl.PopupControlMouseOverBorder

Search options: pressed state

Pressed search options (check box)
Pressed search options (check box)

Pressed search options (link)
Pressed search options (link)

Element Token name: Category.color
Check box background SearchControl.PopupControlMouseDownBackgroundGradientBegin
SearchControl.PopupControlMouseDownBackgroundGradientEnd
(Gradient stops for this token not used in themed UI.)
Foreground (Check box text) SearchControl.PopupCheckboxMouseDownText
Link background SearchControl.PopupButtonMouseDownBackgroundGradientBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Link text) SearchControl.PopupButtonMouseDownText

Tree views

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)
Tree view (redline)

Use ... Don't use ...
... anywhere you need to implement a hierarchical organizational view. ... for anything that isn't similar to a tree view.
... in any background/foreground combination other than specified.

Tree view item: default state

Default tree view item
Default tree view item

Element Token name: Category.color
Background TreeView.Background
Foreground (Text) TreeView.Background
Foreground (Glyph) TreeView.Glyph
Border None

Tree view item: hover state

Tree view item on hover
Tree view item on hover

Element Token name: Category.color
Background TreeView.Background
Foreground (Text) TreeView.Background
Foreground (Glyph) TreeView.GlyphMouseOver
Border None

Tree view item: drag over state

Tree view item on drag over
Tree view item on drag over

Element Token name: Category.color
Background TreeView.DragOverItem
Foreground (Text) TreeView.DragOverItem
Foreground (Glyph) TreeView.DragOverItemGlyph
Border None

Tree view item: selected, focused state

Selected and focused tree view item
Selected and focused tree view item

Element Token name: Category.color
Background TreeView.SelectedItemActive
Foreground (Text) TreeView.SelectedItemActive
Foreground (Glyph) TreeView.SelectedItemActiveGlyph
Border TreeView.FocusVisualBorder

Tree view item: selected, unfocused state

Selected and unfocused tree view item
Selected and unfocused tree view item

Element Token name: Category.color
Background TreeView.SelectedItemInactive
Foreground (Text) TreeView.SelectedItemInactive
Foreground (Glyph) TreeView.SelectedItemInactiveGlyph
Border None

Tree view item: hovered, selected, and focused state

Selected and focused tree view item on hover
Selected and focused tree view item on hover

Element Token name: Category.color
Background TreeView.SelectedItemActive
Foreground (Text) TreeView.SelectedItemActive
Foreground (Glyph) TreeView.SelectedItemActiveGlyphMouseOver
Border TreeView.FocusVisualBorder

Tree view item: hovered, selected, and unfocused state

Selected and unfocused tree view item on hover
Selected and unfocused tree view item on hover

Element Token name: Category.color
Background TreeView.SelectedItemInactive
Foreground (Text) TreeView.SelectedItemInactive
Foreground (Glyph) TreeView.SelectedItemActiveGlyphMouseOver
Border None

Shell appearance

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. The top and bottom background layers are set to the same color in the Light and Dark themes.

Visual Studio shell background (redline)
Visual Studio shell background (redline)

Use ... Don't use ...
... for places where you want to match the background of the Visual Studio environment. ... as a fill for places that aren't background surfaces.
... as a background to place foreground elements on.

Bottom layer shell appearance

Element Token name: Category.color
Background Environment.EnvironmentBackground

Top layer shell appearance

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

Element Token name: Category.color
Background 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.

Visual Studio command shelf (redline)
Visual Studio command shelf (redline)

Use ... Don't use ...
... for areas where you place menus or toolbars. ... for areas that aren't similar to a command shelf.
... with the correct background/foreground token name combination.

Command shelf menu bar

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

Element Token name: Category.color
Background Environment.CommandShelfHighlightGradientBegin

Environment.CommandShelfHighlightGradientMiddle
Environment.CommandShelfHighlightGradientEnd

Command shelf command bar

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

Element Token name: Category.color
Background Environment.CommandShelfBackgroundGradientBegin
Environment.CommandShelfBackgroundGradientMiddle
Environment.CommandShelfBackgroundGradientEnd

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)
Manifest Designer (redline)

Use ... Don't use ...
... for designers that are similar to the Manifest Designer. ... if you have more than six tabs.
... in place of using common tab controls at the top of an editor within the document well. ... for any UI that isn't structured like the Manifest Designer.

Manifest Designer selected tab: default state

Element Token name: Category.color
Background ManifestDesigner.TabActive
Border None

Manifest Designer selected description pane: default state

Element Token name: Category.color
Background ManifestDesigner.DescriptionPane

Manifest Designer selected content page: default state

Element Token name: Category.color
Background ManifestDesigner.Background
Dialog helper text ManifestDesigner.WatermarkText
(This token name doesn't match its function.)

Manifest Designer tab: unselected state

Element Token name: Category.color
Background ManifestDesigner.Tab.Inactive

Manifest Designer tab: hover state

Element Token name: Category.color
Background ManifestDesigner.Tab.Mouseover

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.

Visual Studio menu (redline)
Visual Studio menu (redline)

Use ... Don't use ...
... when you need to create a custom menu. ... the background color alone. Always use the background/foreground combination as specified.
... when you have a new UI component that you want to match the Visual Studio menus.

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)
Menu title (redline)

Use ... Don't use ...
... whenever you're creating a custom menu title. ... for anything that you don't want to always match the menu title.
... in any background/foreground combination other than specified.

Menu title: default state

Default menu title
Default menu title

Default menu title with glyph
Default menu title with glyph

Element Token name: Category.color
Background None
Foreground (text) Environment.CommandBarTextActive
Foreground (glyph) Environment.CommandBarMenuGlyph
Border None

Menu title: hover state

Menu title on hover
Menu title on hover

Menu title with glyph on hover
Menu title with glyph on hover

Element Token name: Category.color
Background Environment.CommandBarMouseOverBackgroundBegin
(Gradient stops for this token not used in themed UI.)
Foreground (text) Environment.CommandBarTextHover
Foreground (glyph) Environment.CommandBarMenuMouseOverGlyph
Border Environment.CommandBarBorder

Menu title: pressed state

Pressed menu title
Pressed menu title

Pressed menu title with glyph
Pressed menu title with glyph

Element Token name: Category.color
Background Environment.CommandBarMenuBackgroundGradientBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.CommandBarTextActive
Foreground (Glyph) Environment.CommandBarMenuMouseDownGlyph
Border Environment.CommandBarMenuBorder
(Only left, top, and right sides.)

Menu title: disabled state

Disabled menu title with glyph
Disabled menu title with glyph

Element Token name: Category.color
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 ... Don't use ...
... for any drop-down list that's launched from a menu bar or command bar. ... for any drop-down list in another context.
... in any background/foreground combination other than specified.

Menu items: default state

Default menu items
Default menu items

Element Token name: Category.color
Background Environment.CommandBarMenuBackgroundGradientBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.CommandBarTextActive
Foreground (Submenu glyph) Environment.CommandBarMenuSubmenuGlyph
Border Environment.CommandBarMenuBorder
Icon channel background Environment.CommandBarMenuIconBackground
Separator Environment.CommandBarMenuSeparator
Shadow Environment.DropShadowBackground

Menu items: checked and selected states

Menu checked
Checked menu item

Menu selected
Selected menu item

Element Token name: Category.color
Check mark Environment.CommandBarCheckBox
Check mark background Environment.CommandBarSelectedIcon
Icon background Environment.CommandBarSelected
Icon border Environment.CommandBarSelectedBorder

Menu items: hover state

Menu hover
Menu item on hover

Menu hover checked
Checked menu item on hover

Menu hover selected
Selected menu item on hover

Element Token name: Category.color
Background Environment.CommandBarMenuItemMouseOver
Foreground (Text) Environment.CommandBarMenuItemMouseOverText
Foreground (Submenu glyph) Environment.CommandBarMenuMouseOverSubmenuGlyph
Check mark Environment.CommandBarCheckBoxMouseOver
Check mark background Environment.CommandBarHoverOverSelectedIcon
Icon background Environment.CommandBarHoverOverSelected
Icon border Environment.CommandBarHoverOverSelectedIconBorder

Menu items: disabled state

Menu disabled
Disabled menu item

Menu disabled checked
Disabled menu item with check mark

Element Token name: Category.color
Foreground (Text) Environment.CommandBarTextInactive
Foreground (Submenu glyph) Environment.CommandBarMenuSubmenuGlyph
Check mark Environment.CommandBarCheckBoxDisabled
Check mark background Environment.CommandBarSelectedIconDisabled

Command bars

A 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
Command bar (redline)

Overflow button redline
Overflow button (redline)

Use ... Don't use ...
... in places where you need an embedded command bar, but are unable to use the standard Visual Studio command bar implementation. ... for UI elements that aren't similar to a command bar.
... for command bar components other than the ones for which token names are specified.

Command bar groups

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
Command bar group (redline)

Use ... Don't use ...
... in places where you need an embedded command bar, but are unable to use the standard Visual Studio command bar implementation. ... for UI elements that aren't similar to a command bar.
... for command bar components other than the ones for which token names are specified.

Command bar group: default state

Element Token name: Category.color
Background Environment.CommandBarGradientBegin
(Gradient stops for this token not used in themed UI.)
Border Environment.CommandBarToolBarBorder
Drag handle Environment.CommandBarDragHandle
Separator Environment.CommandBarToolBarSeparator
Environment.CommandBarToolBarSeparatorHighlight

Command icons

Command icon redline
Command icon (redline)

Command icon with text redline
Command icon with text (redline)

Use ... Don't use ...
... for any buttons that will be placed on a command bar. ... for controls that have their own token names.
... in any background/foreground combination other than specified.

Command icon: default state

Command icon default
Default command icon

Element Token name: Category.color
Background N/A (inherits from command bar background)
Foreground (Text) Environment.CommandBarTextActive
Border N/A

Command icon: default state, selected

Default, selected command icon
Default, selected command icon

Element Token name: Category.color
Background Environment.CommandBarSelected
Foreground (Text) Environment.CommandBarTextSelected
Border Environment.CommandBarSelectedBorder

Command icon: hover or focus states

Command icon on hover or focus
Command icon on hover or focus

Element Token name: Category.color
Background Environment.CommandBarMouseOverBackgroundBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.CommandBarTextHover
Border Environment.CommandBarBorder

Command icon: hover or focus states, selected

Selected command icon on hover or focus
Selected command icon on hover or focus

Element Token name: Category.color
Background Environment.CommandBarHoverOverSelected
Foreground (Text) Environment.CommandBarTextHoverOverSelected
Border Environment.CommandBarHoverOverSelectedIconBorder

Command icon: pressed state

Pressed command icon
Pressed command icon

Element Token name: Category.color
Background Environment.CommandBarMouseDownBackgroundBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.CommandBarTextMouseDown
Border Environment.CommandBarBorder

Command icon: disabled state

Disabled command icon
Disabled command icon

Element Token name: Category.color
Background N/A (inherits from command bar background)
Foreground (Text) Environment.CommandBarTextInactive
Border N/A

Command bar combo boxes

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 for command bar drop-downs.

Command bar combo box redline
Command bar combo box (redline)

Use ... Don't use ...
... when building custom combo boxes. ... for anything you don't want always to match the command bar UI.
... when creating a command bar control that's similar to a combo box. ... when you have access to a styled combo box.

Command bar combo box input field: default state

Command bar combo box input field
Command bar combo box input field

Element Token name: Category.color
Background Environment.ComboBoxBackground
Foreground (Text) Environment.ComboBoxText
Border Environment.ComboBoxBorder
Separator No separator

Command bar drop-down button: default state

Combo box drop-down button
Command bar drop-down button

Element Token name: Category.color
Background N/A (inherits from command bar background)
Foreground (Glyph) Environment.ComboBoxGlyph

Command bar drop-down list: default state

Command bar drop-down list
Command bar drop-down list

Element Token name: Category.color
Background Environment.ComboBoxPopupBackgroundBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.ComboBoxItemText
Border Environment.ComboBoxPopupBorder

Command bar combo box input field: hover state

Command bar combo box input field on hover
Command bar combo box input field on hover

Element Token name: Category.color
Background Environment.ComboBoxMouseOverBackgroundBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.ComboBoxMouseOverText
Border Environment.ComboBoxMouseOverBorder
Separator Environment.ComboBoxMouseOverSeparator

Command bar drop-down button: hover state

Command bar combo box drop-down button on hover
Command bar drop-down button on hover

Element Token name: Category.color
Background Environment.ComboBoxButtonMouseOverBackground
Foreground (Glyph) Environment.ComboBoxMouseOverGlyph

Command bar drop-down list: hover state

Command bar combo box drop-down list on hover
Command bar drop-down list on hover

Element Token name: Category.color
Background (Menu item) Environment.ComboBoxItemMouseOverBackground
Foreground (Text) Environment.ComboBoxItemMouseOverText
Border (Menu item) Environment.ComboBoxItemMouseOverBorder

Command bar combo box input field: focused state

Focused command bar combo box input field
Focused command bar combo box input field

Element Token name: Category.color
Background Environment.ComboBoxFocusedBackground
Foreground (Text) Environment.ComboBoxFocusedText
Border Environment.ComboBoxFocusedBorder
Separator Environment.ComboBoxFocusedButtonSeparator

Command bar drop-down button: focused state

Focused command bar drop-down button
Focused command bar drop-down button

Element Token name: Category.color
Background Environment.ComboBoxFocusedButtonBackground
Foreground (Glyph) Environment.ComboBoxFocusedGlyph

Command bar combo box input field: pressed state

Pressed command bar combo box input field
Pressed command bar combo box input field

Element Token name: Category.color
Background Environment.ComboBoxMouseDownBackground
Foreground (Text) Environment.ComboBoxMouseDownText
Border Environment.ComboBoxMouseDownBorder
Separator Environment.ComboBoxMouseDownSeparator

Command bar drop-down button: pressed state

Pressed command bar combo box drop-down button
Pressed command bar drop-down button

Element Token name: Category.color
Background Environment.ComboBoxButtonMouseDownBackground
Foreground (Glyph) Environment.ComboBoxMouseDownGlyph

Command bar combo box input field: disabled state

Disabled command bar combo box input field
Disabled command bar combo box input field

Element Token name: Category.color
Background Environment.ComboBoxDisabledBackground
Foreground (Text) Environment.ComboBoxDisabledText
Border Environment.ComboBoxDisabledBorder
Separator No separator

Command bar drop-down button: disabled state

Disabled command bar combo box drop-down button
Disabled command bar drop-down button

Element Token name: Category.color
Background None
Foreground (Glyph) Environment.ComboBoxDisabledGlyph

Command bar drop-downs

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 for command bar combo boxes.

Command bar drop-down (redline)
Command bar drop-down (redline)

Use ... Don't use ...
... when you're creating custom drop-down list controls. ... for anything that isn't similar to a drop-down list.
... for combo boxes or split buttons.

Command bar drop-down selection field: default state

Default command bar drop-down selection field
Default command bar drop-down selection field

Element Token name: Category.color
Background Environment.DropDownBackground
Foreground (Text) DropDownText
Border DropDownBorder
Separator No separator

Command bar drop-down button: default state

Default command bar drop-down button
Default command bar drop-down button

Element Token name: Category.color
Background None
Foreground (Glyph) Environment.DropDownGlyph

Command bar drop-down list: default state

Default command bar drop-down list
Default command bar drop-down list

Element Token name: Category.color
Background Environment.DropDownPopupBackgroundBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.ComboBoxItemText
Border Environment.DropDownPopupBorder
Shadow Environment.DropShadowBackground

Command bar drop-down selection field: hover state

Command bar drop-down selection field on hover
Command bar drop-down selection field on hover

Element Token name: Category.color
Background Environment.DropDownMouseOverBackgroundBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.DropDownMouseOverText
Border Environment.DropDownMouseOverBorder
Separator Environment.DropDownButtonMouseOverSeparator

Command bar drop-down button: hover state

Command bar drop-down button on hover
Command bar drop-down button on hover

Element Token name: Category.color
Background Environment.DropDownButtonMouseOverBackground
Foreground (Glyph) Environment.DropDownMouseOverGlyph

Command bar drop-down list: hover state

Command bar drop-down list on hover
Command bar drop-down list on hover

Element Token name: Category.color
Background (Menu item) Environment.ComboBoxItemMouseOverBackground
Foreground (Text) Environment.ComboBoxItemMouseOverText
Border (Menu item) Environment.ComboBoxItemMouseOverBorder

Command bar drop-down selection field: pressed state

Drop-down selection field pressed
Pressed command bar drop-down selection field

Element Token name: Category.color
Background Environment.DropDownMouseDownBackground
Foreground (Text) Environment.DropDownMouseDownText
Border Environment.DropDownMouseDownBorder
Separator Environment.DropDownButtonMouseDownSeparator

Command bar drop-down button: pressed state

Pressed command bar drop-down button
Pressed command bar drop-down button

Element Token name: Category.color
Background Environment.DropDownButtonMouseDownBackground
Foreground (Glyph) Environment.DropDownMouseDownGlyph

Command bar drop-down selection field: disabled state

Disabled command bar drop-down selection field
Disabled command bar drop-down selection field

Element Token name: Category.color
Background Environment.DropDownDisabledBackground
Foreground (Text) Environment.DropDownDisabledText
Border Environment.DropDownDisabledBorder
Separator No separator

Command bar drop-down button: disabled state

Disabled command bar drop-down button
Disabled command bar drop-down button

Element Token name: Category.color
Background N/A
Foreground (Glyph) Environment.DropDownDisabledGlyph

Command bar split buttons

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
Command bar split button (redline)

Use ... Don't use ...
... when you're creating a custom split button. ... for other kinds of buttons.
... in any background/foreground combination other than specified.

Command bar split button: default state

Default command bar split button
Default command bar split button

Element Token name: Category.color
Background None
Foreground (Text) Environment.CommandBarTextActive
Foreground (Glyph) Environment.CommandBarSplitButtonGlyph
Border N/A
Separator N/A

Command bar split button: hover state

Command bar split button on hover
Command bar split button on hover

Element Token name: Category.color
Background Environment.CommandBarMouseOverBackgroundBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.CommandBarTextHover
Foreground (Glyph) Environment.CommandBarSplitButtonMouseOverGlyph
Border Environment.CommandBarBorder
Separator Environment.CommandBarSplitButtonSeparator

Command bar split button: pressed state

Pressed command bar split button
Pressed command bar split button

Element Token name: Category.color
Background Environment.CommandBarMouseDownBackgroundBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.CommandBarTextMouseDown
Foreground (Glyph) Environment.CommandBarSplitButtonMouseDownGlyph
Border Environment.CommandBarBorder
Separator N/A

Command bar split button: disabled state

Disabled command bar split button
Disabled command bar split button

Element Token name: Category.color
Background N/A
Foreground (Text) Environment.ComboBoxItemTextInactive
Foreground (Glyph) Environment.CommandBarTextInactive
Border N/A
Separator N/A

Command bar '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.

Command bar 'More options' button (redline)
Command bar 'More options' button (redline)

Use ... Don't use ...
... for custom 'More options' or 'Overflow' buttons. ... for buttons that don't have similar functionality to a 'More options' or 'Overflow' button.

Command bar 'More options' and 'Overflow' buttons: default state

Default command bar 'More options' button
Default command bar 'More options' button

Default command bar 'Overflow' button
Default command bar 'Overflow' button

Element Token name: Category.color
Background Environment.CommandBarOptionsBackground
Foreground (Glyph) Environment.CommandBarOptionsGlyph

Command bar 'More options' and 'Overflow' buttons: hover state

Command bar 'More options' button on hover
Command bar 'More options' button on hover

Command bar 'Overflow' button on hover
Command bar 'Overflow' button on hover

Element Token name: Category.color
Background Environment.CommandBarOptionsMouseOverBackgroundBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Glyph) Environment.CommandBarOptionsMouseDownGlyph

Command bar 'More options' and 'Overflow' buttons: pressed state

Pressed command bar 'More options' button
Pressed command bar 'More options' button

Overflow pressed
Pressed command bar 'Overflow' button

Element Token name: Category.color
Background Environment.CommandBarOptionsMouseDownBackgroundBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Glyph) Environment.CommandBarOptionsMouseDownGlyph

Document windows

There's no need to replicate document windows, because they're 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, be careful to use them only for similar elements, and always in pairs. If you don't do that, you might get unexpected results in your UI.

Document window frames

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's 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 (redline)

Floating document window (redline)
Floating document window (redline)

Use ... Don't use ...
... anywhere you're creating UI that you want to match the document window. ... for any UI that you don't want automatically to change if the shell has a theme update.

Docked or floating document window: default state

Element Token name: Category.color
Background Depends on document type
Foreground (Text) Depends on document type
Border Environment.ToolWindowBorder

Focused, floating document window frame: default state

Default focused, floating document window frame
Default focused, floating document window frame

Element Token name: Category.color
Background Environment.ToolWindowFloatingFrame
Foreground (Text) Environment.ToolWindowFloatingFrame
Foreground (Glyph) Environment.RaftedWindowButtonActiveGlyph
Border Environment.MainWindowActiveDefaultBorder
Border (Glyph) Environment.RaftedWindowButtonActiveBorder
(Set to transparent)

Unfocused, floating document window frame: default state

Default unfocused, floating document window frame
Default unfocused, floating document window frame

Element Token name: Category.color
Background Environment.ToolWindowFloatingFrameInactive
Foreground (Text) Environment.ToolWindowFloatingFrameInactive
Foreground (Glyph) Environment.RaftedWindowButtonInactiveGlyph
Border Environment.MainWindowInactiveBorder
Border (Glyph) Environment.RaftedWindowButtonInactiveBorder
(Set to transparent)

Focused, floating document window frame: hover state

Focused, floating document window frame on hover
Focused, floating document window frame on hover

Element Token name: Category.color
Background (Glyph) Environment.RaftedWindowButtonHoverActive
Foreground (Glyph) Environment.RaftedWindowButtonHoverActiveGlyph
Border (Glyph) Environment.RaftedWindowButtonHoverActiveBorder

Unfocused, floating document window frame: hover state

Unfocused, floating document window frame on hover
Unfocused, floating document window frame on hover

Element Token name: Category.color
Background (Glyph) EnvironmentRaftedWindowButtonHoverInactive
Foreground (Glyph) Environment.RaftedWindowButtonHoverInactiveGlyph
Border (Glyph) Environment.RaftedWindowButtonHoverInactiveBorder

Focused, floating document window frame: pressed state

Focused, floating document window frame on press
Focused, floating document window frame on press

Element Token name: Category.color
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 tabs (redline)
Document tabs (redline)

Use ... Don't use ...
... anywhere you're creating UI that you want to match document tabs and automatically pick up theme updates or new theme colors. ... 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)
Open document tab (redline)

Use ... Don't use ...
... when you're creating custom document tabs. ... for provisional (preview) tabs.
... for any UI that you don't want to change automatically if the shell has a theme update.

Selected, focused document tab

Selected, focused document tab
Selected, focused document tab

Element Token name: Category.color
Background Environment.FileTabSelectedGradientTop
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.FileTabSelectedText
Border Environment.FileTabSelectedBorder
(Set to same color as background.)
Document border Environment.FileTabDocumentBorderBackground

Selected, unfocused document tab

Selected, unfocused document tab
Selected, unfocused document tab

Element Token name: Category.color
Background Environment.FileTabInactiveGradientTop
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.FileTabInactiveText
Border Environment.FileTabInactiveBorder
(Set to same color as background.)
Document border Environment.FileTabInactiveDocumentBorderBackground

Background document tab: default state

Default background document tab
Default background document tab

Element Token name: Category.color
Background Environment.FileTabBackground
Foreground (Text) Environment.FileTabText
Border Environment.FileTabBorder
(Set to same color as background.)

Background document tab: hover state

Background document tab on hover
Background document tab on hover

Element Token name: Category.color
Background Environment.FileTabHotGradientTop
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.FileTabHotText
Border Environment.FileTabHotBorder
(Set to same color as background.)

Preview tab

Also called a "provisional" 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)
Preview tab (redline)

Use ... Don't use ...
... anywhere you're creating provisional preview and want some element to match the current preview tab color. ... 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.

Focused, selected preview tab

Focused, selected preview tab
Focused, selected preview tab

Element Token name: Category.color
Background Environment.FileTabProvisionalSelectedActive
Foreground (Text) Environment.FileTabProvisionalSelectedActiveForeground
Border Environment.FileTabProvisionalSelectedActiveBorder
(Set to same color as background.)
Document border Environment.FileTabProvisionalSelectedActiveBorder

Unfocused, selected preview tab

Unfocused, selected preview tab
Unfocused, selected preview tab

Element Token name: Category.color
Background Environment.FileTabProvisionalSelectedInactive
Foreground (Text) Environment.FileTabProvisionalSelectedInactiveForeground
Border Environment.FileTabProvisionalSelectedInactiveBorder
Document border Environment.FileTabProvisionalSelectedInactiveBorder

Background preview tab: default state

Default background preview tab
Default background preview tab

Element Token name: Category.color
Background Environment.FileTabProvisionalInactive
Foreground (Text) Environment.FileTabProvisionalInactiveForeground
Border Environment.FileTabProvisionalInactiveBorder
(Set to same color as background.)

Background preview tab: hover state

Background preview tab on hover
Background preview tab on hover

Element Token name: Category.color
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 command bar menu colors, 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.

Document overflow button (redline)
Document overflow button (redline)

Use ... Don't use ...
... when you're creating a custom document overflow button. ... for UI that isn't similar to an overflow button.
... for command bar overflow buttons.

Document overflow button: default state

Default document overflow button
Default document overflow button

Element Token name: Category.color
Background Environment.DocWellOverflowButtonBackground
Foreground (Glyph) Environment.DocWellOverflowButtonGlyph
Border N/A

Document overflow button: hover state

Document overflow button on hover
Document overflow button on hover

Element Token name: Category.color
Background Environment.DocWellOverflowButtonMouseOverBackground
Foreground (Glyph) Environment.DocWellOverflowButtonMouseOverGlyph
Border Environment.DocWellOverflowButtonMouseOverBorder

Document overflow button: pressed state

Document overflow button on press
Document overflow button on press

Element Token name: Category.color
Background Environment.DocWellOverflowButtonMouseDownBackground
Foreground (Glyph) Environment.DocWellOverflowButtonMouseDownGlyph
Border Environment.DocWellOverflowButtonMouseDownBorder

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 in Visual Studio (redline)
Tagging in Visual Studio (redline)

Use ... Don't use ...
... for UI that supports tagging. ... for any other type of UI.

Tags

Tag: default state

Default tag
Default tag

Element Token name: Category.color
Background Tag.Background
Foreground (Text) Tag.Background

Tag: hover state

Tag on hover
Tag on hover

Element Token name: Category.color
Background Tag.HoverBackground
Foreground (Text) Tag.HoverBackgroundText

Tag: pressed state

Pressed tag
Pressed tag

Element Token name: Category.color
Background Tag.PressedBackground
Foreground (Text) Tag.PressedBackgroundText

Tag: selected state

Selected tag
Selected tag

Element Token name: Category.color
Background Tag.SelectedBackground
Foreground (Text) Tag.SelectedBackgroundText

Close (×) tag glyph

Close (×) tag glyph: default state

Default Close (×) tag glyph
Default Close (×) tag glyph

Element Token name: Category.color
Background N/A
Foreground (Glyph) Tag.TagHoverGlyph

Close (×) tag glyph: hover state

Close (×) tag glyph on hover
Close (×) tag glyph on hover

Element Token name: Category.color
Background Tag.TagHoverGlyphHoverBackground
Foreground (Glyph) Tag.TagHoverGlyphHover
Border Tag.TagHoverGlyphHoverBorder

Close (×) tag glyph: pressed state

Pressed Close (×) tag glyph
Pressed Close (×) tag glyph

Element Token name: Category.color
Background Tag.TagHoverGlyphPressedBackground
Foreground (Glyph) Tag.TagHoverGlyphPressed
Border Tag.TagHoverGlyphPressedBorder

Selected tag with Close (×) glyph: default state

Default selected tag with Close (×) glyph
Default selected tag with Close (×) glyph

Element Token name: Category.color
Background N/A
Foreground (Glyph) Tag.TagSelectedGlyph

Selected tag with Close (×) glyph: hover state

Selected tag with Close (×) glyph on hover
Selected tag with Close (×) glyph on hover

Element Token name: Category.color
Background Tag.TagSelectedGlyphHoverBackground
Foreground (Glyph) Tag.TagSelectedGlyphHover
Border Tag.TagSelectedGlyphHoverBorder

Selected tag with Close (×) glyph: pressed state

Selected, pressed tag with Close (×) glyph
Selected, pressed tag with Close (×) glyph

Element Token name: Category.color
Background Tag.TagSelectedGlyphPressedBackground
Foreground(Glyph) Tag.TagSelectedGlyphPressed
Border Tag.TagSelectedGlyphPressedBorder

Tool windows

There's no need to replicate tool windows, because they're 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)
Tool window (redline)

Use ... Don't use ...
... anywhere you're creating UI that you want to match tool windows. ... 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)
Tool window frame (redline)

Use ... Don't use ...
... anywhere you're creating UI that you want to match tool windows. ... for any UI that you don't want to change automatically if the shell has a theme update.

Docked tool window

Docked tool window
Docked tool window

Element Token name: Category.color
Background Environment.ToolWindowBackground
Border Environment.ToolWindowBorder

Floating, focused tool window

Floating, focused tool window
Floating, focused tool window

Element Token name: Category.color
Background Environment.ToolWindowBackground
Border Environment.MainWindowActiveDefaultBorder

Floating, unfocused tool window

Floating, unfocused tool window
Floating, unfocused tool window

Element Token name: Category.color
Background Environment.ToolWindowBackground
Border Environment.MainWindowInactiveBorder

Toolbox-like windows

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

Toolbox-like window (redline)
Toolbox-like window (redline)

Use ... Don't use ...
... when you're designing a tool window that you want to always be consistent with the shell toolbox. ... for anything that isn't similar to the toolbox UI, or if you're unsure whether your UI will have problems if the shell toolbox colors change.

Toolbox nodes: default state

Default toolbox parent node
Default toolbox parent node

Default toolbox child node
Default toolbox child node

Element Token name: Category.color
Background Environment.ToolboxContent
(Headings)
Background Environment.ToolWindowBackground
(Individual items, or entire window if no available controls)
Border None
Foreground (Glyph) Environment.ToolboxContent
Foreground (Text) Environment.ToolboxContent

Toolbox child nodes: hover state

Toolbox child node on hover
Toolbox child node on hover

Element Token name: Category.color
Background Environment.ToolboxContentMouseOver
(Individual items only)
Border None
Foreground (Text) Environment.ToolboxContentMouseOver
(Individual items only)

Selected toolbox nodes: focused state

Focused, selected toolbox parent node
Focused, selected toolbox parent node

Focused, selected toolbox child node
Focused, selected toolbox child node

Element Token name: Category.color
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

Selected toolbox nodes: unfocused state

Selected, unfocused toolbox parent node
Selected, unfocused toolbox parent node

Selected, unfocused toolbox child node
Selected, unfocused toolbox child node

Element Token name: Category.color
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

Tool window title bar

The title bar border isn't a true border, it's a thick line across the top of the title bar. It doesn't have a token name for its unfocused state.

Tool window title bar (redline)
Tool window title bar (redline)

Use ... Don't use ...
... anywhere you're creating UI that you want to match tool windows. ... for any UI that you don't want to change automatically if the shell has a theme update.

Focused title bar

Focused title bar
Focused title bar

Element Token name: Category.color
Background Environment.TitleBarActiveGradientBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.TitleBarActiveText
Border Environment.TitleBarActiveBorder
(Set to same color as background.)
Drag handle Environment.TitleBarDragHandleActive

Unfocused title bar

Title bar unfocused
Unfocused title bar

Element Token name: Category.color
Background Environment.TitleBarInactiveGradientBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.TitleBarInactiveText
Border N/A
Drag handle Environment.TitleBarDragHandle

Tool window title bar buttons

Title bar button (redline)
Title bar button (redline)

Use ... Don't use ...
... for buttons that appear in UI that uses color tokens from the tool window title bars. ... for buttons that appear in other locations.
... in any background/foreground combination other than specified.

Focused title bar buttons: default state

Default, focused title bar buttons
Default, focused title bar buttons

Element Token name: Category.color
Background N/A
Foreground (Glyph) Environment.ToolWindowButtonActiveGlyph
Border N/A

Unfocused title bar buttons: default state

Default, unfocused title bar buttons
Default, unfocused title bar buttons

Element Token name: Category.color
Background N/A
Foreground (Glyph) Environment.ToolWindowButtonInactiveGlyph
Border N/A

Focused title bar buttons: hover state

Focused title bar buttons on hover
Focused title bar buttons on hover

Element Token name: Category.color
Background Environment.ToolWindowButtonHoverActive
Foreground (Glyph) Environment.ToolWindowButtonHoverActiveGlyph
Border Environment.ToolWindowButtonHoverActiveBorder

Unfocused title bar buttons: hover state

Unfocused title bar buttons on hover
Unfocused title bar buttons on hover

Element Token name: Category.color
Background Environment.ToolWindowButtonHoverInactive
Foreground (Glyph) Environment.ToolWindowButtonHoverInactiveGlyph
Border Environment.ToolWindowButtonHoverInactiveBorder

Focused title bar buttons: pressed state

Focused title bar buttons on press
Focused title bar buttons on press

Element Token name: Category.color
Background Environment.ToolWindowButtonDown
Foreground (Glyph) Environment.ToolWindowButtonDownActiveGlyph
Border Environment.ToolWindowButtonDownBorder

Unfocused title bar buttons: pressed state

Unfocused title bar buttons on press
Unfocused title bar buttons on press

Element Token name: Category.color
Background Environment.ToolWindowButtonDown
Foreground (Glyph) Environment.ToolWindowButtonDownInactiveGlyph
Border Environment.ToolWindowButtonDownBorder

Tool window tabs

Tool window tab (redline)
Tool window tab (redline)

Use ... Don't use ...
... anywhere you're creating UI that you want to match tool windows. ... for any UI that you don't want to change automatically if the shell has a theme update.

Selected, focused tool window tab

Selected, focused tool window tab
Selected, focused tool window tab

Element Token name: Category.color
Background Environment.ToolWindowTabSelectedTab
Foreground (Text) Environment.ToolWindowTabSelectedActiveText
Border Environment.ToolWindowTabSelectedBorder
(Set to same color as background.)

Selected, unfocused tool window tab

Selected, unfocused tool window tab
Selected, unfocused tool window tab

Element Token name: Category.color
Background Environment.ToolWindowTabSelectedTab
Foreground (Text) Environment.ToolWindowTabSelectedText
Border Environment.ToolWindowTabSelectedBorder
(Set to same color as background.)

Background tool window tab: default state

Default background tool window tab
Default background tool window tab

Element Token name: Category.color
Background Environment.ToolWindowTabGradientBegin
Environment.ToolWindowTabGradientEnd
(Gradient stops set to the same color value in Visual Studio 2013.)
Foreground (Text) Environment.ToolWindowTabText
Border Environment.ToolWindowTabBorder

Background tool window tab: hover state

Background tool window tab on hover
Background tool window tab on hover

Element Token name: Category.color
Background Environment.ToolWindowTabMouseOverBackgroundBegin
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 tabs (redline)Auto-hide tabs (redline)

Use ... Don't use ...
... anywhere you're creating UI that you want to match auto-hidden tool window tabs. ... for any UI that you don't want to change automatically if the shell has a theme update.

Auto-hide tabs: default state

Default auto-hide tab
Default auto-hide tab

Element Token name: Category.color
Background Environment.AutoHideTabBackgroundBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.AutoHideTabText
Border Environment.AutoHideTabBorder

Auto-hide tabs: hover state

Auto-hide tab on hover
Auto-hide tab on hover

Element Token name: Category.color
Background Environment.AutoHideTabMouseOverBackgroundBegin
(Gradient stops for this token not used in themed UI.)
Foreground (Text) Environment.AutoHideTabMouseOverText
Border Environment.AutoHideTabMouseOverBorder