Shared colors

 

Insert introduction 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.

System_CAPS_ICON_important.jpg 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 2013: 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 title

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

ComponentElementToken name: Category.color
Menu title default

 Menu title
BackgroundNone
Menu title default

 Menu title
Foreground (Text)Environment.CommandBarTextActive
Menu title with glyph default

 Menu title with glyph
Foreground (Glyph)Environment.CommandBarMenuGlyph
Menu title with glyph default

 Menu title with glyph
BorderNone

Hover

ComponentElementToken name: Category.color
Menu title on hover

 Menu title
BackgroundEnvironment.CommandBarMouseOverBackgroundBegin

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

 Menu title
Foreground (Text)Environment.CommandBarTextHover
Menu title with glyph on hover

 Menu title with glyph
Foreground (Glyph)Environment.CommandBarMenuMouseOverGlyph
Menu title with glyph on hover

 Menu title with glyph
BorderEnvironment.CommandBarBorder

Pressed

ComponentElementToken name: Category.color
Menu title pressed

 Menu title
BackgroundEnvironment.CommandBarMenuBackgroundGradientBegin

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

 Menu title
Foreground (Text)Environment.CommandBarTextActive
Menu title with glyph pressed

 Menu title with glyph
Foreground (Glyph)Environment.CommandBarMenuMouseDownGlyph
Menu title with glyph pressed

 Menu title with glyph
BorderEnvironment.CommandBarMenuBorder

Only left, top, and right sides.

Disabled

ComponentElementToken name: Category.color
Menu title with glyph disabled

 Menu title with glyph
BackgroundNone
Menu title with glyph disabled

 Menu title with glyph
Foreground (Text)Environment.CommandBarTextInactive
Menu title with glyph disabled

 Menu title with glyph
Foreground (Glyph)Environment.CommandBarTextInactive
Menu title with glyph disabled

 Menu title with glyph
BorderNone
Menu

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

ComponentElementToken name: Category.color
Menu default

 Menu
BackgroundEnvironment.CommandBarMenuBackgroundGradientBegin

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

 Menu
Foreground (Text)Environment.CommandBarTextActive
Menu default

 Menu
Foreground (Submenu glyph)Environment.CommandBarMenuSubmenuGlyph
Menu default

 Menu
BorderEnvironment.CommandBarMenuBorder
Menu default

 Menu
Icon channel backgroundEnvironment.CommandBarMenuIconBackground
Menu default

 Menu
SeparatorEnvironment.CommandBarMenuSeparator
Menu default

 Menu
ShadowEnvironment.DropShadowBackground
Menu checked

 Checked
Check markEnvironment.CommandBarCheckBox
Menu checked

 Checked
Check mark backgroundEnvironment.CommandBarSelectedIcon
Menu selected

 Selected
Icon backgroundEnvironment.CommandBarSelected
Menu selected

 Selected
Icon borderEnvironment.CommandBarSelectedBorder

Hover

ComponentElementToken name: Category.color
Menu hover

 Menu item
BackgroundEnvironment.CommandBarMenuItemMouseOver
Menu hover

 Menu item
Foreground (Text)Environment.CommandBarMenuItemMouseOver
Menu hover

 Menu item
Foreground (Submenu glyph)Environment.CommandBarMenuMouseOverSubmenuGlyph
Menu hover checked

 Checked
Check markEnvironment.CommandBarCheckBoxMouseOver
Menu hover checked

 Checked
Check mark backgroundEnvironment.CommandBarHoverOverSelectedIcon
Menu hover selected

 Selected
Icon backgroundEnvironment.CommandBarHoverOverSelected
Menu hover selected

 Selected
Icon borderEnvironment.CommandBarHoverOverSelectedIconBorder

Disabled

ComponentElementToken name: Category.color
Menu disabled

Menu item
Foreground (Text)Environment.CommandBarTextInactive
Menu disabled

Menu item
Foreground (Submenu glyph)Environment.CommandBarMenuSubmenuGlyph
Menu disabled checked

Checked
Check markEnvironment.CommandBarCheckBoxDisabled
Menu disabled checked

Checked
Check mark backgroundEnvironment.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)

ElementToken name: Category.color
BackgroundEnvironment.CommandBarGradientBegin

While not used in modern themed UI, there are gradient stops and values for this background.
BorderEnvironment.CommandBarToolBarBorder
Drag handleEnvironment.CommandBarDragHandle
SeparatorEnvironment.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

ComponentElementToken name: Category.color
Command icon default

 Default
BackgroundN/A (inherits from command bar background)
Command icon default

 Default
Foreground (Text)Environment.CommandBarTextActive
Command icon default

 Default
BorderN/A
Command icon default selected

 Selected
BackgroundEnvironment.CommandBarSelected
Command icon default selected

 Selected
Foreground (Text)Environment.CommandBarTextSelected
Command icon default selected

 Selected
BorderEnvironment.CommandBarSelectedBorder

Hover and keyboard focused

ComponentElementToken name: Category.color
Command icon hover

 Standard on hover
BackgroundEnvironment.CommandBarMouseOverBackgroundBegin

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

 Standard on hover
Foreground (Text)Environment.CommandBarTextHover
Command icon hover

 Standard on hover
BorderEnvironment.CommandBarBorder
Command icon hover selected

 Selected on hover
BackgroundEnvironment.CommandBarHoverOverSelected
Command icon hover selected

 Selected on hover
Foreground (Text)Environment.CommandBarTextHoverOverSelected
Command icon hover selected

 Selected on hover
BorderEnvironment.CommandBarHoverOverSelectedIconBorder

Pressed

ComponentElementToken name: Category.color
Command icon pressed

 Pressed command icon
BackgroundEnvironment.CommandBarMouseDownBackgroundBegin

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

 Pressed command icon
Foreground (Text)Environment.CommandBarTextMouseDown
Command icon pressed

 Pressed command icon
BorderEnvironment.CommandBarBorder

Disabled

ComponentElementToken name: Category.color
Command icon disabled

 Disabled command icon
BackgroundN/A (inherits from command bar background)
Command icon disabled

 Disabled command icon
Foreground (Text)Environment.CommandBarTextInactive
Command icon disabled

 Disabled command icon
BorderN/A
Combo box
System_CAPS_ICON_important.jpg 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

ComponentElementToken name: Category.color
Combo box input field

 Input field
BackgroundEnvironment.ComboBoxBackground
Combo box input field

 Input field
Foreground (Text)Environment.ComboBoxText
Combo box input field

 Input field
BorderEnvironment.ComboBoxBorder
Combo box input field

 Input field
SeparatorNo separator
Combo box drop-down button

 Drop-down button
BackgroundN/A (inherits)
Combo box drop-down button

 Drop-down button
Foreground (Glyph)Environment.ComboBoxGlyph
Combo box/drop-down list

 Drop-down list
BackgroundEnvironment.ComboBoxPopupBackgroundBegin

While not used in modern themed UI, there are gradient stops and values for this background.
Combo box/drop-down list

 Drop-down list
Foreground (Text)Environment.ComboBoxItemText
Combo box/drop-down list

 Drop-down list
BorderEnvironment.ComboBoxPopupBorder

Hover

ComponentElementToken name: Category.color
Combo box input field on hover

 Input field
BackgroundEnvironment.ComboBoxMouseOverBackgroundBegin

While not used in modern themed UI, there are gradient stops and values for this background.
Combo box input field on hover

 Input field
Foreground (Text)Environment.ComboBoxMouseOverText
Combo box input field on hover

 Input field
BorderEnvironment.ComboBoxMouseOverBorder
Combo box input field on hover

 Input field
SeparatorEnvironment.ComboBoxMouseOverSeparator
Combo box/drop-down button on hover

 Drop-down button
BackgroundEnvironment.ComboBoxButtonMouseOverBackground
Combo box/drop-down button on hover

 Drop-down button
Foreground (Glyph)Environment.ComboBoxMouseOverGlyph
Combo box/drop-down list on hover

 Drop-down list
Background (Menu item)Environment.ComboBoxItemMouseOverBackground
Combo box/drop-down list on hover

 Drop-down list
Foreground (Text)Environment.ComboBoxItemMouseOverText
Combo box/drop-down list on hover

 Drop-down list
Border (Menu item)Environment.ComboBoxItemMouseOverBorder

Focused

ComponentElementToken name: Color.category
Combo box input field focused

 Input field
BackgroundEnvironment.ComboBoxFocusedBackground
Combo box input field focused

 Input field
Foreground (Text)Environment.ComboBoxFocusedText
Combo box input field focused

 Input field
BorderEnvironment.ComboBoxFocusedBorder
Combo box input field focused

 Input field
SeparatorEnvironment.ComboBoxFocusedButtonSeparator
Combo box/drop-down button focused

 Drop-down button
BackgroundEnvironment.ComboBoxFocusedButtonBackground
Combo box/drop-down button focused

 Drop-down button
Foreground (Glyph)Environment.ComboBoxFocusedGlyph

Pressed

ComponentElementToken name: Color.category
Combo box input field pressed

 Input field
BackgroundEnvironment.ComboBoxMouseDownBackground
Combo box input field pressed

 Input field
Foreground (Text)Environment.ComboBoxMouseDownText
Combo box input field pressed

 Input field
BorderEnvironment.ComboBoxMouseDownBorder
Combo box input field pressed

 Input field
SeparatorEnvironment.ComboBoxMouseDownSeparator
Combo box/drop-down button pressed

 Drop-down button
BackgroundEnvironment.ComboBoxButtonMouseDownBackground
Combo box/drop-down button pressed

 Drop-down button
Foreground (Glyph)Environment.ComboBoxMouseDownGlyph

Disabled

ComponentElementToken name: Color.category
Combo box input field disabled

 Input field
BackgroundEnvironment.ComboBoxDisabledBackground
Combo box input field disabled

 Input field
Foreground (Text)Environment.ComboBoxDisabledText
Combo box input field disabled

 Input field
BorderEnvironment.ComboBoxDisabledBorder
Combo box input field disabled

 Input field
SeparatorNo separator
Combo box/drop-down button disabled

 Drop-down button
BackgroundNone
Combo box/drop-down button disabled

 Drop-down button
Foreground (Glyph)Environment.ComboBoxDisabledGlyph
Drop-down
System_CAPS_ICON_important.jpg 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

ComponentElementToken name: Category.color
Drop-down selection field

 Selection field
BackgroundEnvironment.DropDownBackground
Drop-down selection field

 Selection field
Foreground (Text)DropDownText
Drop-down selection field

 Selection field
BorderDropDownBorder
Drop-down selection field

 Selection field
SeparatorNo separator
Drop-down button

 Drop-down button
BackgroundNone
Drop-down button

 Drop-down button
Foreground (Glyph)Environment.DropDownGlyph
Drop-down list

 Drop-down list
BackgroundEnvironment.DropDownPopupBackgroundBegin

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

 Drop-down list
Foreground (Text)Environment.ComboBoxItemText
Drop-down list

 Drop-down list
BorderEnvironment.DropDownPopupBorder
Drop-down list

 Drop-down list
ShadowEnvironment.DropShadowBackground

Hover

ComponentElementToken name: Category.color
Drop-down selection field on hover

 Selection field
BackgroundEnvironment.DropDownMouseOverBackgroundBegin

While not used in modern themed UI, there are gradient stops and values for this background.
Drop-down selection field on hover

 Selection field
Foreground (Text)Environment.DropDownMouseOverText
Drop-down selection field on hover

 Selection field
BorderEnvironment.DropDownMouseOverBorder
Drop-down selection field on hover

 Selection field
SeparatorEnvironment.DropDownButtonMouseOverSeparator
Drop-down button on hover

 Drop-down button
BackgroundEnvironment.DropDownButtonMouseOverBackground
Drop-down button on hover

 Drop-down button
Foreground (Glyph)Environment.DropDownMouseOverGlyph
Drop-down list on hover

 Drop-down list
Background (Menu item)Environment.ComboBoxItemMouseOverBackground
Drop-down list on hover

 Drop-down list
Foreground (Text)Environment.ComboBoxItemMouseOverText
Drop-down list on hover

 Drop-down list
Border (Menu item)Environment.ComboBoxItemMouseOverBorder

Pressed

ComponentElementToken name: Category.color
Drop-down selection field pressed

 Selection field
BackgroundEnvironment.DropDownMouseDownBackground
Drop-down selection field pressed

 Selection field
Foreground (Text)Environment.DropDownMouseDownText
Drop-down selection field pressed

 Selection field
BorderEnvironment.DropDownMouseDownBorder
Drop-down selection field pressed

 Selection field
SeparatorEnvironment.DropDownButtonMouseDownSeparator
Drop-down button pressed

 Drop-down button
BackgroundEnvironment.DropDownButtonMouseDownBackground
Drop-down button pressed

 Drop-down button
Foreground (Glyph)Environment.DropDownMouseDownGlyph

Disabled

ComponentElementToken name: Category.color
Drop-down selection field disabledBackgroundEnvironment.DropDownDisabledBackground
Drop-down selection field disabledForeground (Text)Environment.DropDownDisabledText
Drop-down selection field disabledBorderEnvironment.DropDownDisabledBorder
Drop-down selection field disabledSeparatorNo separator
Drop-down button disabledBackgroundN/A
Drop-down button disabledForeground (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

ComponentElementToken name: Category.color
Split button

 Split button (default)
BackgroundNone
Split button

 Split button (default)
Foreground (Text)Environment.CommandBarTextActive
Split button

 Split button (default)
Foreground (Glyph)Environment.CommandBarSplitButtonGlyph
Split button

 Split button (default)
BorderN/A
Split button

 Split button (default)
SeparatorN/A

Hover

ComponentElementToken name: Category.color
Split button on hover

 Split button (on hover)
BackgroundEnvironment.CommandBarMouseOverBackgroundBegin

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

 Split button (on hover)
Foreground (Text)Environment.CommandBarTextHover
Split button on hover

 Split button (on hover)
Foreground (Glyph)Environment.CommandBarSplitButtonMouseOverGlyph
Split button on hover

 Split button (on hover)
BorderEnvironment.CommandBarBorder
Split button on hover

 Split button (on hover)
SeparatorEnvironment.CommandBarSplitButtonSeparator

Pressed

ComponentElementToken name: Category.color
Split button pressed

 Split button (pressed)
BackgroundEnvironment.CommandBarMouseDownBackgroundBegin

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

 Split button (pressed)
Foreground (Text)Environment.CommandBarTextMouseDown
Split button pressed

 Split button (pressed)
Foreground (Glyph)Environment.CommandBarSplitButtonMouseDownGlyph
Split button pressed

 Split button (pressed)
BorderEnvironment.CommandBarBorder
Split button pressed

 Split button (pressed)
SeparatorN/A

Disabled

ComponentElementToken name: Category.color
Split button disabled

 Split button (disabled)
BackgroundN/A
Split button disabled

 Split button (disabled)
Foreground (Text)Environment.ComboBoxItemTextInactive
Split button disabled

 Split button (disabled)
Foreground (Glyph)Environment.CommandBarTextInactive
Split button disabled

 Split button (disabled)
BorderN/A
Split button disabled

 Split button (disabled)
SeparatorN/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

ComponentElementToken name: Category.color
More options

 More options
BackgroundEnvironment.CommandBarOptionsBackground
More options

 More options
Foreground (Glyph)Environment.CommandBarOptionsGlyph
Overflow button

 Overflow
BackgroundEnvironment.CommandBarOptionsBackground
Overflow button

 Overflow
Foreground (Glyph)Environment.CommandBarOptionsGlyph

Hover

ComponentElementToken name: Category.color
More options on hover

 More options
BackgroundEnvironment.CommandBarOptionsMouseOverBackgroundBegin

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

 More options
Foreground (Glyph)Environment.CommandBarOptionsMouseDownGlyph
Overflow on hover

 Overflow
BackgroundEnvironment.CommandBarOptionsMouseOverBackgroundBegin

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

 Overflow
Foreground (Glyph)Environment.CommandBarOptionsMouseDownGlyph

Pressed

ComponentElementToken name: Category.color
More options pressed

 More options
BackgroundEnvironment.CommandBarOptionsMouseDownBackgroundBegin

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

 More options
Foreground (Glyph)Environment.CommandBarOptionsMouseDownGlyph
Overflow pressed

 Overflow
BackgroundEnvironment.CommandBarOptionsMouseDownBackgroundBegin

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

 Overflow
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

ComponentElementToken name: Category.color
Document: docked or floatingBackgroundDepends on document type
Document: docked or floatingForeground (Text)Depends on document type
Document: docked or floatingBorderEnvironment.ToolWindowBorder
Frame focused

 Frame: floating, focused
BackgroundEnvironment.ToolWindowFloatingFrame
Frame focused

 Frame: floating, focused
Foreground (Text)Environment.ToolWindowFloatingFrame
Frame focused

 Frame: floating, focused
Foreground (Glyph)Environment.RaftedWindowButtonActiveGlyph
Frame focused

 Frame: floating, focused
BorderEnvironment.MainWindowActiveDefaultBorder
Frame focused

 Frame: floating, focused
Border (Glyph)Environment.RaftedWindowButtonActiveBorder

Set to transparent
Frame unfocused

 Frame: floating, unfocused
BackgroundEnvironment.ToolWindowFloatingFrameInactive
Frame unfocused

 Frame: floating, unfocused
Foreground (Text)Environment.ToolWindowFloatingFrameInactive
Frame unfocused

 Frame: floating, unfocused
Foreground (Glyph)Environment.RaftedWindowButtonInactiveGlyph
Frame unfocused

 Frame: floating, unfocused
BorderEnvironment.MainWindowInactiveBorder
Frame unfocused

 Frame: floating, unfocused
Border (Glyph)Environment.RaftedWindowButtonInactiveBorder

Set to transparent

Hover

ComponentElementToken name: Category.color
Frame focused on hover

 Frame: floating, focused
Background (Glyph)Environment.RaftedWindowButtonHoverActive
Frame focused on hover

 Frame: floating, focused
Foreground (Glyph)Environment.RaftedWindowButtonHoverActiveGlyph
Frame focused on hover

 Frame: floating, focused
Border (Glyph)Environment.RaftedWindowButtonHoverActiveBorder
Frame unfocused on hover

 Frame: floating, unfocused
Background (Glyph)EnvironmentRaftedWindowButtonHoverInactive
Frame unfocused on hover

 Frame: floating, unfocused
Foreground (Glyph)Environment.RaftedWindowButtonHoverInactiveGlyph
Frame unfocused on hover

 Frame: floating, unfocused
Border (Glyph)Environment.RaftedWindowButtonHoverInactiveBorder

Pressed

ComponentElementToken name: Category.color
Frame focused pressed

 Frame: floating, focused
Background (Glyph)Environment.RaftedWindowButtonDown
Frame focused pressed

 Frame: floating, focused
Foreground (Glyph)Environment.RaftedWindowButtonDownGlyph
Frame focused pressed

 Frame: floating, focused
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

ComponentElementToken name: Category.color
Selected tab focused

 Selected document tab, focused
BackgroundEnvironment.FileTabSelectedGradientTop

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

 Selected document tab, focused
Foreground (Text)Environment.FileTabSelectedText
Selected tab focused

 Selected document tab, focused
BorderEnvironment.FileTabSelectedBorder

Set to same color as background.
Selected tab focused

 Selected document tab, focused
Document borderEnvironment.FileTabDocumentBorderBackground

Unfocused

ComponentElementToken name: Category.color
Selected tab unfocused

 Selected document tab, unfocused
BackgroundEnvironment.FileTabInactiveGradientTop

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

 Selected document tab, unfocused
Foreground (Text)Environment.FileTabInactiveText
Selected tab unfocused

 Selected document tab, unfocused
BorderEnvironment.FileTabInactiveBorder

Set to same color as background.
Selected tab unfocused

 Selected document tab, unfocused
Document borderEnvironment.FileTabInactiveDocumentBorderBackground
Background tab

Default

ComponentElementToken name: Color.category
Background tab

 Background tab default
BackgroundEnvironment.FileTabBackground
Background tab

 Background tab default
Foreground (Text)Environment.FileTabText
Background tab

 Background tab default
BorderEnvironment.FileTabBorder

Set to same color as background.

Hover

ComponentElementToken name: Color.category
Background tab on hover

 Background tab on hover
BackgroundEnvironment.FileTabHotGradientTop

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

 Background tab on hover
Foreground (Text)Environment.FileTabHotText
Background tab on hover

 Background tab on hover
BorderEnvironment.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

ComponentElementToken name: Category.color
Preview tab focused

 Focused preview tab
BackgroundEnvironment.FileTabProvisionalSelectedActive
Preview tab focused

 Focused preview tab
Foreground (Text)Environment.FileTabProvisionalSelectedActiveForeground
Preview tab focused

 Focused preview tab
BorderEnvironment.FileTabProvisionalSelectedActiveBorder

Set to same color as background.
Preview tab focused

 Focused preview tab
Document borderEnvironment.FileTabProvisionalSelectedActiveBorder

Selected preview tab: Unfocused

ComponentElementToken name: Category.color
Preview tab unfocused

 Unfocused preview tab
BackgroundEnvironment.FileTabProvisionalSelectedInactive
Preview tab unfocused

 Unfocused preview tab
Foreground (Text)Environment.FileTabProvisionalSelectedInactiveForeground
Preview tab unfocused

 Unfocused preview tab
BorderEnvironment.FileTabProvisionalSelectedInactiveBorder
Preview tab unfocused

 Unfocused preview tab
Document borderEnvironment.FileTabProvisionalSelectedInactiveBorder

Background preview tab: Default

ComponentElementToken name: Category.color
Preview background tab

 Preview tab background tab
BackgroundEnvironment.FileTabProvisionalInactive
Preview background tab

 Preview tab background tab
Foreground (Text)Environment.FileTabProvisionalInactiveForeground
Preview background tab

 Preview tab background tab
BorderEnvironment.FileTabProvisionalInactiveBorder

Set to same color as background.

Background preview tab: Hover

ComponentElementToken name: Category.color
Preview background tab on hover

 Preview tab background tab on hover
BackgroundEnvironment.FileTabProvisionalHover
Preview background tab on hover

 Preview tab background tab on hover
Foreground (Text)Environment.FileTabProvisionalHoverForeground
Preview background tab on hover

 Preview tab background tab on hover
BorderEnvironment.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

ComponentElementToken name: Category.color
Overflow

 Document overflow button
BackgroundEnvironment.DocWellOverflowButtonBackground
Overflow

 Document overflow button
Foreground (Glyph)Environment.DocWellOverflowButtonGlyph
Overflow

 Document overflow button
BorderN/A

Hover

ComponentElementToken name: Category.color
Overflow on hover

 Document overflow button on hover
BackgroundEnvironment.DocWellOverflowButtonMouseOverBackground
Overflow on hover

 Document overflow button on hover
Foreground (Glyph)Environment.DocWellOverflowButtonMouseOverGlyph
Overflow on hover

 Document overflow button on hover
BorderEnvironment.DocWellOverflowButtonMouseOverBorder

Pressed

ComponentElementToken name: Category.color
Overflow pressed

 Pressed document overflow button
BackgroundEnvironment.DocWellOverflowButtonMouseDownBackground
Overflow pressed

 Pressed document overflow button
Foreground (Glyph)Environment.DocWellOverflowButtonMouseDownGlyph
Overflow pressed

 Pressed document overflow button
BorderEnvironment.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

ComponentElementToken name: Category.color
Tool window dockedBackgroundEnvironment.ToolWindowBackground
Tool window dockedBorderEnvironment.ToolWindowBorder

Floating: focused

ComponentElementToken name: Category.color
Tool window focusedBackgroundEnvironment.ToolWindowBackground
Tool window focusedBorderEnvironment.MainWindowActiveDefaultBorder

Floating: unfocused

ComponentElementToken name: Category.color
Tool window unfocusedBackgroundEnvironment.ToolWindowBackground
Tool window unfocusedBorderEnvironment.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

ComponentElementToken name: Category.color
Title bar focused

 Focused title bar
BackgroundEnvironment.TitleBarActiveGradientBegin

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

 Focused title bar
Foreground (Text)Environment.TitleBarActiveText
Title bar focused

 Focused title bar
BorderEnvironment.TitleBarActiveBorder

Set to same color as background.
Title bar focused

 Focused title bar
Drag handleEnvironment.TitleBarDragHandleActive

Unfocused

ComponentElementToken name: Category.color
Title bar unfocused

 Unfocused title bar
BackgroundEnvironment.TitleBarInactiveGradientBegin

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

 Unfocused title bar
Foreground (Text)Environment.TitleBarInactiveText
Title bar unfocused

 Unfocused title bar
BorderN/A
Title bar unfocused

 Unfocused title bar
Drag handleEnvironment.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

ComponentElementToken name: Category.color
Title bar button focused

 Focused
BackgroundN/A
Title bar button focused

 Focused
Foreground (Glyph)Environment.ToolWindowButtonActiveGlyph
Title bar button focused

 Focused
BorderN/A
Title bar button unfocused

 Unfocused
BackgroundN/A
Title bar button unfocused

 Unfocused
Foreground (Glyph)Environment.ToolWindowButtonInactiveGlyph
Title bar button unfocused

 Unfocused
BorderN/A

Hover

ComponentElementToken name: Category.color
Title bar button focused on hover

 Focused
BackgroundEnvironment.ToolWindowButtonHoverActive
Title bar button focused on hover

 Focused
Foreground (Glyph)Environment.ToolWindowButtonHoverActiveGlyph
Title bar button focused on hover

 Focused
BorderEnvironment.ToolWindowButtonHoverActiveBorder
Title bar button unfocused on hover

 Unfocused
BackgroundEnvironment.ToolWindowButtonHoverInactive
Title bar button unfocused on hover

 Unfocused
Foreground (Glyph)Environment.ToolWindowButtonHoverInactiveGlyph
Title bar button unfocused on hover

 Unfocused
BorderEnvironment.ToolWindowButtonHoverInactiveBorder

Pressed

ComponentElementToken name: Category.color
Title bar button focused and pressed

 Focused
BackgroundEnvironment.ToolWindowButtonDown
Title bar button focused and pressed

 Focused
Foreground (Glyph)Environment.ToolWindowButtonDownActiveGlyph
Title bar button focused and pressed

 Focused
BorderEnvironment.ToolWindowButtonDownBorder
Title bar button unfocused and pressed

 Unfocused
BackgroundEnvironment.ToolWindowButtonDown
Title bar button unfocused and pressed

 Unfocused
Foreground (Glyph)Environment.ToolWindowButtonDownInactiveGlyph
Title bar button unfocused and pressed

 Unfocused
BorderEnvironment.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

ComponentElementToken name: Category.color
Tool window tab focused

 Selected, focused tool window tab
BackgroundEnvironment.ToolWindowTabSelectedTab
Tool window tab focused

 Selected, focused tool window tab
Foreground (Text)Environment.ToolWindowTabSelectedActiveText
Tool window tab focused

 Selected, focused tool window tab
BorderEnvironment.ToolWindowTabSelectedBorder

Set to same color as background.
ComponentElementToken name: Category.color
Tool window tab unfocused

 Selected, unfocused tool window tab
BackgroundEnvironment.ToolWindowTabSelectedTab
Tool window tab unfocused

 Selected, unfocused tool window tab
Foreground (Text)Environment.ToolWindowTabSelectedText
Tool window tab unfocused

 Selected, unfocused tool window tab
BorderEnvironment.ToolWindowTabSelectedBorder

Set to same color as background.

Background tab

ComponentElementToken name: Category.color
Tool window background tab

 Background tool window tab
BackgroundEnvironment.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.
Tool window background tab

 Background tool window tab
Foreground (Text)Environment.ToolWindowTabText
Tool window background tab

 Background tool window tab
BorderEnvironment.ToolWindowTabBorder
ComponentElementToken name: Category.color
Tool window background tab on hover

 Background tool window tab on hover
BackgroundEnvironment.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.
Tool window background tab on hover

 Background tool window tab on hover
Foreground (Text)Environment.ToolWindowTabMouseOverText
Tool window background tab on hover

 Background tool window tab on hover
BorderEnvironment.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

ComponentElementToken name: Category.color
Auto-hide tab

 Default auto-hide tab
BackgroundEnvironment.AutoHideTabBackgroundBegin

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

 Default auto-hide tab
Foreground (Text)Environment.AutoHideTabText
Auto-hide tab

 Default auto-hide tab
BorderEnvironment.AutoHideTabBorder

Hover

ComponentElementToken name: Category.color
Auto-hide tab on hover

 Auto-hide tab on hover
BackgroundEnvironment.AutoHideTabMouseOverBackgroundBegin

While not used in modern themed UI, there are gradient stops and values for this background.
Auto-hide tab on hover

 Auto-hide tab on hover
Foreground (Text)Environment.AutoHideTabMouseOverText
Auto-hide tab on hover

 Auto-hide tab on hover
BorderEnvironment.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.

Search box

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

ComponentElementToken name: Category.color
Search input field focused

 Input field
BackgroundSearchControl.FocusedBackground
Search input field focused

 Input field
Foreground (Text)SearchControl.FocusedBackground
Search input field focused

 Input field
BorderSearchControl.FocusedBorder
Search input field focused

 Input field
SeparatorSearchControl.FocusedDropDownSeparator
Search action button focused

 Action button
BackgroundNone
Search action button focused

 Action button
Foreground (Search glyph)SearchControl.SearchGlyph
Search action button focused

 Action button
Foreground (Stop glyph)SearchControl.StopGlyph
Search action button focused

 Action button
Foreground (Clear glyph)SearchControl.ClearGlyph
Search action button focused

 Action button
BorderN/A
Search drop-down button focused

 Drop-down button
BackgroundSearchControl.FocusedDropDownButton
Search drop-down button focused

 Drop-down button
Foreground (Glyph)SearchControl.FocusedDropDownButtonGlyph
Search drop-down button focused

 Drop-down button
BorderSearchControl.FocusedDropDownButtonBorder

Unfocused

ComponentElementToken name: Category.color
Search input field unfocused

 Active input field
BackgroundSearchControl.SearchActiveBackground
Search input field unfocused

 Active input field
Foreground (Text)SearchControl.SearchActiveBackground
Search input field unfocused

 Active input field
BorderSearchControl.UnfocusedBorder
Search input field unfocused

 Active input field
SeparatorSearchControl.DropDownSeparator
Search input field unfocused and inactive

 Inactive input field
BackgroundSearchControl.Unfocused
Search input field unfocused and inactive

 Inactive input field
Foreground (Text)SearchControl.Unfocused
Search input field unfocused and inactive

 Inactive input field
BorderSearchControl.UnfocusedBorder
Search input field unfocused and inactive

 Inactive input field
SeparatorSearchControl.DropDownSeparator
Search action button unfocused

 Action button
BackgroundN/A
Search action button unfocused

 Action button
Foreground (Search glyph)SearchControl.SearchGlyph
Search action button unfocused

 Action button
Foreground (Stop glyph)SearchControl.StopGlyph
Search action button unfocused

 Action button
Foreground (Clear glyph)SearchControl.ClearGlyph
Search action button unfocused

 Action button
BorderN/A
Search drop-down button unfocused

 Drop-down button
BackgroundSearchControl.UnfocusedDropDownButton
Search drop-down button unfocused

 Drop-down button
Foreground (Glyph)SearchControl.UnfocusedDropDownButtonGlyph
Search drop-down button unfocused

 Drop-down button
BorderSearchControl.UnfocusedDropDownButtonBorder

Pressed

ComponentElementToken name: Category.color
Search action button pressed

 Action button
BackgroundSearchControl.ActionButtonMouseDown
Search action button pressed

 Action button
Foreground (Glyph)SearchControl.ActionButtonMouseDownGlyph
Search action button pressed

 Action button
BorderSearchControl.ActionButtonMouseDownBorder
Search drop-down button pressed

 Drop-down button
BackgroundSearchControl.MouseDownDropDownButton
Search drop-down button pressed

 Drop-down button
Foreground (Glyph)SearchControl.MouseDownDropDownButtonGlyph
Search drop-down button pressed

 Drop-down button
BorderSearchControl.MouseDownDropDownButtonBorder

Highlighted (Text only)

ComponentElementToken name: Category.color
Search input field highlight

 Input field with text highlighted
BackgroundSearchControl.Selection
Search input field highlight

 Input field with text highlighted
Foreground (Text)SearchControl.FocusedBackground
Search input field highlight

 Input field with text highlighted
BorderNone
Search input field highlight

 Input field with text highlighted
SeparatorSearchControl.FocusedDropDownSeparator

Disabled

ComponentElementToken name: Category.color
Search input field disabled

 Input field
BackgroundSearchControl.Disabled
Search input field disabled

 Input field
Foreground (Text)SearchControl.Disabled
Search input field disabled

 Input field
BorderSearchControl.DisabledBorder
Search input field disabled

 Input field
SeparatorSearchControl.DropDownSeparator
Search action button disabled

 Action button
BackgroundNone
Search action button disabled

 Action button
Foreground (Glyph)SearchControl.ActionButtonDisabledGlyph
Search action button disabled

 Action button
BorderNone
Search drop-down button disabled

 Drop-down button
BackgroundNone
Search drop-down button disabled

 Drop-down button
Foreground (Glyph)SearchControl.DisabledDownButtonGlyph
Search drop-down button disabled

 Drop-down button
BorderNone
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)

ElementToken name: Category.color
BorderSearchControl.PopupBorder
SeparatorSearchControl.PopupSectionHeaderSeparator
ShadowEnvironment.DropShadowBackground

Default

ComponentElementToken name: Category.color
Search suggested

 Suggested searches
BackgroundSearchControl.PopupItemsListBackgroundGradientBegin

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

 Suggested searches
Foreground (Text)SearchControl.PopupItemText
Search check box

 Search options (check box)
BackgroundSearchControl.PopupSectionBackgroundGradientBegin

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

 Search options (link)
BackgroundSearchControl.PopupSectionBackgroundGradientBegin

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

 Search options (check box)
Foreground (Check box text)SearchControl.PopupCheckboxText
Search options

 Search options (link)
Foreground (Check box text)SearchControl.PopupCheckboxText
Search check box

 Search options (check box)
Foreground (Link text)SearchControl.PopupButtonText
Search options

 Search options (link)
Foreground (Link text)SearchControl.PopupButtonText
Search check box

 Search options (check box)
Header backgroundSearchControl.PopupSectionHeaderGradientBegin

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

 Search options (link)
Header backgroundSearchControl.PopupSectionHeaderGradientBegin

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

 Search options (check box)
Foreground (Header text)SearchControl.PopupSectionHeaderText
Search options

 Search options (link)
Foreground (Header text)SearchControl.PopupSectionHeaderText

Hover

ComponentElementToken name: Category.color
Search suggested on hover

 Suggested searches
BackgroundSearchControl.PopupControlMouseOverBackgroundGradientBegin

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

 Suggested searches
Foreground (Text)SearchControl.PopupMouseOverItemText
Search suggested on hover

 Suggested searches
BorderSearchControl.PopupControlMouseOverBorder
Search check box on hover

 Suggested searches (check box)
BackgroundSearchControl.PopupControlMouseOverBackgroundGradientBegin

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

 Search options
BackgroundSearchControl.PopupControlMouseOverBackgroundGradientBegin

While not used in modern themed UI, there are gradient stops and values for this background.
Search check box on hover

 Suggested searches (check box)
Foreground (Check box text)SearchControl.PopupCheckboxMouseDownText
Search options on hover

 Search options
Foreground (Check box text)SearchControl.PopupCheckboxMouseDownText
Search check box on hover

 Suggested searches (check box)
Foreground (Link text)SearchControl.PopupButtonMouseDownText
Search options on hover

 Search options
Foreground (Link text)SearchControl.PopupButtonMouseDownText
Search check box on hover

 Suggested searches (check box)
BorderSearchControl.PopupControlMouseOverBorder
Search options on hover

 Search options
BorderSearchControl.PopupControlMouseOverBorder

Pressed

ComponentElementToken name: Category.color
Search suggested pressed

 Suggested searches (check box)
Check box backgroundSearchControl.PopupControlMouseDownBackgroundGradientBegin

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

 Search options
Check box backgroundSearchControl.PopupControlMouseDownBackgroundGradientBegin

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

 Suggested searches (check box)
Check box backgroundSearchControl.PopupControlMouseDownBackgroundGradientEnd

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

 Search options
Check box backgroundSearchControl.PopupControlMouseDownBackgroundGradientEnd

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

 Suggested searches (check box)
Foreground (Check box text)SearchControl.PopupCheckboxMouseDownText
Search options pressed

 Search options
Foreground (Check box text)SearchControl.PopupCheckboxMouseDownText
Search suggested pressed

 Suggested searches (check box)
Link backgroundSearchControl.PopupButtonMouseDownBackgroundGradientBegin

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

 Search options
Link backgroundSearchControl.PopupButtonMouseDownBackgroundGradientBegin

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

 Suggested searches (check box)
Foreground (Link text)SearchControl.PopupButtonMouseDownText
Search options pressed

 Search options
Foreground (Link text)SearchControl.PopupButtonMouseDownText

Hyperlink

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

ComponentElementToken name: Category.color
Hyperlink defaultForeground (Text)Environment.PanelHyperlink

Hover

ComponentElementToken name: Category.color
Hyperlink on hoverForeground (Text)Environment.PanelHyperlinkHover

Pressed

ComponentElementToken name: Category.color
Hyperlink pressedForeground (Text)Environment.PanelHyperlinkPressed

Disabled

ComponentElementToken name: Category.color
Hyperlink disabledForeground (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.

ComponentElementToken name: Category.color
Infobar

 Infobar
BackgroundEnvironment.InfoBackground
Infobar

 Infobar
Foreground (Text)Environment.InfoText
Infobar

 Infobar
BorderEnvironment.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 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

ComponentElementToken name: Category.color
Scroll bar

 Scrollbar
ScrollbarEnvironment.ScrollBarBackground
Scroll bar

 Scrollbar
Foreground (Thumb)Environment.ScrollBarThumbBackground
Scroll bar arrow

 Scroll arrow
BackgroundEnvironment.ScrollBarArrowBackground

Set to same color as scroll bar.
Scroll bar arrow

 Scroll arrow
Foreground (Glyph)Environment.ScrollBarArrowGlyph

Hover

ComponentElementToken name: Category.color
Scroll bar on hover

 Scrollbar
ScrollbarEnvironment.ScrollBarBackground
Scroll bar on hover

 Scrollbar
Foreground (Thumb)Environment.ScrollBarThumbMouseOverBackground
Scroll bar arrow on hover

 Scroll arrow
BackgroundEnvironment.ScrollBarArrowMouseOverBackground

Set to same color as scroll bar.
Scroll bar arrow on hover

 Scroll arrow
Foreground (Glyph)Environment.ScrollBarArrowGlyphMouseOver

Pressed

ComponentElementToken name: Category.color
Scroll bar pressed

 Scrollbar
ScrollbarEnvironment.ScrollBarBackground
Scroll bar pressed

 Scrollbar
Foreground (Thumb)Environment.ScrollBarThumbPressedBackground
Scroll bar arrow pressed

 Scroll arrow
BackgroundEnvironment.ScrollBarArrowPressedBackground

Set to same color as scrollbar.
Scroll bar arrow pressed

 Scroll arrow
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

ComponentElementToken name: Category.color
Tree viewBackgroundTreeView.Background
Tree viewForeground (Text)TreeView.Background
Tree viewForeground (Glyph)TreeView.Glyph
Tree viewBorderNone

Hover

ComponentElementToken name: Category.color
Tree view on hoverBackgroundTreeView.Background
Tree view on hoverForeground (Text)TreeView.Background
Tree view on hoverForeground (Glyph)TreeView.GlyphMouseOver
Tree view on hoverBorderNone

Drag over

ComponentElementToken name: Category.color
Tree view dragoverBackgroundTreeView.DragOverItem
Tree view dragoverForeground (Text)TreeView.DragOverItem
Tree view dragoverForeground (Glyph)TreeView.DragOverItemGlyph
Tree view dragoverBorderNone

Selected

ComponentElementToken name: Category.color
Tree view focused

 Focused
BackgroundTreeView.SelectedItemActive
Tree view focused

 Focused
Foreground (Text)TreeView.SelectedItemActive
Tree view focused

 Focused
Foreground (Glyph)TreeView.SelectedItemActiveGlyph
Tree view focused

 Focused
BorderTreeView.FocusVisualBorder
Tree view unfocused

 Unfocused
BackgroundTreeView.SelectedItemInactive
Tree view unfocused

 Unfocused
Foreground (Text)TreeView.SelectedItemInactive
Tree view unfocused

 Unfocused
Foreground (Glyph)TreeView.SelectedItemInactiveGlyph
Tree view unfocused

 Unfocused
BorderNone

Hover over selected

ComponentElementToken name: Category.color
Tree view focused on hover

 Focused
BackgroundTreeView.SelectedItemActive
Tree view focused on hover

 Focused
Foreground (Text)TreeView.SelectedItemActive
Tree view focused on hover

 Focused
Foreground (Glyph)TreeView.SelectedItemActiveGlyphMouseOver
Tree view focused on hover

 Focused
BorderNoneTreeView.FocusVisualBorder
Tree view unfocused on hover

 Unfocused
BackgroundTreeView.SelectedItemInactive
Tree view unfocused on hover

 Unfocused
Foreground (Text)TreeView.SelectedItemInactive
Tree view unfocused on hover

 Unfocused
Foreground (Glyph)TreeView.SelectedItemActiveGlyphMouseOver
Tree view unfocused on hover

 Unfocused
BorderNone

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

ComponentElementToken name: Category.color
ButtonButtonCommonControls.Button
ButtonButton borderCommonControls.ButtonBorder

Disabled

ComponentElementToken name: Category.color
Button disabledButtonCommonControls.ButtonDisabled
Button disabledButton borderCommonControls.ButtonBorderDisabled

Hover

ComponentElementToken name: Category.color
Button on hoverButtonCommonControls.ButtonHover
Button on hoverButton borderCommonControls.ButtonBorderHover

Pressed

ComponentElementToken name: Category.color
Button pressedButtonCommonControls.ButtonPressed
Button pressedButton borderCommonControls.ButtonBorderPressed

Focused

ComponentElementToken name: Category.color
Button focusedButtonCommonControls.ButtonFocused
Button focusedButton borderCommonControls.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

ComponentElementToken name: Category.color
Check boxBackgroundCommonControls.CheckBoxBackground
Check boxBorderCommonControls.CheckBoxBorder
Check boxTextCommonControls.CheckBoxText
Check boxGlyphCommonControls.CheckBoxGlyph

Disabled

ComponentElementToken name: Category.color
Check box disabledBackgroundCommonControls.CheckBoxBackgroundDisabled
Check box disabledBorderCommonControls.CheckBoxBorderDisabled
Check box disabledTextCommonControls.CheckBoxTextDisabled
Check box disabledGlyphCommonControls.CheckBoxGlyphDisabled

Hover

ComponentElementToken name: Category.color
Check box on hoverBackgroundCommonControls.CheckBoxBackgroundHover
Check box on hoverBorderCommonControls.CheckBoxBorderHover
Check box on hoverTextCommonControls.CheckBoxTextHover
Check box on hoverGlyphCommonControls.CheckBoxGlyphHover

Pressed

ComponentElementToken name: Category.color
Check box pressedBackgroundCommonControls.CheckBoxBackgroundPressed
Check box pressedBorderCommonControls.CheckBoxBorderPressed
Check box pressedTextCommonControls.CheckBoxTextPressed
Check box pressedGlyphCommonControls.CheckBoxGlyphPressed

Focused

ComponentElementToken name: Category.color
Check box focusedBackgroundCommonControls.CheckBoxBackgroundFocused
Check box focusedBorderCommonControls.CheckBoxBorderFocused
Check box focusedTextCommonControls.CheckBoxTextFocused
Check box focusedGlyphCommonControls.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

ComponentElementToken name: Category.color
Drop-down/combo boxBackgroundCommonControls.ComboBoxBackground
Drop-down/combo boxBorderCommonControls.ComboBoxBorder
Drop-down/combo boxTextCommonControls.ComboBoxText
Drop-down/combo boxSeparatorCommonControls.ComboBoxSeparator
Drop-down/combo boxGlyphCommonControls.ComboBoxGlyph
Drop-down/combo boxGlyph backgroundCommonControls.ComboBoxGlyphBackground

Disabled

ComponentElementToken name: Category.color
Drop-down/combo box disabledBackgroundCommonControls.ComboBoxBackgroundDisabled
Drop-down/combo box disabledBorderCommonControls.ComboBoxBorderDisabled
Drop-down/combo box disabledTextCommonControls.ComboBoxTextDisabled
Drop-down/combo box disabledSeparatorCommonControls.ComboBoxSeparatorDisabled
Drop-down/combo box disabledGlyphCommonControls.ComboBoxGlyphDisabled
Drop-down/combo box disabledGlyph backgroundCommonControls.ComboBoxGlyphBackgroundDisabled

Hover

ComponentElementToken name: Category.color
Drop-down/combo box on hoverBackgroundCommonControls.ComboBoxBackgroundHover
Drop-down/combo box on hoverBorderCommonControls.ComboBoxBorderHover
Drop-down/combo box on hoverTextCommonControls.ComboBoxTextHover
Drop-down/combo box on hoverSeparatorCommonControls.ComboBoxSeparatorHover
Drop-down/combo box on hoverGlyphCommonControls.ComboBoxGlyphHover
Drop-down/combo box on hoverGlyph backgroundCommonControls.ComboBoxGlyphBackgroundHover

Pressed

ComponentElementToken name: Category.color
Drop-down/combo box pressedBackgroundCommonControls.ComboBoxBackgroundPressed
Drop-down/combo box pressedBorderCommonControls.ComboBoxBorderPressed
Drop-down/combo box pressedTextCommonControls.ComboBoxTextPressed
Drop-down/combo box pressedSeparatorCommonControls.ComboBoxSeparatorPressed
Drop-down/combo box pressedGlyphCommonControls.ComboBoxGlyphPressed
Drop-down/combo box pressedGlyph backgroundCommonControls.ComboBoxGlyphBackgroundPressed

Focused

ComponentElementToken name: Category.color
Drop-down/combo box focusedBackgroundCommonControls.ComboBoxBackgroundFocused
Drop-down/combo box focusedBorderCommonControls.ComboBoxBorderFocused
Drop-down/combo box focusedTextCommonControls.ComboBoxTextFocused
Drop-down/combo box focusedSeparatorCommonControls.ComboBoxSeparatorFocused
Drop-down/combo box focusedGlyphCommonControls.ComboBoxGlyphFocused
Drop-down/combo box focusedGlyph backgroundCommonControls.ComboBoxGlyphBackgroundFocused

Text input selection

ComponentElementToken name: Category.color
Drop-down/combo box text inputHighlightCommonControls.ComboBoxTextInputSelection

Pressed – List item view

ComponentElementToken name: Color.category
Drop-down/combo box list viewBackgroundCommonControls.ComboBoxListBackground
Drop-down/combo box list viewBackgroundCommonControls.ComboBoxListBackgroundHover
Drop-down/combo box list viewBackgroundCommonControls.ComboBoxListItemBackgroundPressed
Drop-down/combo box list viewBackgroundCommonControls.ComboBoxListItemBackgroundFocused
Drop-down/combo box list viewBorderCommonControls.ComboBoxListBorder
Drop-down/combo box list viewBorderCommonControls.ComboBoxListBorderHover
Drop-down/combo box list viewBorderCommonControls.ComboBoxListBorderPressed
Drop-down/combo box list viewBorderCommonControls.ComboBoxListBorderFocused
Drop-down/combo box list viewItem textCommonControls.ComboBoxListItemText
Drop-down/combo box list viewItem textCommonControls.ComboBoxListItemTextHover
Drop-down/combo box list viewItem textCommonControls.ComboBoxListItemTextPressed
Drop-down/combo box list viewItem textCommonControls.ComboBoxListItemTextFocused
Drop-down/combo box list viewBackground shadowCommonControls.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.

StateElementToken name: Category.color
DefaultBackgroundHeader.Default
DefaultForeground (Text)Environment.CommandBarTextActive
DefaultForeground (Glyph)Header.Glyph
DefaultBorderHeader.SeparatorLine
HoverBackgroundHeader.MouseOver
HoverForeground (Text)Environment.CommandBarTextHover
HoverForeground (Glyph)Header.MouseOverGlyph
HoverBorderHeader.SeparatorLine
PressedBackgroundCommonControls.CheckBoxBackgroundPressed
PressedForeground (Text)CommonControls.CheckBoxBorderPressed
PressedForeground (Glyph)CommonControls.CheckBoxTextPressed
PressedBorderCommonControls.CheckBoxGlyphPressed
List view items

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

StateElementToken name: Category.color
DefaultBackgroundTransparent
DefaultForeground (Text)Environment.CommandBarTextActive
DefaultBorderNone
Selected (active)BackgroundTreeView.SelectedItemActive
Selected (active)Foreground (Text)TreeView.SelectedItemActiveText
Selected (active)BorderNone
Selected (inactive)BackgroundTreeView.SelectedItemInactive
Selected (inactive)Foreground (Text)TreeView.SelectedItemInactiveText
Selected (inactive)BorderNone

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.

StateComponentElementToken name: Category.color
Default (selected)TabBackgroundManifestDesigner.TabActive
Default (selected)TabBorderNone
Default (selected)Description paneBackgroundManifestDesigner.DescriptionPane
Default (selected)Content pageBackgroundManifestDesigner.Background
Default (selected)Content pageDialog helper textManifestDesigner.WatermarkText

This token name does not match its function.
Non-selectedTabBackgroundManifestDesigner.Tab.Inactive
HoverTabBackgroundManifestDesigner.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

ComponentElementToken name: Category.color
Tag

 Default
BackgroundTag.Background
Tag

 Default
Foreground (Text)Tag.Background
Tag on hover

 Hover
BackgroundTag.HoverBackground
Tag on hover

 Hover
Foreground (Text)Tag.HoverBackgroundText
Tag pressed

 Pressed
BackgroundTag.PressedBackground
Tag pressed

 Pressed
Foreground (Text)Tag.PressedBackgroundText
Tag selected

 Selected
BackgroundTag.SelectedBackground
Tag selected

 Selected
Foreground (Text)Tag.SelectedBackgroundText

Glyph (close icon)

Default

ComponentElementToken name: Category.color
Tag (glyph)

 Default (tag default)
BackgroundN/A
Tag (glyph)

 Default (tag default)
Foreground (Glyph)Tag.TagHoverGlyph

Hover

ComponentElementToken name: Category.color
Tag (glyph) on hover

 Hover (tag default)
BackgroundTag.TagHoverGlyphHoverBackground
Tag (glyph) on hover

 Hover (tag default)
Foreground (Glyph)Tag.TagHoverGlyphHover
Tag (glyph) on hover

 Hover (tag default)
BorderTag.TagHoverGlyphHoverBorder

Pressed

ComponentElementToken name: Category.color
Tag (glyph) pressed

 Pressed (tag default)
BackgroundTag.TagHoverGlyphPressedBackground
Tag (glyph) pressed

 Pressed (tag default)
Foreground (Glyph)Tag.TagHoverGlyphPressed
Tag (glyph) pressed

 Pressed (tag default)
BorderTag.TagHoverGlyphPressedBorder

Tag selected/glyph default

ComponentElementToken name: Category.color
Tag selected

 Default (tag selected)
BackgroundN/A
Tag selected

 Default (tag selected)
Foreground (Glyph)Tag.TagSelectedGlyph

Tag selected/glyph hover

ComponentElementToken name: Category.color
Tag selected on hover

 Hover (tag selected)
BackgroundTag.TagSelectedGlyphHoverBackground
Tag selected on hover

 Hover (tag selected)
Foreground (Glyph)Tag.TagSelectedGlyphHover
Tag selected on hover

 Hover (tag selected)
BorderTag.TagSelectedGlyphHoverBorder

Tag selected/glyph pressed

ComponentElementToken name: Category.color
Tag selected pressed

 Pressed (tag selected)
BackgroundTag.TagSelectedGlyphPressedBackground
Tag selected pressed

 Pressed (tag selected)
Foreground(Glyph)Tag.TagSelectedGlyphPressed
Tag selected pressed

 Pressed (tag selected)
BorderTag.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.

ComponentElementToken name: Category.color
Bottom layerBackgroundEnvironment.EnvironmentBackground
ComponentElementToken name: Category.color
Top layerBackground

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

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

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

 Gradient stops set to the same color value in Visual Studio 2013 Light and Dark themes.
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.

ComponentElementToken name: Category.color
Menu barBackground

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

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

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

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

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

 Gradient stops set to the same color value in Visual Studio 2013 Light and Dark themes.
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

ComponentElementToken name: Category.color
Toolbox parent node

 Parent node
BackgroundEnvironment.ToolboxContent

Headings

 Environment.ToolWindowBackground

Individual items, or entire window if no available controls
Toolbox child node

 Child node
BackgroundEnvironment.ToolboxContent

Headings

 Environment.ToolWindowBackground

Individual items, or entire window if no available controls
Toolbox parent node

 Parent node
BorderNone
Toolbox child node

 Child node
BorderNone
Toolbox parent node

 Parent node
Foreground (Glyph)Environment.ToolboxContent
Toolbox child node

 Child node
Foreground (Glyph)Environment.ToolboxContent
Toolbox parent node

 Parent node
Foreground (Text)Environment.ToolboxContent
Toolbox child node

 Child node
Foreground (Text)Environment.ToolboxContent

Hover

ComponentElementToken name: Category.color
Toolbox child node on hover

 Toolbox hover on child node
BackgroundEnvironment.ToolboxContentMouseOver

Individual items only
Toolbox child node on hover

 Toolbox hover on child node
BorderNone
Toolbox child node on hover

 Toolbox hover on child node
Foreground (Text)Environment.ToolboxContentMouseOver

Individual items only

Selected

ComponentElementToken name: Category.color
Toolbox parent node focused

 Focused parent node
BackgroundTreeView.SelectedItemActive

From Tree view category
Toolbox child node focused

 Focused child node
BackgroundTreeView.SelectedItemActive

From Tree view category
Toolbox parent node focused

 Focused parent node
BorderTreeView.FocusVisualBorder

From Tree view category
Toolbox child node focused

 Focused child node
BorderTreeView.FocusVisualBorder

From Tree view category
Toolbox parent node focused

 Focused parent node
Foreground (Glyph)TreeView.SelectedItemActive

From Tree view category
Toolbox child node focused

 Focused child node
Foreground (Glyph)TreeView.SelectedItemActive

From Tree view category
Toolbox parent node focused

 Focused parent node
Foreground (Text)TreeView.SelectedItemActive

From Tree view category
Toolbox child node focused

 Focused child node
Foreground (Text)TreeView.SelectedItemActive

From Tree view category
Toolbox parent node unfocused

 Unfocused parent node
BackgroundTreeView.SelectedItemInactive

From Tree view category
Toolbox child node unfocused

 Unfocused child node
BackgroundTreeView.SelectedItemInactive

From Tree view category
Toolbox parent node unfocused

 Unfocused parent node
BorderNone
Toolbox child node unfocused

 Unfocused child node
BorderNone
Toolbox parent node unfocused

 Unfocused parent node
Foreground (Glyph)TreeView.SelectedItemInactive

From Tree view category
Toolbox child node unfocused

 Unfocused child node
Foreground (Glyph)TreeView.SelectedItemInactive

From Tree view category
Toolbox parent node unfocused

 Unfocused parent node
Foreground (Text)TreeView.SelectedItemInactive

From Tree view category
Toolbox child node unfocused

 Unfocused child node
Foreground (Text)TreeView.SelectedItemInactive

From Tree view category
ComponentPartElementStateLightDarkBlueHigh Contrast
Divider linesDefaultFFEEEEF2FF2D2D30FFEEEEF2ControlDark
Expander glyphForegroundDefault
Expander glyphForegroundHover
Expander glyphBackgroundDefault
Expander glyphBackgroundHover
Expander glyphBorderDefault
Expander glyphBorderHover
Show: